“2016 The State Of Javascript“라는 설문의 프론트엔드 프레임웍 부문에서 흥미와 만족도가 높은 다섯 개를 선정하고, 조사했다.

1. JAVASCRIPT
FRAMEWORKS
REACT, ANGULAR 2, VUE, EMBER, BACKBONE
Simplex Internet / TechLab / /Kichul Jeong @jkcjkc82
2016. 12. 29

2. " "라는 설문 프론트엔드 프레
임웍 부문에서 흥미와 만족도가 높은 다섯 개를 선정
2016 The State Of Javascript
React
Angular 2
Ember
Vue
Backbone
Angular 1은 제외
조사 시작일 : 2016년 12월 26일

3. DROPBOX API
예제

4. React

5. Facebook에서 개발
View 레이어만 담당하는 라이브러리
필요한 라이브러리(Ajax, Cookie, String, Router ...)는 직접 추가

6. 선언적 뷰
뷰의 상태를 설계하는 것으로 UI 개발 어려움 감소
컴포넌트 기반
컴포넌트를 조합해서 복잡한 UI를 쉽게 만들수 있다.
한 번 배워서 서버와 네이티브 앱에도 쓸 수 있음

7. 가상 DOM
DOM을 직접 다루지 않고, 메모리에 DOM 사본을 두고 변경된 부분만 필요할 때 업데이트

8. 함께 사용하는 기술
: 템플릿으로 사용
: 클래스, Arrow Function, 템플릿 문자열 등의 ES6의
편리한 기능 사용
: 애플리케이션에서 단 방향으로 데이터 전달하는
것을 담당하는 라이브러리.
: JSX, ES6 문법으로 된 파일을 브라우저에서 지원
하는 형태로 변환하는 컴파일러
: Babel 로더를 사용해서 .js 파일로 쓰거나 개발
용 HTTP가 실행되어 .js 파일을 제공
JSX
ES6
Redux
Babel
Webpack

9. Angular 2

10. Google에서 개발
모바일과 데스크탑을 위한
프레임웍

11. CROSS PLATFORM
Progressive Web App : 네이티브 앱과 유사한 경험 제공
Angular 방식으로 네이티브 모바일 앱 개발 가능
Angular 방식으로 데스크탑 앱 개발 가능
Ionic Framework
NativeScript
React Native
Electron

12. 속도와 성능
템플릿을 최적화된 코드로 변환
서버 사이드 렌더링(SSR) 지원. SEO 최적화
코드 자동 분리 기능으로 필요한 코드만 로드
(Component Router)

13. 생산성
간단하고 강력한 템플릿 문법
CLI Tool
인기있는 에디터와 IDE 기능 추가 가능
코드 자동 완성
즉각 에러 표시
다른 피드백 표시
특히 Visual Studio Code와 잘 어울림

14. 기타 특징
유닛테스트 : Karma
시나리오 테스트 : Protractor
애니메이션 API
접근성 : ARIA 지원 구성요소, 문서, a11y 테스트 인프라

15. 권장TypeScript
3party module(예 : qs) 추가 할 때, 일종의 TypeScript 헤더 파일을 추가해야한다.

16. 가상 DOM 지원
Change Detector Tree, Immutable, Observable을 이용해서
하는 부분이 적용DOM의 변화를 감지하고 처리
WEB COMPONENT 를 지원
Shadow DOM처럼 뷰 단위로 CSS를 지정 가능

17. ANGULAR QUICKSTART 프로젝트
빠르게 TypeScript 개발환경과 테스트 환경을 실행해볼 수
있음.
git clone https://github.com/angular/quickstart.git quickstart

18. 런타임 환경에서 필요한 패키지 :
: 모듈 로더.
observable sequence를 사용해서 비동기 및 이벤트 기
반 프로그램을 작성하는 라이브러리
: ES5~7 Polyfill
: 데코레이터 사용할 때 필요
: 비동기 태스크간 유지하는 실행 컨텍스트
System.js
RxJs
core-js/shim
reflect-metadata
Zone.js
필요한패키지가너무많다.

19. Vue

20. HTML, CSS, 자바스크립트만 알면 바로 개발할 정도로 쉬
움
어떤 규모의 앱이라도 개발 가능
17kb 경량, 고성능(React 보다 빠름)
뷰 레이어에만 집중한 Vue Core
2.0부터 Virtual DOM 지원(Snabbdom 사용)
서버사이드 렌더링 지원
TypeScript 지원

21. VUEX
전역 상태 관리
React에서 Redux와 같은 역할
추가로 패키지 설치 필요

22. VUE-CLI
Vue 프로젝트를 쉽게 생성
Webpack, Browserify와 같은 Bundler 선택 가능
HMR 기능

23. 평가
Angular와 React의 장점 모두 포함.
별다른 시행 착오 없이 예제를 만들 수 있었음.
redux보다 vuex가 더 편함

24. Ember

25. 웹 애플리케이션을 만드는 프레임웍
애플 사이트, 아이튠즈, NASA, Sony 등에서 사용함

26. 생산적이고 쉬움? 처음에는 약간 어려움
자동 업데이트하는 Handlebar 템플릿
컴포넌트 단위 개발
서버에서 데이터 읽기 쉽고, 간단함
라우팅 기능
가상 DOM(Glimmer 엔진)
서버 사이드 렌더링 지원

27. EMBER-CLI
CLI는 최고!!!
Angular-CLI도 Ember-CLI기반
프로젝트 생성
라우터, 컴포넌트, 서비스 등 추가
production 빌드까지

28. 단점, 어려움
HTML 파일을 수정하면 server를 다시 시작해야한다.
jQuery에 의존성
이해해야 할 내용이 많아서 문서 정독 필요

29. Backbone

30. 웹 애플리케이션 구조를 제공하는 프레임웍
Models : key/value 바인딩
Collections : Model의 집합. 열거형 함수 제공
Views : 이벤트 정의와 핸들러 정의. Model, Collection과
연결
RESTful JSON 인터페이스 제공

31. 요구 라이브러리
Underscore 1.8.3 이상
jQuery(1.11.0)
json2.js(Older IE 지원)
또는 Loadash와 Zepto로 대체 가능

32. 유연성은 높지만, 일관성 없는 코드가 만들어지기 쉽다.
Restful API를 지원하지만 백엔드 API가 Backbone에 맞게
조정을 하거나 Backbone.sync를 오버라이드 해야한다.

33. 비교

34. 특징
프레임웍 버전 브라우저
지원
가상
DOM
SSR 용량 권장 문법
React 15.4.0 지
원
지
원
44.8kb ES6
Angular 2 2.4.1 지
원
지
원
? TypeScript
Vue 2.1.7 지
원
지
원
17kb
Ember 2.10.0 지
원
지
원
130kb ES6
IE9+
IE9+
IE9+ TypeScript
IE9+

35. Backbone 1.3.3 미
지
원
미
지
원
13.3kb ES4?모두
지원
GITHUB 프로젝트 기간과 상태
프레임웍 커밋 기간 Watch Star Fork
2013-05-26 ~ 2016-12-28
3,979 56,518 10,188
2014-09-14 ~ 2016-12-28
2,206 19,264 4,995
2016-04-10 ~ 2016-12-28
2,215 37,878 4,621
2011-04-24 ~ 2016-12-28
1,091 17,321 3,626
2010-04-26 ~ 2016-12-24
1,638 25,889 5,649
React
Angular
Vue
Ember
Backbone
React가 가장 활발하고, Vue의 Star 수가 Angular 보다 많다.

36. LEARNING CURVE(개인적으로 쉬운 순서)
1. Vue
2. React
3. Angular
4. Backbone
5. Ember