단일 페이지 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.