ݺߣ

ݺߣShare a Scribd company logo

최근 Javascript framework 조사

•
•
Kichul Jung
Kichul Jung

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

1 of 36
Downloaded 16 times
JAVASCRIPT FRAMEWORKS REACT, ANGULAR 2, VUE, EMBER, BACKBONE Simplex Internet / TechLab / /Kichul Jeong @jkcjkc82 2016. 12. 29
" "라는 설문 프론트엔드 프레 임웍 부문에서 흥미와 만족도가 높은 다섯 개를 선정 2016 The State Of Javascript React Angular 2 Ember Vue Backbone Angular 1은 제외 조사 시작일 : 2016년 12월 26일
DROPBOX API 예제
React
Facebook에서 개발 View 레이어만 담당하는 라이브러리 필요한 라이브러리(Ajax, Cookie, String, Router ...)는 직접 추가
선언적 뷰 뷰의 상태를 설계하는 것으로 UI 개발 어려움 감소 컴포넌트 기반 컴포넌트를 조합해서 복잡한 UI를 쉽게 만들수 있다. 한 번 배워서 서버와 네이티브 앱에도 쓸 수 있음
가상 DOM DOM을 직접 다루지 않고, 메모리에 DOM 사본을 두고 변경된 부분만 필요할 때 업데이트
함께 사용하는 기술 : 템플릿으로 사용 : 클래스, Arrow Function, 템플릿 문자열 등의 ES6의 편리한 기능 사용 : 애플리케이션에서 단 방향으로 데이터 전달하는 것을 담당하는 라이브러리. : JSX, ES6 문법으로 된 파일을 브라우저에서 지원 하는 형태로 변환하는 컴파일러 : Babel 로더를 사용해서 .js 파일로 쓰거나 개발 용 HTTP가 실행되어 .js 파일을 제공 JSX ES6 Redux Babel Webpack
Angular 2
Google에서 개발 모바일과 데스크탑을 위한 프레임웍
CROSS PLATFORM Progressive Web App : 네이티브 앱과 유사한 경험 제공 Angular 방식으로 네이티브 모바일 앱 개발 가능 Angular 방식으로 데스크탑 앱 개발 가능 Ionic Framework NativeScript React Native Electron
속도와 성능 템플릿을 최적화된 코드로 변환 서버 사이드 렌더링(SSR) 지원. SEO 최적화 코드 자동 분리 기능으로 필요한 코드만 로드 (Component Router)
생산성 간단하고 강력한 템플릿 문법 CLI Tool 인기있는 에디터와 IDE 기능 추가 가능 코드 자동 완성 즉각 에러 표시 다른 피드백 표시 특히 Visual Studio Code와 잘 어울림
기타 특징 유닛테스트 : Karma 시나리오 테스트 : Protractor 애니메이션 API 접근성 : ARIA 지원 구성요소, 문서, a11y 테스트 인프라
권장TypeScript 3party 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.js RxJs core-js/shim reflect-metadata Zone.js 필요한패키지가너무많다.
Vue
HTML, CSS, 자바스크립트만 알면 바로 개발할 정도로 쉬 움 어떤 규모의 앱이라도 개발 가능 17kb 경량, 고성능(React 보다 빠름) 뷰 레이어에만 집중한 Vue Core 2.0부터 Virtual DOM 지원(Snabbdom 사용) 서버사이드 렌더링 지원 TypeScript 지원
VUEX 전역 상태 관리 React에서 Redux와 같은 역할 추가로 패키지 설치 필요
VUE-CLI Vue 프로젝트를 쉽게 생성 Webpack, Browserify와 같은 Bundler 선택 가능 HMR 기능
평가 Angular와 React의 장점 모두 포함. 별다른 시행 착오 없이 예제를 만들 수 있었음. redux보다 vuex가 더 편함
Ember
웹 애플리케이션을 만드는 프레임웍 애플 사이트, 아이튠즈, NASA, Sony 등에서 사용함
생산적이고 쉬움? 처음에는 약간 어려움 자동 업데이트하는 Handlebar 템플릿 컴포넌트 단위 개발 서버에서 데이터 읽기 쉽고, 간단함 라우팅 기능 가상 DOM(Glimmer 엔진) 서버 사이드 렌더링 지원
EMBER-CLI CLI는 최고!!! 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 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,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 보다 많다.
LEARNING CURVE(개인적으로 쉬운 순서) 1. Vue 2. React 3. Angular 4. Backbone 5. Ember

More Related Content

최근 Javascript framework 조사

  • 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일
  • 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
  • 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에 의존성 이해해야 할 내용이 많아서 문서 정독 필요
  • 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를 오버라이드 해야한다.
  • 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