front end dev 2016 & beyond
TRANSCRIPT
November 2016 Jae Sung Park
[Image source] httpswww叀ickrcomphotosaftab6712768933
Front-end Dev2016 amp beyond
어떤 것을 배워야 할까시간 투자 필요
그러나 해당 기술이 뜨지 못하면
많은 기술들 속에서 어떤 것을 선택 할지가 점점 중요
JavaScript지속적인 자바스크립트 인기
StackOver叀ow 2013~2016 가장 인기있는 기술로 응답
[참고] StackOver叀ow 2016 survey
WebAssembly프로그래밍 언어(일단은 CC++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되는 binary 포맷(low-level language)
[Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행네이티브 애플리케이션과 같이 빠른 실행을 목표JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용Compute-intensive 작업 수행에 적합
httpsspeakerdeckcompine613webassembly-ru-men
[Source] WebAssembly Browser Preview
Designed to run native CC++ code in a tiny binary format
[참고] Reached the Browser Preview milestone
Chrome Dev Summit 2016 Advanced JS performance with V8 and Web Assembly
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
어떤 것을 배워야 할까시간 투자 필요
그러나 해당 기술이 뜨지 못하면
많은 기술들 속에서 어떤 것을 선택 할지가 점점 중요
JavaScript지속적인 자바스크립트 인기
StackOver叀ow 2013~2016 가장 인기있는 기술로 응답
[참고] StackOver叀ow 2016 survey
WebAssembly프로그래밍 언어(일단은 CC++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되는 binary 포맷(low-level language)
[Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행네이티브 애플리케이션과 같이 빠른 실행을 목표JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용Compute-intensive 작업 수행에 적합
httpsspeakerdeckcompine613webassembly-ru-men
[Source] WebAssembly Browser Preview
Designed to run native CC++ code in a tiny binary format
[참고] Reached the Browser Preview milestone
Chrome Dev Summit 2016 Advanced JS performance with V8 and Web Assembly
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
그러나 해당 기술이 뜨지 못하면
많은 기술들 속에서 어떤 것을 선택 할지가 점점 중요
JavaScript지속적인 자바스크립트 인기
StackOver叀ow 2013~2016 가장 인기있는 기술로 응답
[참고] StackOver叀ow 2016 survey
WebAssembly프로그래밍 언어(일단은 CC++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되는 binary 포맷(low-level language)
[Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행네이티브 애플리케이션과 같이 빠른 실행을 목표JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용Compute-intensive 작업 수행에 적합
httpsspeakerdeckcompine613webassembly-ru-men
[Source] WebAssembly Browser Preview
Designed to run native CC++ code in a tiny binary format
[참고] Reached the Browser Preview milestone
Chrome Dev Summit 2016 Advanced JS performance with V8 and Web Assembly
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
JavaScript지속적인 자바스크립트 인기
StackOver叀ow 2013~2016 가장 인기있는 기술로 응답
[참고] StackOver叀ow 2016 survey
WebAssembly프로그래밍 언어(일단은 CC++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되는 binary 포맷(low-level language)
[Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행네이티브 애플리케이션과 같이 빠른 실행을 목표JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용Compute-intensive 작업 수행에 적합
httpsspeakerdeckcompine613webassembly-ru-men
[Source] WebAssembly Browser Preview
Designed to run native CC++ code in a tiny binary format
[참고] Reached the Browser Preview milestone
Chrome Dev Summit 2016 Advanced JS performance with V8 and Web Assembly
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
WebAssembly프로그래밍 언어(일단은 CC++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되는 binary 포맷(low-level language)
[Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행네이티브 애플리케이션과 같이 빠른 실행을 목표JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용Compute-intensive 작업 수행에 적합
httpsspeakerdeckcompine613webassembly-ru-men
[Source] WebAssembly Browser Preview
Designed to run native CC++ code in a tiny binary format
[참고] Reached the Browser Preview milestone
Chrome Dev Summit 2016 Advanced JS performance with V8 and Web Assembly
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
[Source] WebAssembly Browser Preview
Designed to run native CC++ code in a tiny binary format
[참고] Reached the Browser Preview milestone
Chrome Dev Summit 2016 Advanced JS performance with V8 and Web Assembly
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
뜨거웠던 2016
[참고] HackerNews와 Reddit에서의 토론 ( )How it feels to learn JavaScript in 2016 한글번역
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
몇가지 키워드 Server-side Rendering Component (Module) Isomorphic JavaScript
Virtual DOM
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Server-side rendering
[참고] Yoursquore Missing the Point of Server-Side Rendered JavaScript Apps
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
ReasonSEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Virtual DOMJavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] httpteropainfoblog20150302change-and-its-detection-in-javascript-frameworkshtml
Reactrsquos di algorithmVirtual DOM and ding algorithmYouTube Reactjs Conf 2015 - Hype
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
ReasonDOM 노드 핸들링은 비용이 많이 든다
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는
1) Dirty checkingAngular1은 VDOM은 없지만 Digest cycle내에서의 변경 watchReact setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable[참고] What is Virtual Dom
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
IsomorphicJavaScript
서버와 클라이언트 영역 모두에서 실행백엔드와 프론트엔드가 같은 코드 공유
httpisomorphicnet
Isomorphic JS 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉Universal JS 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is ldquoIsomorphic JavaScriptrdquo a good term
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
ES6(ECMAScript 2015)
2가지 질문
1) 사용해야 하나
2) 현재 사용 가능한가
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Transpiler다른 언어로 변환해주는 도구
class Test constructor(name) thisname = name say() documentgetElementById(name)innerHTML = thisname
ES6 Babel say
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
ES6 지원율영역 지원율
Modern Browsers 97
Nodejs 657 97
Babel 71
httpkangaxgithubiocompat-tablees6
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Module System모듈구조화에 대한 니즈
Name Type Syntax Executionfrom
ModuleUnit per
Synchronous moduleexport require
return le
(AMD)Asynchronous dene
requirecallback denition
SyncAsync export import
return denition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown CommonJS vs AMD vs ES2015
ES6 gt CommonJS gt RequireJS
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Package Manger
Name Target Cong Install PathNodejs packagejson node_modules
Front-end bowerjson bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Module Counts
httpwwwmodulecountscom
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
npm or Bower다양한 옵션을 제공하는 것도 좋지만 그렇다고 결정적 이유도 존재하지 않음
Tom Dale Ember와 SproutCore 개발 참여
httpstwittercomtomdalestatus667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
페이스북에서 개발한 새로운 패키지 매니저 클라이언트npm 레지스트리와 호환병렬처리를 통해 npm 보다 향상된 처리성능packagejson을 통해 간단하게 전환가능
yarnlock 설정파일 없으면 생성 설정 파일 있으면 package 설치 $ yarn yarn install v0161 info No lockfile found [14] Resolving packages success Saved lockfile Done in 3460s
httpsyarnpkgcom[참고]
Yarn A new package manager for JavaScriptHello Yarn
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Bundlers vs
Build tools
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Bundler다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack gt Browserify[참고] httpsnpmcomparecomcomparebrowserifywebpack
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
webpack 2v2 개발중 (20161116 - )v210-beta27
native ES6 import export and Systemimport(promise-based loader)
for ES6
rarr popularized by
Tree Shaking
rollupjs
[참고]
Tree Shaking In JavaScript
webpack roadmapMigrating to Webpack 2
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Code splitting개통된 모든 안드로이드 기기의 절반이 lt= 1GB RAM
모바일 사이트 평균 로딩시간 19 sec
Automagic code splitting patternsAngular built-in lazy module loadingPolymer CLI per route fragments sharingWeb pack aggressive splitting plugin requireensure()
[참고] Chrome Dev Summit 2016 Planning for Performance PRPL
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Build tool Grunt Gulp
정의된 작업(Task) 들을 수행(Runner) 하는 도구
Gulp gt Grunt[참고] httpsnpmcomparecomcomparegruntgulp
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
httpstateofjscom2016buildtools
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함ex loaders 등을 통한 transpiling
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Frameworks
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
InterestsjQuery Angular React Vuejs Polymer
(2nd week Nov 2016)
jQuery gt Angular gt React gt Polymer gt Vuejs[참고] Google Trends
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
[Source] BuiltWith jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Angular1 = Angular2
AtScript rarr TypeScript (JS 또는 Dart도 사용가능) rarr
Google GWT rarr Dart rarr TypeScript
2 way data binding (not built-in v2) rarr 1 way
Microsoft And Google Collaborate On Angular 2 Framework TypeScript Language
[참고]
Two-way data binding in Angular 2
Introduction to data binding in Angular 2 versus Angular 1AngularJS 도입 선택 가이드
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
for Production아직 너무 잦은 변화
(2016915) (20161123) (20173 예정)
꼭 TypeScript을 사용하지 않아도 되지만
대다수의 문서가 TypeScript 기반
구글 서비스 적용은
200223300
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정[참고]
Angular 2 Is Out Should You Start Using ItYouTube is being rebuilt with Web Components amp Polymer
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
React페이스북에서 개발한 MV 구조에서 View 영역에 대한 구현체데이터의 흐름이나 구조 등을 다루지 않음 rarr Flux 아키텍처 구현체 와 사용
Virtual DOM one-way data 叀ow(one-way binding)페이스북 대표 서비스들(FB Instagram)에서 사용
Redux
하지만예전엔 html에 비즈니스 로직 포함에 대한 비판React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
간단한 React 예제
var HelloWorld = ReactcreateClass( render function() return ( lth1gtHello thispropsnamelth1gt ) ) ReactDOMrender( ltHelloWorld name=World gt documentgetElementById(root)) Compiled JS class HelloWorld extends ReactComponent render() return ReactcreateElement( div null Hello thispropsname )
ES6 Babel
Hello World
Run with JSAuto‐run JS
HTML CSS ES6 Babel Console Output Help JS Bin Save
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
VuejsProgressive framework for building user interfacesView layer에 집중
(Model-View-ViewModel)MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀uenced by Angular)그러나 Angular에 비해 light
MVVM
[참고] GitLab Why We Chose Vuejs
자바스크립트 프레임워크 소개 3 - Vuejs
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
간단한 Vuejs 예제
ltDOCTYPE htmlgtlthtmlgtltheadgt ltmeta charset=utf-8gt ltmeta name=viewport content=width=device-width lttitlegtJS Binlttitlegt ltscript src=httpscdnjscloudflarecomajaxlibsvue203vuejsltheadgtltbodygt lth1gtLoopslth1gt ltdiv id=app-1gt ltolgt ltli v-for=todo in todosgt todotext ltligt ltolgt ltdivgt lthrgt lth1gtTwo-way bindinglth1gt ltdiv id=app-2gt ltpgt message ltpgt ltinput v-model=messagegt
new Vue( el app-1 data todos [ text Hello text World ] ) new Vue( el app-2 data message Hello Vue )
HTML JavaScript
Loops1 Hello2 World
Two-way bindingHello Vue
Hello Vue
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output Help JS Bin Save
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Polymer표준 Web Component 기반한 프레임워크
Custom element HTML import Template Shadow DOM rarr 웹 컴포넌트 미지원 브라우저에 Polyll 제공도 목적
(20161117) rarr support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 rarr Safari - HTML imports 제외한 나머지 구현 ( )
Web Components amp Polymer
20-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
간단한 Web Components 예제ltshyshy Import polyfill shyshygt ltscript src=webcomponentsjswebcomponentsshyliteminjsgtltscript
ltshyshy Import custom elements shyshygt ltlink rel=import href=helloshyworldhtmlgt
ltshyshy Run custom elements shyshygt lthelloshyworld who=Unicorngtlthelloshyworldgt
httpwebcomponentsorghello-world-polymerbower_componentshello-world-polymer
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
JS web frameworks benchmark
Name Duration (ms)Angular v200-rc5 185
React v1531 182
Vue v200-beta1 137
VanillaJS 100
VanillaJS gt Vue gt React gt Angular2httpstefankrausenetjs-frameworks-benchmark4webdriver-tstablehtml
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
최신은 항상 좋은가Angular case
v1 성능 이슈 어려움
v2
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
프레임워크의 등장 요인UI 컴포넌트 기반 개발 니즈
React Angular Vue 모두 관련 기능 제공표준에 일부 기반하기도 하지만
[참고] Using Web Components in React
View encapsulation in Angular 2
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
I talk to a lot of JavaScript devs and I nd it really interesting
that the ones who spend the most time in Angular tend to
not know JavaScript nearly as well
- Why We Chose Vuejs
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Being aware of
biases매몰 비용 오류특정 기술도구 투자 비용이 증가시 자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
새로운 영역
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
V8 기반의 서버 런타임 ( )한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률iojs fork 후 merge
LTS(Long-Term Support plan for Nodejs releases)
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
JavaScript Native
( )Cordova PhoneGapNativeScriptReact NativeFusetabrisjsIonic
은 점점 잊혀져가는Titanium
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
하지만매력적이나 프레임워크별 다른 API어쨌든 Native App 개발과는 다르다등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Desktop Application
(GitHub)20154 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NWjs
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
다양한 시도들의 배경단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구서비스앱 개발시 일반적으로 Web iOS Android 버전필요 rarr 동일 기능을 3가지 환경에 맞추어 개발
결국 플랫폼별 대응 개발 비용의 문제
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
Browsers점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포 추가될 새로운 웹 기술을 미리 사용Chrome Android에서도 제공 시작
마다 정식 릴리즈 - Evegreen 이라고 하지만 윈도우 업데이트를 통해
FireFox 최근 (Servo 기반) 엔진 변경 발표 - 20158월 부터 별도 배포
Safari Technology Preview
canarybeta 채널매 2개월
EdgeQuantum
Samsung Internet
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
What Comes Next for the Web
Progressive Web Applications (PWAs) - oine cache
[참고]
ServiceWorker현실적 PWA
Web ComponentsGeneric Sensor APICredential Management APIWeb Payments APIWebVRAutomotive WG
[참고] Chrome Dev Summit 2016 What Comes Next for the Web
W3C Automotive 표준 개발 현황
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
의 새로운 이름 생태계의 파편화를 막기위한 노력()
httpsjsfoundation
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
2017현재와 같은 빠른 변화의 기조가 유지될 것복잡도의 증가생태계의 너무 빠른 변화그러나 올바른 방향으로 발전중
[참고] State of JavaScript 2016 Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
성공 가능성 요인들표준 영역 내 포함 여부가 중요기술이 좋다고 성공하진 않는다확실한 사용 레퍼런스 필요 (React 경우처럼)활발한 자발적인 커뮤니티 필요풍부한 문서와 예제다양한 3rd 파티 플러그인 상용 or 오픈
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
JavaScript Fatigue
우리의 자세는
- Louis CK
Everything is amazing and nobody is happy
Expert로써 모든 플랫폼의 모든 것을 알아야 한다는 생각모든 것을 배우는 것이 해결책인가단순하게 현재 작업에 필요한 것 또는 끌리는 것에 집중
[참고] Why Irsquom Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413
GraciasGracias[Image source] httpswww叀ickrcomphotosen416162413