[JS] 최근 몇년간 나온 프론트엔드 프레임워크 정리

JavaScript Framework

이미 모두가 알고 있고 좋아하는 JavaScript Framework를 간단하게 정리해봅니다.

React.js

• 최근 주목받고 있는 Facebook에서 만들어진 라이브러리에서 MVC아키텍쳐에서 View에 해당하는 기능이 제공됨
• JSX, Virtual DOM이라는 새로운 접근방법
• MVC와는 다른 Flux라는 디자인패턴
• Isomorphic 아키텍쳐 가능
• Angular.js나 Backbone.js가 규모가 커지면 관리하기 힘든 단점을 보완

Angular.js

• Google에서 만든 MVC프레임웍
• 전체 스택에서 할 수 없는 일이 거의 없음
• Yeoman등을 사용하면 SPA를 30분이내 만들수 있음(SEO는 안습 ㅠ_ㅠ)
• Angular Wat라고 하지만, 모듈화가 잘되어 있고, 지저분한 코드가 거의 없음
• AngularJS Tutorial
• Yeoman – generator-angular

Angular.js 2.0

• ECMAScript6등의 최신 JavaScript 규격 도입, TypeScript기반 기술
• Angular.js와 사용법이 다르다.
• WebComponents를 이용하기보다 엄격하고 독립적인 컴포넌트화 추진
• 공식사이트

Backbone.js

• 단일 데이터를 관리할 Model, 여러 개의 모델을 관리할 Collection, 화면을 관리하는 View를 조합
• Backbone.js 자체는 구조화방식이 아닌 프레임웍으로 Marionette.js와 같이 사용하는 경우가 많음
• 사례가 의외로 많음 (Buffer, Soundcloud, Trello등)

Vue.js

• MVVM
• 만든 UI구성요소를 조합하여 페이지를 구성하는 것을 전제로 함
• 비슷하다고 말하지만 Angular.js와는 설계사상이 완전 다름
• 이해하기 쉬운 프레임웍으로 유명함

Mithril.js

• Mercury와 같이 속도가 빠른 프레임웍

Aurelia.js

ECMAScript6, ECMAScript7 구문

Google Angular.js개발에 참여했던 Rob Eisenberg가 개발함

Knockout.js

• MVVM
• Binding에 특화된 프레임웍
• 기능은 적지만 도입이 용이하고 학습비용이 낮음

Ember.js

Riot.js

• 공식 사이트
• React를 의식하고 만들어진 초경량 UI라이브러리로 View에 특화
• JSX 도입

Ractive.js

• 공식 사이트
• 데이터바인딩에 특화된 JavaScript 라이브러리
• Virtual DOM개념 이용

정리

간단하게 정리만 했지만, 상당히 많습니다.

이 중에서 5가지 정도는 기억해두면 일반적인 앱을 만드는데 지장이 없다고 생각되기 때문에 참고용으로 알고 계시기 바랍니다.

[출처] 최근 몇 년간 나온 프레임워크 정리 (2015.06.02)