최근 javascript framework 조사
TRANSCRIPT
JAVASCRIPTFRAMEWORKS
REACT, ANGULAR 2, VUE, EMBER, BACKBONESimplex Internet / TechLab / / Kichul Jeong @jkcjkc82
2016. 12. 29
" "라는 설문 프론트엔드 프레임웍 부문에서 흥미와 만족도가 높은 다섯 개를 선정
2016 The State Of Javascript
ReactAngular 2EmberVueBackbone
Angular 1은 제외
조사 시작일 : 2016년 12월 26일
React
Facebook에서 개발
View 레이어만 담당하는 라이브러리필요한 라이브러리(Ajax, Cookie, String, Router ...)는 직접 추가
선언적 뷰
뷰의 상태를 설계하는 것으로 UI 개발 어려움 감소
컴포넌트 기반
컴포넌트를 조합해서 복잡한 UI를 쉽게 만들수 있다.
한 번 배워서 서버와 네이티브 앱에도 쓸 수 있음
가상 DOMDOM을 직접 다루지 않고, 메모리에 DOM 사본을 두고 변경된 부분만 필요할 때 업데이트
함께 사용하는 기술 : 템플릿으로 사용 : 클래스, Arrow Function, 템플릿 문자열 등의 ES6의
편리한 기능 사용 : 애플리케이션에서 단 방향으로 데이터 전달하는
것을 담당하는 라이브러리. : JSX, ES6 문법으로 된 파일을 브라우저에서 지원
하는 형태로 변환하는 컴파일러 : Babel 로더를 사용해서 .js 파일로 쓰거나 개발
용 HTTP가 실행되어 .js 파일을 제공
JSXES6
Redux
Babel
Webpack
Angular 2
Google에서 개발모바일과 데스크탑을 위한 프레임웍
CROSS PLATFORMProgressive Web App : 네이티브 앱과 유사한 경험 제공Angular 방식으로 네이티브 모바일 앱 개발 가능
Angular 방식으로 데스크탑 앱 개발 가능
Ionic FrameworkNativeScriptReact Native
Electron
속도와 성능템플릿을 최적화된 코드로 변환서버 사이드 렌더링(SSR) 지원. SEO 최적화코드 자동 분리 기능으로 필요한 코드만 로드(Component Router)
생산성간단하고 강력한 템플릿 문법CLI Tool인기있는 에디터와 IDE 기능 추가 가능코드 자동 완성즉각 에러 표시다른 피드백 표시특히 Visual Studio Code와 잘 어울림
기타 특징유닛테스트 : Karma시나리오 테스트 : Protractor애니메이션 API접근성 : ARIA 지원 구성요소, 문서, a11y 테스트 인프라
권장TypeScript3party module(예 : qs) 추가 할 때, 일종의 TypeScript 헤더 파일을 추가해야한다.
가상 DOM 지원Change Detector Tree, Immutable, Observable을 이용해서
하는 부분이 적용DOM의 변화를 감지하고 처리
WEB COMPONENT 를 지원Shadow DOM처럼 뷰 단위로 CSS를 지정 가능
ANGULAR QUICKSTART 프로젝트빠르게 TypeScript 개발환경과 테스트 환경을 실행해볼 수
있음.git clone https://github.com/angular/quickstart.git quickstart
런타임 환경에서 필요한 패키지 :
: 모듈 로더.
observable sequence를 사용해서 비동기 및 이벤트 기반 프로그램을 작성하는 라이브러리
: ES5~7 Polyfill : 데코레이터 사용할 때 필요
: 비동기 태스크간 유지하는 실행 컨텍스트
System.jsRxJs
core-js/shimreflect-metadataZone.js
필요한 패키지가 너무 많다.
Vue
HTML, CSS, 자바스크립트만 알면 바로 개발할 정도로 쉬움어떤 규모의 앱이라도 개발 가능17kb 경량, 고성능(React 보다 빠름)뷰 레이어에만 집중한 Vue Core2.0부터 Virtual DOM 지원(Snabbdom 사용)서버사이드 렌더링 지원TypeScript 지원
VUEX전역 상태 관리React에서 Redux와 같은 역할추가로 패키지 설치 필요
VUE-CLIVue 프로젝트를 쉽게 생성Webpack, Browserify와 같은 Bundler 선택 가능HMR 기능
평가Angular와 React의 장점 모두 포함.별다른 시행 착오 없이 예제를 만들 수 있었음.redux보다 vuex가 더 편함
Ember
웹 애플리케이션을 만드는 프레임웍애플 사이트, 아이튠즈, NASA, Sony 등에서 사용함
생산적이고 쉬움? 처음에는 약간 어려움자동 업데이트하는 Handlebar 템플릿컴포넌트 단위 개발서버에서 데이터 읽기 쉽고, 간단함라우팅 기능가상 DOM(Glimmer 엔진)서버 사이드 렌더링 지원
EMBER-CLICLI는 최고!!!Angular-CLI도 Ember-CLI기반프로젝트 생성라우터, 컴포넌트, 서비스 등 추가production 빌드까지
단점, 어려움HTML 파일을 수정하면 server를 다시 시작해야한다.jQuery에 의존성이해해야 할 내용이 많아서 문서 정독 필요
Backbone
웹 애플리케이션 구조를 제공하는 프레임웍Models : key/value 바인딩Collections : Model의 집합. 열거형 함수 제공Views : 이벤트 정의와 핸들러 정의. Model, Collection과연결RESTful JSON 인터페이스 제공
요구 라이브러리Underscore 1.8.3 이상jQuery(1.11.0)json2.js(Older IE 지원)
또는 Loadash와 Zepto로 대체 가능
유연성은 높지만, 일관성 없는 코드가 만들어지기 쉽다.
Restful API를 지원하지만 백엔드 API가 Backbone에 맞게조정을 하거나 Backbone.sync를 오버라이드 해야한다.
비교
특징프레임웍 버전 브라우저
지원가상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
Backbone 1.3.3 미 미 13.3kb ES4?
IE9+
IE9+
IE9+ TypeScript
IE9+
모두
Backbone 1.3.3 미지원
미지원
13.3kb ES4?모두지원
GITHUB 프로젝트 기간과 상태프레임웍 커밋 기간 Watch Star Fork
2013-05-26 ~ 2016-12-28 3,979 56,518 10,1882014-09-14 ~ 2016-12-28 2,206 19,264 4,9952016-04-10 ~ 2016-12-28 2,215 37,878 4,6212011-04-24 ~ 2016-12-28 1,091 17,321 3,6262010-04-26 ~ 2016-12-24 1,638 25,889 5,649
React
Angular
Vue
Ember
Backbone
React가 가장 활발하고, Vue의 Star 수가 Angular 보다 많다.
LEARNING CURVE(개인적으로 쉬운 순서)1. Vue2. React3. Angular4. Backbone5. Ember