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

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

---

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

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

-

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

---

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

다른 두 가지 팁

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

---

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

http://boilerplatejs.org/

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

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

기타

---

앱을 빌드하는 방법 :

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

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

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

---

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 ?

Answer - Think of your own framework based on the nature of your application. Categorize application components. Look for an existing framework that is close to your derived framework, if you find it then use it, if you do not find it then I suggest going ahead with your own. Creating framework is quite an effort upfront but produces better results in long run. Some basic components in my SPA framework will be:

• Data Source : Models / Collections of Models

• Mark Up for presenting data : Templates

• Interaction with the application : Events

• State capturing and navigation : Routing

• Utilities , widgets and plug-ins : libraries

Let me know if this helped in any way and good luck with your SPA architecture !!

---

The best thing to do is to look at example uses of other frameworks:

TodoMVC showcases many many SPA frameworks.

---

You can use javascript MVC framework http://javascriptmvc.com/

---

The web application that I am currently working on uses JQuery and I would not recommend it for any large single page web application. Most frameworks i.e. Dojo, yahoo, google and others use namespaces in their libraries but JQuery does not and this is a significant drawback.

If your web site is intended to be small then JQuery would be ok but if you intended to build a large site then I would recommend looking at all the Javascript frameworks available and deciding which one most meets your needs.

And I would recommend applying the MVC pattern to your javascript/html and probably most of your object model for the javascript could be done as the json that you actually return from the server through ajax and the javascirpt uses the json to render html.

I would recommend reading the book Ajax in action as it covers most of the stuff you will need to know.

---

I'm using Samm.js in several one page applications with great success

---

I would go with jQuery MVC

---

Check out http://bennadel.com/projects/cormvc-jquery-framework.htm Ben is pretty sharp and if you dig around on his blog he has some nice posts about how CorMVC is put together and why.

---

Alternative: take a look to ItsNat

Think in JavaScript but code the same in Java in server with the same DOM APIs, in server is way easier to manage your application without custom client/bridges because UI and data are together.

---

Or have a look at https://github.com/flosse/scaleApp

---

NikaFramework allows you to create single-page application. Also allows you to write HTML, CSS (SASS), JavaScript into separate files and bundle them into only one output file in the end.

---

I would recommend to explore Yeoman. It allow you to use existing "best practice" for your new project.

For example:

if you decide to use Angular.js, there is a Yeoman generator, that give you a structure for routing, views, services, etc. Also allow you to Test, minify your code, etc.

If you decide to use Backbone, checkout this generator

참고URL : https://stackoverflow.com/questions/3050869/architecture-of-a-single-page-javascript-web-application