Breeze/Knockout 템플릿
브리즈 /녹아웃 MVC 템플릿은 워드 벨에 의해 작성되었습니다
SPA(단일 페이지 애플리케이션)에 대해 들어보셨고 그것이 무엇인지 궁금하셨습니다. 당신이 그것에 대해 읽을 수 있지만, 당신은 오히려 자신을 위해 그것을 경험하고 싶습니다. 하지만 샘플을 다운로드할 시간이 있는 사람은 누구인가요? Visual Studio가 있는 경우 ASP.NET MVC 4 "Breeze/Knockout 단일 페이지 애플리케이션" 템플릿을 사용하여 60초 이내에 SPA를 시작하고 실행하는 예제가 있습니다.
Breeze/Knockout SPA 템플릿이란?
대부분의 프로젝트 템플릿은 애플리케이션 구조를 생성합니다. 코드를 추가하여 뼈에 살을 붙이고 결국 작업 애플리케이션을 제공합니다. Breeze/Knockout SPA 템플릿은 다릅니다. 학습할 수 있는 샘플 애플리케이션을 생성합니다. SPA 애플리케이션 디자인과 SPA를 빌드하기 위한 많은 기술을 보여 줍니다.
Breeze/Knockout 템플릿은 ASP.NET 및 Web Tools 2012.2 업데이트에 포함된 KnockoutJS SPA 템플릿의 변형입니다. Breeze SPA 템플릿은 동일한 사용자 환경을 가진 애플리케이션을 생성하지만 데이터 관리를 위해 Breeze를 사용하는 다른 구현이 있습니다.
KnockoutJS SPA 템플릿은 간단한 애플리케이션에 적합한 원시 jQuery AJAX를 사용하여 서비스 요청을 만듭니다. 그러나 더 정교한 앱에는 더 까다로운 데이터 관리 요구 사항이 있습니다. 예를 들어 대부분의 애플리케이션은 다음과 같습니다.
- 확장된 사용자 세션 중에 서버를 쿼리하고 다시 쿼리합니다.
- 쿼리 필터, 정렬 및 페이징을 추가합니다.
- 여러 화면에서 동일한 데이터를 공유합니다.
- 많은 개체에 대한 변경 내용을 누적한 다음 단일 트랜잭션으로 저장합니다.
- 사용자가 데이터베이스에 변경 내용을 커밋하기 전에 오류를 수정할 수 있도록 클라이언트에서 변경 내용의 유효성을 검사합니다.
BreezeJS 라이브러리는 이러한 집안일을 처리하므로 가장 중요한 애플리케이션 논리 및 사용자 환경을 개발할 수 있습니다.
Breeze는 JavaScript 및 HTML에서 풍부한 데이터 애플리케이션을 빌드하기 위한 오픈 소스 라이브러리로, 지금까지 독립 실행형 데스크톱 애플리케이션으로 제공된 앱 종류입니다.
Breeze/Knockout 템플릿은 보다 강력한 데이터 관리 인프라를 향한 첫 번째 중요한 단계를 수행하는 데 도움이 됩니다. KnockoutJS SPA 템플릿과 바깥쪽에 동일한 샘플 Todo 애플리케이션을 생성합니다. 내부에서 AJAX 데이터 계층을 Breeze로 대체하므로 두 가지 방법을 나란히 비교할 수 있습니다. 물론, 그것은 겨우 브리즈 응용 프로그램의 잠재력을 터치. 하지만 Breeze의 작동 방식과 이러한 전환을 위해 필요한 것이 얼마나 적은지 알 수 있습니다.
이제 시작하겠습니다.
Breeze/Knockout 템플릿 프로젝트 만들기
위의 다운로드 단추를 클릭하여 템플릿을 다운로드하고 설치합니다. 템플릿은 VSIX(Visual Studio 확장) 파일로 패키지됩니다. Visual Studio를 다시 시작해야 할 수도 있습니다.
템플릿 창에서 설치된 템플릿을 선택하고 Visual C# 노드를 확장합니다. Visual C#에서 웹을 선택합니다. 프로젝트 템플릿 목록에서 MVC 4 웹 애플리케이션 ASP.NET 선택합니다. 프로젝트 이름을 지정하고 확인을 클릭합니다.
새 프로젝트 마법사에서 브리즈 녹아웃 SPA를 선택합니다.
Ctrl-F5를 눌러 디버깅 없이 애플리케이션을 빌드하고 실행하거나 F5 키를 눌러 디버깅을 실행합니다.
애플리케이션이 처음 실행되면 로그인 화면이 표시됩니다. "등록" 링크를 클릭하면 사용자 이름과 암호를 입력할 수 있는 새 페이지가 표시됩니다. (로그인 및 등록 페이지는 ASP.NET MVC를 사용하여 빌드됩니다.) 등록 양식을 제출하면 서버는 계정에 대한 두 개의 항목이 있는 TodoList를 생성합니다. 그런 다음 노란색 메모에 표시합니다.
이제 당신은 SPA의 땅에 있습니다. Todos를 조작하는 동안 보고 경험하는 모든 것은 녹아웃과 브리즈의 도움으로 클라이언트에서 렌더링되고 관리됩니다. 사용자로 앱을 탐색 ... 개발자의 시선으로 브라우저에서 개발자 도구를 사용하여 네트워크 트래픽을 캡처합니다. (인터넷 Explorer: F12 키를 누르고 네트워크 탭을 선택한 다음 캡처 시작을 클릭합니다.) 이제 다음을 시도합니다.
- 새 Todo 항목을 추가합니다.
- 레이블을 클릭하고 Todo 항목 제목 편집
- 완료된 항목을 표시하려면 확인란을 선택합니다. 텍스트 상자가 비활성화되어 제목을 더 이상 편집할 수 없습니다.
- 레이블 오른쪽에 있는 'x'를 클릭합니다. 항목이 사라지고 데이터베이스에서 삭제됩니다.
- 다른 항목을 선택하고 제목을 지웁다. 타이틀이 필요하다는 유효성 검사 오류가 발생합니다. 잠시 일시 중지하면 이전 타이틀이 복원됩니다.
- 터무니없이 긴 제목을 입력합니다. 타이틀이 너무 길다는 다른 유효성 검사 오류가 발생합니다.
- "할 일 목록 추가" 단추를 클릭합니다. 새 목록이 이전 목록의 왼쪽에 나타납니다.
- TodoList 타이틀을 사용하여 재생하여 필수 및 길이 유효성 검사를 트리거합니다.
- 제목 텍스트 상자를 클릭하여 오류 메시지를 지웁다.
- 오른쪽 위 모서리에 있는 원에서 "x"를 클릭하여 TodoList 및 해당 todos를 삭제합니다.
유효성 검사 논리는 Breeze에 의해 클라이언트 쪽에서 수행됩니다. 서버 모델 클래스의 유효성 검사 특성은 클라이언트에 전파되고 클라이언트가 서버에 연결하기 전에 자동으로 실행됩니다.
네트워크 트래픽을 검토합니다. Breeze에서 오류를 감지했을 때 서버에 대한 호출이 없었습니다. 유효한 각 변경 내용으로 인해 "/api/Todo/SaveChanges"에 대한 POST 요청이 발생했습니다. Breeze는 변경 내용을 번들로 묶어 Web API 컨트롤러의 SaveChanges 메서드에 단일 요청으로 함께 보냅니다. 이는 각 항목에 대해 PUT, POST 및 DELETE 요청을 개별적으로 만드는 KnockoutJS SPA 템플릿과 다릅니다.
내부 피킹
이 애플리케이션에는 클라이언트 쪽과 서버 쪽이 있습니다. 클라이언트 쪽 스택은 약간의 HTML과 애플리케이션 JavaScript 모듈("앱" 폴더)과 타사 JavaScript 라이브러리("스크립트" 폴더)의 조합으로 구성됩니다.
KnockoutJS SPA 템플릿을 조사한 경우 매우 친숙해 보입니다. 파란색 상자에 집중합니다. UI 아키텍처는 MVVM(Model-View-ViewModel)이며, 보기의 HTML 위젯은 뷰 모델의 지원 프레젠테이션 코드와 깔끔하게 구분됩니다. 데이터 바인딩 시스템(이 경우 녹아웃)은 뷰 및 뷰 모델을 조정하여 서로에 대한 친밀한 지식 없이 작업을 수행할 수 있도록 합니다.
모델은 Todo 데이터를 캡슐화합니다. 모델의 엔터티는 보기의 위젯에 직접 바인딩할 수 있도록 Knockout 관찰 가능한 속성을 사용하여 Breeze에 의해 생성됩니다. 뷰 모델은 데이터 컨텍스트에 모델 엔터티를 획득하고 저장하도록 요청합니다. 데이터 컨텍스트는 대부분의 작업을 Breeze에 위임합니다.
서버 쪽 스택은 일부 개발자 코드와 웹 API, Entity Framework 및 Breeze.NET 세 가지 주요 .NET 라이브러리로 구성됩니다.
기본 아키텍처는 KnockoutJS SPA 템플릿과 동일합니다. 그러나 구현은 훨씬 간단합니다. DDO가 삭제되고 대부분의 Entity Framework 세부 정보가 Breeze.NET 위임되었습니다.
다음 단계
Breeze 웹 사이트에서 클라이언트와 서버 스택에 대한 광범위한 논의를 통해 코드를 탐색하는 것이 좋습니다.
Breeze 클라이언트 쪽 쿼리를 사용해 볼 수 있습니다. 필터 및 정렬을 추가합니다. 종단 간 SPA 개발을 위해 더 나은 느낌을 얻기 위해 더 많은 모델 속성과 더 많은 엔터티를 추가할 수 있습니다. 디자인을 확신할 때 Todo 기능을 제거하여 사용자 고유의 기능으로 바꿀 수 있습니다.
곧 다음 큰 단계인 클라이언트 쪽 화면을 추가하고 탐색할 준비가 될 것입니다. 이 SPA 템플릿을 뒤로 하고 존 파파의 핫 타월과 같은 더 완전한 SPA 스택으로 전환하여 산들바람과 녹아웃 믹스에 듀란달을 추가합니다.