Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JAVASCRIPT
FRAMEWORKS
REACT, ANGULAR 2, VUE, EMBER, BACKBONE
Simplex Internet / TechLab / /Kichul Jeong @jkcjkc82
2016. 12...
" "라는 설문 프론트엔드 프레
임웍 부문에서 흥미와 만족도가 높은 다섯 개를 선정
2016 The State Of Javascript
React
Angular 2
Ember
Vue
Backbone
Angular 1은 ...
DROPBOX API
예제
React
Facebook에서 개발
View 레이어만 담당하는 라이브러리
필요한 라이브러리(Ajax, Cookie, String, Router ...)는 직접 추가
선언적 뷰
뷰의 상태를 설계하는 것으로 UI 개발 어려움 감소
컴포넌트 기반
컴포넌트를 조합해서 복잡한 UI를 쉽게 만들수 있다.
한 번 배워서 서버와 네이티브 앱에도 쓸 수 있음
가상 DOM
DOM을 직접 다루지 않고, 메모리에 DOM 사본을 두고 변경된 부분만 필요할 때 업데이트
함께 사용하는 기술
: 템플릿으로 사용
: 클래스, Arrow Function, 템플릿 문자열 등의 ES6의
편리한 기능 사용
: 애플리케이션에서 단 방향으로 데이터 전달하는
것을 담당하는 라이브러리.
: JSX, ES...
Angular 2
Google에서 개발
모바일과 데스크탑을 위한
프레임웍
CROSS PLATFORM
Progressive Web App : 네이티브 앱과 유사한 경험 제공
Angular 방식으로 네이티브 모바일 앱 개발 가능
Angular 방식으로 데스크탑 앱 개발 가능
Ionic Frame...
속도와 성능
템플릿을 최적화된 코드로 변환
서버 사이드 렌더링(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처럼 뷰 단위...
ANGULAR QUICKSTART 프로젝트
빠르게 TypeScript 개발환경과 테스트 환경을 실행해볼 수
있음.
git clone https://github.com/angular/quickstart.git quicks...
런타임 환경에서 필요한 패키지 :
: 모듈 로더.
observable sequence를 사용해서 비동기 및 이벤트 기
반 프로그램을 작성하는 라이브러리
: ES5~7 Polyfill
: 데코레이터 사용할 때 필요
: 비...
Vue
HTML, CSS, 자바스크립트만 알면 바로 개발할 정도로 쉬
움
어떤 규모의 앱이라도 개발 가능
17kb 경량, 고성능(React 보다 빠름)
뷰 레이어에만 집중한 Vue Core
2.0부터 Virtual DOM 지원...
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...
요구 라이브러리
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 지
원
...
Backbone 1.3.3 미
지
원
미
지
원
13.3kb ES4?모두
지원
GITHUB 프로젝트 기간과 상태
프레임웍 커밋 기간 Watch Star Fork
2013-05-26 ~ 2016-12-28
3,979 56...
LEARNING CURVE(개인적으로 쉬운 순서)
1. Vue
2. React
3. Angular
4. Backbone
5. Ember
Upcoming SlideShare
Loading in …5
×

0

Share

Download to read offline

최근 Javascript framework 조사

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

최근 Javascript framework 조사

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

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

Views

Total views

679

On Slideshare

0

From embeds

0

Number of embeds

54

Actions

Downloads

16

Shares

0

Comments

0

Likes

0

×