단일 페이지 JavaScript 웹 애플리케이션의 아키텍처?


99

복잡한 단일 페이지 JS 웹 애플리케이션을 클라이언트 측에서 어떻게 구성해야합니까? 특히 모델 개체, UI 구성 요소, 컨트롤러 및 서버 지속성을 처리하는 개체 측면에서 응용 프로그램을 깔끔하게 구성하는 방법에 대해 궁금합니다.

MVC는 처음에는 적합 해 보였습니다. 그러나 UI 구성 요소가 다양한 깊이 (모델 데이터에 대해 작동 / 반응하는 고유 한 방식과 직접 처리 할 수도 있고 직접 처리하지 않을 수도있는 각 생성 이벤트)에 중첩 된 경우 MVC를 깔끔하게 적용 할 수없는 것 같습니다. (그러나 그렇지 않은 경우 저를 수정하십시오.)

-

( 이 질문 은 가장 사소한 한 페이지 앱 이외의 다른 것에 분명히 필요한 ajax 사용에 대한 두 가지 제안으로 이어졌습니다.)



2
이 질문에 대한 자신의 통찰력을 제공 할 수 있습니까? 이 질문을 한 지 오래되었으며 Javascript SPA에 대한 자신의 경험에서 배운 가장 중요한 측면이 무엇인지 알고 싶습니다.
아드리안 Moisa

답변:


35

PureMVC / JS 의 MVC 아키텍처 는 가장 우아한 IMO입니다. 나는 그것으로부터 많은 것을 배웠다. 또한 Nicholas Zakas의 Scalable JavaScript Application Architecture 가 클라이언트 측 아키텍처 옵션을 연구하는 데 도움이된다는 것을 발견했습니다 .

다른 두 가지 팁

  1. 보기, 포커스 및 입력 관리는 단일 페이지 웹 앱에서 특별한주의가 필요한 영역이라는 것을 알았습니다.
  2. 또한 JS 라이브러리를 추상화하고 문을 열어 사용하는 것에 대한 마음을 바꾸거나 필요에 따라 믹스 앤 매치하는 것이 도움이된다는 것을 알았습니다.

13

Dean이 공유 한 Nicholas Zakas의 프레젠테이션은 시작하기에 아주 좋은 곳입니다. 나는 또한 한동안 같은 질문에 답하기 위해 고군분투하고 있었다. 몇 가지 대규모 Javascript 제품을 수행 한 후 누군가가 필요로 할 경우 학습 내용을 참조 아키텍처로 공유하는 것을 생각했습니다. 보세요 :

http://boilerplatejs.org/

다음과 같은 일반적인 Javascript 개발 문제를 해결합니다.

  • 솔루션 구조화
  • 복잡한 모듈 계층 생성
  • 자체 포함 된 UI 구성 요소
  • 이벤트 기반 모듈 간 통신
  • 라우팅, 기록, 북마크
  • 단위 테스트
  • 현지화
  • 문서 생성

기타


10

앱을 빌드하는 방법 :

  • ExtJS 프레임 워크, 단일 페이지 앱, 별도의 JS 파일에 정의 된 모든 구성 요소, 주문형로드
  • 모든 구성 요소는 자체 전용 웹 서비스 (때로는 둘 이상)에 연결하여 데이터를 ExtJS 저장소 또는 특수 목적 데이터 구조로 가져옵니다.
  • 렌더링은 표준 ExtJS 구성 요소를 사용하므로 저장소를 그리드에 바인딩하고 레코드에서 양식을로드 할 수 있습니다.

자바 스크립트 프레임 워크를 선택하고 모범 사례를 따르십시오. 내가 가장 좋아하는 것은 ExtJS와 GWT이지만 YMMV입니다.

이것에 대해 자신의 솔루션을 굴리지 마십시오. 현대 자바 스크립트 프레임 워크가하는 일을 복제하는 데 필요한 노력이 너무 큽니다. 처음부터 모든 것을 구축하는 것보다 기존의 것을 적용하는 것이 항상 더 빠릅니다.


10
Question - What makes an application complex ? 

답변-질문 자체에서 '복잡하다'라는 단어의 사용. 따라서 일반적인 경향은 처음부터 복잡한 솔루션을 찾는 것입니다.

Question - What does the word complex means ?

답변-알려지지 않았거나 부분적으로 이해되는 모든 것. 예 : 오늘날에도 중력 이론은 나에게 복잡하지만 1655 년에 그것을 발견 한 아이작 뉴턴 경에게는 그렇지 않습니다.

Question - What tools can I use to deal with complexity ?

답변-이해와 단순성.

Question - But I understand my application . Its still complex ?

답-이해와 복잡성이 공존하지 않기 때문에 두 번 생각하십시오. 거대한 거대한 응용 프로그램을 이해한다면 그것이 작고 단순한 단위의 통합에 불과하다는 데 동의 할 것이라고 확신합니다.

Question - Why all of the above philosophical discussion for a question on 
           Single Page Application (SAP)?

답변-왜냐하면

-> SPA는 우리가 응용 프로그램 개발에서하고있는 많은 일을 위해 바퀴를 재발 명해야하는 새로 발명 된 어떤 종류의 핵심 기술이 아닙니다.

-> 웹 애플리케이션의 더 나은 성능, 가용성, 확장 성 및 유지 보수 가능성에 대한 요구에 의해 추진되는 개념입니다.

-> 상당히 새로 식별 된 디자인 패턴이므로 SPA를 디자인 패턴으로 이해하면 SPA 아키텍처에 대한 정보에 입각 한 결정을 내릴 수 있습니다.

-> 루트 수준에서는 SPA가 복잡하지 않습니다. 응용 프로그램의 요구 사항과 SPA 패턴을 이해 한 후에는 이전에 몇 가지 수정 및 재 배열을 통해 수행 한 것과 거의 동일한 방식으로 여전히 응용 프로그램을 만들고 있음을 알게됩니다. 개발 접근법에서.

Question - What about the use of Frameworks ?

답변-프레임 워크는 일반적으로 식별되고 일반적인 패턴에 대한 보일러 플레이트 코드 / 솔루션이므로 애플리케이션 개발에서 x % (애플리케이션에 따라 가변적) 부하를 제거 할 수 있지만 특히 무거운 경우에는 그다지 기대할 수 없습니다. 그리고 성장하는 응용. 애플리케이션 구조와 흐름을 완벽하게 제어하는 ​​것이 항상 좋은 경우이지만 가장 중요한 것은 이에 대한 코드입니다. 응용 프로그램 코드에 회색 또는 검은 색 영역이 없어야합니다.

Question - Can you suggest one of the many approaches to SPA architecture ?

답변-애플리케이션의 특성에 따라 고유 한 프레임 워크를 생각해보십시오. 응용 프로그램 구성 요소를 분류합니다. 파생 된 프레임 워크와 가까운 기존 프레임 워크를 찾아서 찾으면 사용하고, 찾을 수없는 경우에는 직접 진행하는 것이 좋습니다. 프레임 워크를 만드는 것은 초기에 상당히 노력하지만 장기적으로 더 나은 결과를 가져옵니다. 내 SPA 프레임 워크의 일부 기본 구성 요소는 다음과 같습니다.

  • 데이터 소스 : 모델 / 모델 컬렉션

  • 데이터 표시를위한 마크 업 : 템플릿

  • 응용 프로그램과의 상호 작용 : 이벤트

  • 상태 캡처 및 탐색 : 라우팅

  • 유틸리티, 위젯 및 플러그인 : 라이브러리

이것이 어떤 식 으로든 도움이되었는지 알려주고 SPA 아키텍처에 행운을 빕니다 !!


1
이것은 훌륭한 관점을 추가합니다 (일반적으로 드뭅니다). 고마워!
Cody

4

가장 좋은 방법은 다른 프레임 워크의 사용 예를 살펴 보는 것입니다.

TodoMVC 는 많은 SPA 프레임 워크를 보여줍니다.



1

현재 작업중인 웹 응용 프로그램은 JQuery를 사용하며 큰 단일 페이지 웹 응용 프로그램에는 권장하지 않습니다. 대부분의 프레임 워크 (예 : Dojo, yahoo, google 및 기타)는 라이브러리에서 네임 스페이스를 사용하지만 JQuery는 사용하지 않으며 이는 중요한 단점입니다.

웹 사이트가 작을 경우 JQuery는 괜찮지 만 대규모 사이트를 구축하려는 경우 사용 가능한 모든 Javascript 프레임 워크를 살펴보고 가장 적합한 프레임 워크를 결정하는 것이 좋습니다.

그리고 MVC 패턴을 javascript / html에 적용하는 것이 좋으며 자바 스크립트에 대한 대부분의 객체 모델은 실제로 서버에서 ajax를 통해 반환하는 json으로 수행 될 수 있으며 javascirpt는 json을 사용하여 html을 렌더링합니다.

여러분이 알아야 할 대부분의 내용을 다루고있는 Ajax 책을 읽는 것이 좋습니다.


jQuery는 프로토 타입을 사용하여 네임 스페이스 방식으로 작성 될 수 있습니다 (JS와 마찬가지로). 프레임 워크 뒤에서 추상화를 보증하기에 충분히 크거나 모호한 기능인지는 잘 모르겠습니다. JS가 실제로 무엇을하는지 배우고 싶습니다. stackoverflow.com/questions/881515/…
SimplGy 2011

4
JQuery는 클라이언트 측 애플리케이션 프레임 워크로 사용되지 않습니다. 그것은 그것보다 "낮은 수준"을 목표로합니다. JQuery는 HTML 문서 탐색, 이벤트 처리, 애니메이션 및 Ajax 작업을 단순화하고 브라우저 간의 차이점을 추상화하도록 설계되었습니다. 더 큰 앱의 경우 녹아웃 또는 백본과 같은 클라이언트 측 애플리케이션 프레임 워크를 JQuery와 함께 사용해야합니다.
Sam Shiles

따라서 녹아웃이나 백본에 문서 순회, 이벤트 처리 등이 포함되어 있지 않으면 그다지 가치가 없습니다. YUI3 App Framework는 그렇고 사용한다면 JQuery가 필요하지 않습니다.
eaglestorm

1
jquery는 jQuery 변수와 $ 변수에 저장된 모든 메서드를 유지합니다. 충돌 없음 옵션을 사용하는 경우 jQuery라는 이름 만 전역 네임 스페이스에 생성됩니다. jQuery는 프레임 워크가 아니라 라이브러리 일 뿐이며 작업 방법을 알려주지 않고 일반적인 작업을 수행 할 수있는 지름길을 제공합니다. jQuery를 Dojo / YUI 등과 비교하는 것은 잘못되었습니다.
Hoffmann

1
@eaglestorm if 문이 거짓으로 평가됩니다.
존 레만




0

대안 : ItsNat 살펴보기

JavaScript로 생각하되 동일한 DOM API를 사용하는 서버의 Java에서 동일한 코드를 작성하십시오. UI와 데이터가 함께 있기 때문에 서버에서 사용자 지정 클라이언트 / 브리지없이 애플리케이션을 관리하는 것이 훨씬 쉽습니다.



0

NikaFramework를 사용하면 단일 페이지 응용 프로그램을 만들 수 있습니다. 또한 HTML , CSS ( SASS ), JavaScript 를 별도의 파일로 작성하고 결국 하나의 출력 파일로 묶을 수 있습니다.


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.