단일 페이지 애플리케이션을 구축하기위한 JavaScript 프레임 워크 [닫힘]


101

내 목표는 기존 웹 애플리케이션을 RESTful SPA ( 단일 페이지 애플리케이션 )로 마이그레이션하는 것입니다 . 현재 여러 Javascript 웹 애플리케이션 프레임 워크를 평가하고 있습니다.


내 요구 사항은 다음과 같습니다.

  • RESTful 데이터 레이어 (예 : ember-data)
  • MV * 구조
  • 동적 경로
  • 테스트 지원
  • 관례에 의한 코딩
  • SEO 지원
  • 브라우저 기록 지원
  • 좋은 (API) 문서
  • 생산 준비
  • 살아있는 공동체

등뼈

현재 응용 프로그램은 backbone.js. 전반적으로 backbone.js좋은 프로젝트이지만, 어디에서 일어나야하고 어떻게 구현해야하는지 결정하는 잘 정의 된 구조가 없습니다. 변화하는 개발자와 함께 더 큰 팀에서 일하면 일종의 구조화되지 않은 코드, 유지 관리 및 이해가 어렵습니다. 이것이 제가 이미이 모든 것을 정의하는 프레임 워크를 찾고있는 이유입니다.

타다 남은 것

나는 ember.js마지막 날을 들여다 보았다 . 접근 방식은 나에게 매우 유망 해 보입니다. 그러나 불행히도 코드는 거의 매일 변경됩니다. 그래서 나는 그것을 생산 준비라고 부르지 않을 것입니다. 그리고 불행히도 버전 1.0이 될 때까지 기다릴 수 없습니다. 하지만 저는이 프레임 워크 뒤에있는 아이디어가 정말 마음에 듭니다.

모난

Angular.jsGoogle에서 관리하는 널리 퍼진 프레임 워크이기도합니다. 하지만 앵귤러에 익숙해지지 않았습니다. 나에게는 구조가 다소 불분명 해 보이며 프레임 워크의 각 부분에 대한 전반적인 책임에 대한 설명이 누락되었으며 구현이 회로처럼 느껴집니다. 똑바로하기 위해서 : 이것은 단지 나의 개인적인 인상 일 뿐이며 지식이 부족한 것에 근거 할 수 있습니다.

배트맨유성

내가 이해했듯이 두 프레임 워크에는 서버 부분도 필요합니다. 그리고 우리는 RESTful 백엔드를 원하기 때문에 언어, 기술 또는 소프트웨어에 관계없이 원하는 것이 아닙니다. 또한 백엔드 API가 이미 존재합니다 (RoR).

녹아웃 , CanJS척추

나는이 세 후보에 대해 더 깊이 들어 가지 않았다. 아마도 이것이 나의 다음 단계가 될 것입니다.


그래서 지금 내 질문 :

  • 좋은 SPA 프레임 워크를 놓치고 있습니까?
  • 어떤 프레임 워크를 제안 / 권장 하시겠습니까?
  • 언급 된 프레임 워크를 피 하시겠습니까?
  • 더 큰 SP 애플리케이션에 대한 경험은 무엇입니까?

추신 : 저는 Steven Anderson (Knockout.js의 핵심 개발자)의 "Throne of JS"컨퍼런스 (2012 년) 및 일반적인 자바 스크립트 프레임 워크에 대한 훌륭한 블로그 게시물 을 추천하고 싶습니다 .

PS : 예, 이미 질문이 있다는 것을 알고 있습니다. 그러나 SPA는 개발이 너무 빠르고 빠르기 때문에 대부분은 이미 구식입니다.


방금 오픈 소스로 제공 한 녹아웃 기반 SPA 프레임 워크를 확인하십시오. knockout-spa github.com/onlyurei/knockout-spa
onlyurei

답변:


81

저는 최근에 프로젝트에서 JavaScript SPA 프레임 워크도 결정해야했습니다.

  • 타다 남은 것

    Ember를 일찍 봤고 당신과 비슷한 생각을 했어요-정말 마음에 들었지만 아직 사용하기에는 너무 이르다고 느꼈습니다 ... 제가 읽은 튜토리얼의 절반 정도는 최근에 뭔가가 있었기 때문에 현재 버전에서 작동하지 않았습니다. 템플릿 작동 방식이 변경되었습니다.

  • 등뼈

    Backbone은 우리가 진지하게 살펴본 첫 번째 프레임 워크였습니다. 왜 "잘 정의 된 구조"가 없다고 생각하는지 잘 모르겠습니다. Backbone은 Model과 View 코드를 나누는 방법에 대해 매우 명확합니다. 어떤 종류의 앱 템플릿이 없다는 뜻일까요? 어쨌든 Backbone은 모델 / REST 바인딩 부분에 실제로 초점을 맞춘 것처럼 보이지만 실제로 뷰 바인딩에 대해 아무것도 규정하지 않습니다. 모델 바인딩이 중요하고 Rails를 사용하고 있다면이 작업을 쉽게 수행 할 수 있습니다. 안타깝게도 내 앱의 웹 서비스가 실제로 일치하지 않았고 모든 것에 대해 내 자신 .sync.parse방법 을 작성해야했습니다 . Model과 View 코드의 분리는 훌륭했지만 모든 바인딩을 처음부터 작성해야했기 때문에 그럴 가치가 없었습니다.

  • 녹아웃

    Knockout은 Yin to Backbone의 Yang과 같습니다. Backbone이 모델에 초점을 맞추는 곳에서 Knockout은 MVVM 프레임 워크이며보기에 초점을 맞추고 있습니다. 그것은이 observable자바 스크립트 객체 속성에 대해 래퍼를하고 사용 data-bind하여 HTML에 바인드 속성에 대한 속성을. 결국 뷰 바인딩은 주로 앱에 필요한 것이었기 때문에 Knockout을 사용했습니다. (... 추가로, 나중에 논의 되는대로 ...) Knockout의 뷰 바인딩과 Backbone의 모델 바인딩을 좋아한다면 두 프레임 워크를 결합하는 KnockBack 도 있습니다 .

  • 모난

    Knockout 이후에 이것을 보았습니다. 불행히도 Knockout이 뷰 바인딩을 수행하는 방법에 대해 우리 모두는 꽤 행복해 보였습니다. 녹아웃보다 들어가는 것이 훨씬 더 복잡하고 어려웠습니다. 그리고 그것은 바인딩을 수행하기 위해 많은 사용자 정의 HTML 속성을 사용합니다. 제가 좋아하는 것은 아닙니다 ... 나중에 Angular를 다시 살펴볼 수 있습니다. 이 프로젝트에 너무 늦게 보았습니다.

  • 배트맨 , 유성 , CanJS , 척추

    이것들 중 하나를 너무 자세히 보지 않았습니다. Spine은 명시적인 Controller 개체를 사용하는 Backbone과 유사한 프레임 워크이며 CoffeeScript로 작성된다는 것을 알고 있습니다.

  • 후기

    앞서 언급했듯이 프로젝트에서는 뷰 바인딩에 집중하는 것이 더 중요했기 때문에 Knockout을 사용하게되었습니다. 우리는 또한 사용하여 종료 RequireJS를 모듈화를위한 교차로심부름 군 , 라우팅과 역사를 처리 할 수 재스민 뿐만 아니라, 테스트를위한 JQuery와 , 트위터 부트 스트랩Underscore.js은 (그리고 아마도 더 라이브러리 나는 순간에 잊고있어).

    Javascript 앱 개발은 Rails 에코 시스템보다 Java 에코 시스템과 비슷합니다. Rails는 모든 앱 (Rails 프레임 워크)에 사용할 견고한 핵심 요소를 제공하며 커뮤니티는 그 위에 많은 사용자 정의 (보석)를 제공합니다. 자바는 ... 언어를 제공합니다. 그런 다음 Java EE 또는 Spring 또는 Play 또는 Struts 또는 Tapestry를 선택할 수 있습니다. 그리고 JDBC 또는 Hibernate 또는 TopLink 또는 Ibatis를 선택하여 데이터베이스와 통신하십시오. 그런 다음 Ant 또는 Maven 또는 Gradle을 사용하여 빌드 할 수 있습니다. 그리고 그것을 실행하는 톰캣이나 부두 또는 보스 또는 WebLogin을 선택합니다. 그래서 당신이 필요로하는 무엇을 선택하는 것보다 함께 작동 선택에 더 중점있다 사용하는 프레임 워크를.


자세한 답변에 감사드립니다. knockout.js에 관한 몇 가지 질문 : 1) 프론트 엔드 / 백엔드에서 모델을 동기화 상태로 유지하기위한 일종의 데이터 레이어를 제공합니까? 2) 한 템플릿을 다른 템플릿에 포함시키는 지원은 어떻게됩니까 (아마 requireJS와 함께)? 3) 모든 파일 (모델, 뷰, 컨트롤러, 도우미 등)을 개별적으로 다른 폴더에 쉽게 넣을 수 있습니까? 이 질문들 외에도 많은 정보를 제공했기 때문에 귀하의 답변을 수락으로 설정했습니다.
크리스토퍼 윌

@ChristopherWill 감사합니다! 1.) Backbone이 뷰 바인딩을 위해 사용자에게 맡기는 것처럼 Knockout은 REST-> Model 바인딩을 위해 사용자에게 맡깁니다. 이 문서의 몇 가지 예입니다 - knockoutjs.com/documentation/json-data.html은 또는 당신은 백본의 REST-> 모델 인구를 결합하는 넉백을 사용할 수 있습니다.
Nate

2.) 의미에 따라 다릅니다. Knockout에는 모델에서 컬렉션을 가져 와서 목록 태그 또는 테이블 태그에 바인딩하고 각각에 대해 지정된 템플릿을 렌더링 할 수있는 기본 제공 데이터 바인딩이 있습니다. 전체적인 뷰를 구축하고 교체하는 방법과 같은 대규모 작업의 경우-여전히 다소 수동적입니다 (적어도 내가 어떻게하고 있는지, 아직 배우고 있는지)-RequireJS w / 텍스트 플러그인을 사용하면이 작업을 좀 더 쉽게 수행 할 수 있습니다. 하지만 여전히 로직을 지정하고 div를 교체해야합니다. 내 경로에 응답하는 메서드에서이 작업을 수행합니다. 하지만이를 위해 Knockout 이벤트를 연결할 수 있습니다.
Nate

3.) RequireJS는 이것을 가능하게합니다.
Nate

고마워 네이트. KnockBack을 시도해 볼 것 같아요 .. 약간 유망한 소리입니다. 그리고, 물론, 당신의 언급 라이브러리와도 (requireJS, 교차로 등)
크리스토퍼 윌

8

수많은 SPA가 포함 된 클라우드 서비스 프로젝트 개발을 시작한 지 1 년이 지났으므로 RESTful 아키텍처 요구 사항을 충족하기 위해 UI에 사용할 자바 스크립트 프레임 워크를 사용하는 것은 큰 결정이었습니다. 그리고 많은 연구 끝에 우리는 Dojo 프레임 워크를 사용하게되었습니다 .

당신이 좋아할 주요 기능 :

  1. 교육받은 커뮤니티와 완벽한 디자인 패턴을 생각 해낸 팀. 훌륭한 규칙과 모듈 식 / 객체 지향 아키텍처. CrossBrowser 프로그래밍 태도로 :)
  2. MV * 구조. 외부 .htm 템플릿을 사용하여 UI 위젯을 빌드하고 프로덕션을 위해 모든 자바 스크립트 및 템플릿을 하나의 축소되고 작은 .js로 빌드합니다.
  3. 상속으로 클래스를 빌드하십시오. 속성 설정자, 많은 기능 도구.
  4. 발행 / 구독 메커니즘 (dojo에서 주제 이름 지정)
  5. 유효성 검사 양식 컨트롤, 대화 상자 / 툴팁에서 강력한 기능을 갖춘 고도로 사용자 지정 가능한 (그러나 경량) 차트 및 데이터 그리드 솔루션에 이르기까지 많은 UI 컨트롤이 있습니다.
  6. DOH라는 좋은 단위 테스트 시스템입니다. 또한 마우스 / 키보드 동작을 재현하는 로봇이 있습니다.
  7. 모든 jquery 기능과 많은 플러그인을 포함하는 NodeList라는 쿼리 도구 (예 : JQuery).
  8. 훌륭하지만 완전하지는 않습니다. REST 서비스와 함께 사용할 JsonRest 모듈이 있습니다. 편리한 도구이지만 많은 기능이 부족합니다.

이러한 문제를 극복하기 위해 AJAX 폴러, 오류 처리 및 범용,로드 및 알림 솔루션을 개발했습니다. 우리는 dojo 프레임 워크 규칙과 구조를 사용하여 매우 쉽게 수행했습니다. 그렇게하지 않으려면이 부분에 다른 프레임 워크를 사용해야합니다.

웹에서 훌륭한 SPA를 살펴보면 모든 SPA가 사용자 정의되고 여러 프레임 워크를 사용하고 있음을 알 수 있습니다. 그러나 Dojo에 대한 우리의 경험은 환상적이었습니다. 따라서 모든 프레임 워크가 SPA에 대해 불완전하므로 다른 프레임 워크를 생각하지 않는 것이 좋습니다. 그러나 궁극적으로 다른 옵션도 있습니다 (권장하지 않으며 세부 정보가 없음). 자동으로 UI 및 자바 스크립트를 생성하여 SPA를 구축 할 수있는 JAVA 프레임 워크를 사용합니다.


여보세요! 지금 Dojo를 사용하십니까? Dojo에 대한 블로그가 있습니까?
Dunaevsky Maxim

안녕하세요! 예, 우리는 여전히 동일한 제품에 사용하고 유지합니다. 사내 프레임 워크는 도장 위에 작성되어 있으며 매일 추가하고 있습니다. 그것으로 시작한다면 요즘은 오래된 도구로 간주됩니다. 그들은 여전히 ​​Dojo 2.0에서 작업하고 있지만 현재로서는 다른 옵션을 사용하는 것이 더 나을 수 있습니다. 목록 맨 위에 React / Angular가 있습니다.
Unicornist
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.