SlideShare a Scribd company logo
November, 2016
Jae Sung, Park
[Image source] https://www.叀�ickr.com/photos/aftab/6712768933/
Front-end Dev
2016 & beyond
어떤 것을 배워야 할까?
시간 투자 필요
그러나 해당 기술이
'뜨지' 못하면?
많은 기술들 속에서
어떤 것을 '선택' 할지가 점점 중요
JavaScript
지속적인 자바스크립트 인기
StackOver叀�ow 2013~2016 가장 인기있는 기술로 응답
[참고] StackOver叀�ow 2016 survey
WebAssembly
프로그래밍 언어(일단은 C/C++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되
는 binary 포맷(low-level language)
[Source]
브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행
네이티브 애플리케이션과 같이 빠른 실행을 목표
JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용
Compute-intensive 작업 수행에 적합
https://speakerdeck.com/pine613/webassembly-ru-men
[Source] WebAssembly Browser Preview
Designed to run native C/C++ 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
[참고] You’re Missing the Point of Server-Side Rendered JavaScript Apps
Reason?
SEO 문제
Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제
초기 로딩속도
정적 자원 로딩 후, 컨텐츠 구성위한 추가 Ajax API 호출 시간소요
JavaScript 사용이 제한된 환경
클라이언트 렌더링은 무용지물
하지만, 클라이언트 영역에서 처리가 빠르다고
했었다가 지금은 서버 렌더링 말한다.
Virtual DOM
JavaScript로 표현된 DOM 구조 (VTree)
Model
Virtual DOM
Diff Patch
DOM
[Source] http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html
React’s di algorithm
Virtual DOM and di�ng algorithm
YouTube: React.js Conf 2015 - Hype!
Reason?
DOM 노드 핸들링은 비용이 많이 든다.
Di 알고리즘을 통해 효율적 변경
변경에 대한 업데이트는?
1) Dirty checking
Angular1은 VDOM은 없지만, Digest cycle내에서의 변경 watch
React: setState 호출시 dirty로 마킹
이후 이벤트 loop 마지막에 마킹요소 재렌더링
2) (Angular2)Observable
[참고] What is Virtual Dom
Isomorphic
JavaScript
서버와 클라이언트 영역 모두에서 실행
백엔드와 프론트엔드가 같은 코드 공유
http://isomorphic.net/
Isomorphic JS: 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉
Universal JS: 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트
Is “Isomorphic JavaScript” a good term?
ES6
(ECMAScript 2015)
2가지 질문
1) 사용해야 하나?
2) 현재 사용 가능한가?
Transpiler
다른 언어로 변환해주는 도구
class Test {
constructor(name) {
this.name = name;
}
say() {
document.getElementById("name").innerHTML = this.name
}
}
ES6 / Babel ▾ say
Run with JSAuto‐run JS
HTML CSS ES6 / Babel Console Output HelpJS Bin Save
ES6 지원율
영역 지원율
Modern Browsers 97%
Node.js 6.5/7 97%
Babel 71%
http://kangax.github.io/compat-table/es6/
Module System
모듈/구조화에 대한 니즈
Name Type Syntax Execution
from
Module
Unit per
Synchronous module.export
require
return ⠘le
(AMD)
Asynchronous de⠘ne
require
callback de⠘nition
Sync/Async export
import
return de⠘nition
CommonJS
RequireJS
ES6 Module
[참고] JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015
ES6 > CommonJS > RequireJS
Package Manger
Name Target Con๴g Install Path
Node.js package.json node_modules
Front-end bower.json bower_components
npm
Bower
[참고] Front-End Package Manager Comparison
Module Counts
http://www.modulecounts.com/
npm or Bower?
다양한 옵션을 제공하는 것도 좋지만, 그렇다고 결정적 이유도 존재하지 않음
Tom Dale: Ember와 SproutCore 개발 참여
https://twitter.com/tomdale/status/667389972794724352
페이스북에서 개발한 새로운 패키지 매니저 클라이언트
npm 레지스트리와 호환
병렬처리를 통해 npm 보다 향상된 처리성능
package.json을 통해 간단하게 전환가능
## yarn.lock 설정파일 없으면 생성 
## 설정 파일 있으면 package 설치 
$ yarn 
yarn install v0.16.1 
info No lockfile found. 
[1/4] Resolving packages... 
... 
success Saved lockfile. 
Done in 34.60s. 
https://yarnpkg.com/
[참고]
Yarn: A new package manager for JavaScript
Hello, Yarn!
npm vs Yarn
[참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
Bundlers
vs.
Build tools
Bundler
다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구
webpack Browserify
webpack > Browserify
[참고] https://npmcompare.com/compare/browserify,webpack
webpack 2
v2 개발중 (2016/11/16 - )v2.1.0-beta.27
native ES6 import, export
and System.import(promise-based loader)
for ES6
→ popularized by
Tree Shaking
rollup.js
[참고]
Tree Shaking In JavaScript
webpack roadmap
Migrating to Webpack 2
Code splitting
개통된 모든 안드로이드 기기의 절반이 <= 1GB RAM
모바일 사이트 평균 로딩시간: 19 sec
Automagic code splitting patterns:
Angular built-in lazy module loading
Polymer CLI per route fragments / sharing
Web pack aggressive splitting plugin. require.ensure()
[참고] Chrome Dev Summit 2016: Planning for Performance: PRPL
Build tool
Grunt Gulp
정의된 작업(Task) 들을
수행(Runner) 하는 도구
Gulp > Grunt
[참고] https://npmcompare.com/compare/grunt,gulp
http://stateofjs.com/2016/buildtools/
Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함
ex. loaders 등을 통한 transpiling
Frameworks
Interests
jQuery / Angular / React / Vue.js / Polymer
(2nd week, Nov. 2016)
jQuery > Angular > React > Polymer > Vue.js
[참고] Google Trends
[Source] BuiltWith: jQuery Usage Statistics
프레임워크 등장 이전까진 de-facto standard 위치
브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분
웹앱이 아닌 웹사이트에선 아직도 적합
[참고] Is jQuery Still Relevant?
Angular1 != Angular2
AtScript → TypeScript (JS 또는 Dart도 사용가능)
→
Google: GWT → Dart → TypeScript?
2 way data binding (not built-in v2) → 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 1
AngularJS 도입 선택 가이드
for Production?
아직 너무 잦은 변화
(2016/9/15)
(2016/11/23)
(2017/3 예정)
꼭 TypeScript을 사용하지 않아도 되지만...
대다수의 문서가 TypeScript 기반
구글 서비스 적용은?
2.0.0
2.2.3
3.0.0
YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정
[참고]
Angular 2 Is Out: Should You Start Using It?
YouTube is being rebuilt with Web Components & Polymer
React
페이스북에서 개발한 MV* 구조에서 View 영역에 대한 구현체
데이터의 흐름이나 구조 등을 다루지 않음
→ Flux 아키텍처 구현체 와 사용
Virtual DOM, one-way data 叀�ow(one-way binding)
페이스북 대표 서비스들(FB, Instagram)에서 사용
Redux
하지만,
예전엔 html에 비즈니스 로직 포함에 대한 비판
React 로직(자바스크립트)안에 html이 포함
(JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
간단한 React 예제
var HelloWorld = React.createClass({
render: function() {
return (
<h1>Hello {this.props.name}!</h1>
);
},
});
ReactDOM.render(
<HelloWorld name="World" />,
document.getElementById('root')
);
/* Compiled JS:
class HelloWorld extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hello ",
this.props.name
);
}
ES6 / Babel ▾
Hello World!
Run with JSAuto‐run JS
HTML CSS ES6 / Babel Console Output HelpJS Bin Save
Vue.js
Progressive framework for building user interfaces
View layer에 집중
(Model-View-ViewModel)
MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리
AngularJS와 유사성 (heavily in叀�uenced by Angular)
그러나, Angular에 비해 light
MVVM
[참고]
GitLab: Why We Chose Vue.js
자바스크립트 프레임워크 소개 3 - Vue.js
간단한 Vue.js 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"
</head>
<body>
<h1>Loops</h1>
<div id="app-1">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<hr>
<h1>Two-way binding</h1>
<div id="app-2">
<p>{{ message }}</p>
<input v-model="message">
new Vue({
el: '#app-1',
data: {
todos: [
{ text: 'Hello' },
{ text: 'World!' }
]
}
})
new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!'
}
})
HTML ▾ JavaScript ▾
Loops
1. Hello
2. World!
Two-way binding
Hello Vue!
Hello Vue!
Run with JSAuto‐run JS
HTML CSS JavaScript Console Output HelpJS Bin Save
Polymer
표준 Web Component 기반한 프레임워크
Custom element, HTML import, Template, Shadow DOM
→
웹 컴포넌트 미지원 브라우저에 Poly⠘ll 제공도 목적
(2016/11/17)
→ support the new custom elements v1 and shadow DOM v1
그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌
→ Safari - HTML imports 제외한 나머지 구현 ( , , )
Web Components & Polymer
2.0-preview
Custom elements Shadow DOM Template
간단한 Web Components 예제
<!­­ Import polyfill ­­> 
<script src="../webcomponentsjs/webcomponents­lite.min.js"></script
<!­­ Import custom elements ­­> 
<link rel="import" href="hello­world.html"> 
<!­­ Run custom elements ­­> 
<hello­world who="Unicorn"></hello­world> 
http://webcomponents.org/hello-world-polymer/bower_components/hello-world-polymer/
JS web frameworks benchmark
Name Duration (ms)
Angular v2.0.0-rc5 1.85
React v15.3.1 1.82
Vue v2.0.0-beta1 1.37
VanillaJS 1.00
VanillaJS > Vue > React > Angular2
http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
'최신'은 항상 좋은가?
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 Vue.js
Being aware of
biases
매몰 비용 오류
특정 기술/도구 투자 비용이 증가시,
자신의 선택 합리화를 위해 노력
합리적인 시각을 갖기 어렵게 만들 수 있다.
새로운 영역
V8 기반의 서버 런타임 ( )
한때 느린 개발 속도에 대한 반발 ( )
연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획
굳이 언급할 필요 없을 만큼의 사용률
io.js fork 후 merge
LTS(Long-Term Support plan for Node.js releases)
JavaScript Native
( )Cordova PhoneGap
NativeScript
React Native
Fuse
tabris.js
Ionic
은 점점 잊혀져가는...Titanium
하지만,
매력적이나, 프레임워크별 다른 API
어쨌든 Native App 개발과는 다르다.
등장한지 얼마되지 않아 문서와 예제 부족
Desktop Application
(GitHub)
2015/4 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발
(Node-Webkit) (Intel)
2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경
Electron
NW.js
다양한 시도들의 배경
단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구
서비스/앱 개발시 일반적으로 Web, iOS, Android 버전필요
→ 동일 기능을 3가지 환경에 맞추어 개발
결국, 플랫폼별 대응 개발 비용의 문제
Browsers
점점 더 빨라진 업데이트 주기
브라우저 벤더들의 표준 implementation은 확산 포인트
매 2주마다 배포, 추가될 새로운 웹 기술을 미리 사용
Chrome: Android에서도 제공 시작
마다 정식 릴리즈
? - Evegreen 이라고 하지만, 윈도우 업데이트를 통해
FireFox: 최근 (Servo 기반) 엔진 변경 발표
? - 2015/8월 부터 별도 배포
Safari Technology Preview
canary/beta 채널
매 2개월
Edge
Quantum
Samsung Internet
What Comes Next
for the Web?
Progressive Web Applications (PWAs)
- o ine cache
[참고]
ServiceWorker
현실적 PWA
Web Components
Generic Sensor API
Credential Management API
Web Payments API
WebVR
Automotive WG
[참고]
Chrome Dev Summit 2016: What Comes Next for the Web?
W3C Automotive 표준 개발 현황
의 새로운 이름
생태계의 파편화를 막기위한 노력(?)
https://js.foundation/
jQuery Foundation
[참고] 자바스크립트 생태계 통합될까
2017?
현재와 같은 빠른 변화의 기조가 유지될 것
복잡도의 증가
생태계의 너무 빠른 변화
그러나 올바른 방향으로 발전중
[참고]
State of JavaScript 2016: Opinions
2016년과 이후 JavaScript의 동향
성공 가능성 요인들
표준 영역 내 포함 여부가 중요
기술이 좋다고 성공하진 않는다.
확실한 사용 레퍼런스 필요 (React 경우처럼)
활발한 자발적인 커뮤니티 필요
풍부한 문서와 예제
다양한 3rd 파티 플러그인: 상용 or 오픈
JavaScript Fatigue
우리의 자세는?
- Louis C.K
Everything is amazing and nobody is happy
"Expert"로써 모든 플랫폼의 모든 것을 알아야 한다는 생각
모든 것을 배우는 것이 해결책인가?
단순하게 현재 작업에 필요한 것, 또는 끌리는 것에 집중
[참고]
Why I’m Thankful for JS Fatigue
A Study Plan To Cure JavaScript Fatigue
GraciasGracias[Image source] https://www.叀�ickr.com/photos/⠘en/416162413/

More Related Content

What's hot

Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
장현 한
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
WebFrameworks
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
Changwan Jun
 
Angular 기본 개념 잡기
Angular 기본 개념 잡기Angular 기본 개념 잡기
Angular 기본 개념 잡기
장현 한
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
Taegon Kim
 
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
Kenneth Ceyer
 
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발
Jay Park
 
Angular2 톺아보기
Angular2 톺아보기 Angular2 톺아보기
Angular2 톺아보기
철민 배
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XpressEngine
 
Deview2013 track1 session7
Deview2013 track1 session7Deview2013 track1 session7
Deview2013 track1 session7
joshua wordsworth
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
JinKwon Lee
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
Jae Sung Park
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
Kim Hunmin
 
Angular2 NgModule
Angular2   NgModuleAngular2   NgModule
Angular2 NgModule
Peter YoungSik Yun
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
NAVER D2
 
역시 Redux
역시 Redux역시 Redux
역시 Redux
Leonardo YongUk Kim
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
Sangmin Yoon
 
Modern PHP
Modern PHPModern PHP
Modern PHP
Changwan Jun
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
NAVER D2
 

What's hot (20)

Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.Angular는 사실 어렵지 않습니다.
Angular는 사실 어렵지 않습니다.
 
웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁웹-프론트엔드 프레임워크를 고르기 위한 팁
웹-프론트엔드 프레임워크를 고르기 위한 팁
 
Vue SSR vs Prerender
Vue SSR vs PrerenderVue SSR vs Prerender
Vue SSR vs Prerender
 
Angular 기본 개념 잡기
Angular 기본 개념 잡기Angular 기본 개념 잡기
Angular 기본 개념 잡기
 
React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작React Native를 사용한
 초간단 커뮤니티 앱 제작
React Native를 사용한
 초간단 커뮤니티 앱 제작
 
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기 GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
GDG DevFest 2017 Seoul 프론트엔드 모던 프레임워크 낱낱히 파헤치기
 
Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발Mean 스택을 사용한 IoT 개발
Mean 스택을 사용한 IoT 개발
 
Angular2 톺아보기
Angular2 톺아보기 Angular2 톺아보기
Angular2 톺아보기
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
 
Deview2013 track1 session7
Deview2013 track1 session7Deview2013 track1 session7
Deview2013 track1 session7
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
웹 Front-End 실무 이야기
웹 Front-End 실무 이야기웹 Front-End 실무 이야기
웹 Front-End 실무 이야기
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer혁신적인 웹컴포넌트 라이브러리 - Polymer
혁신적인 웹컴포넌트 라이브러리 - Polymer
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
Angular2 NgModule
Angular2   NgModuleAngular2   NgModule
Angular2 NgModule
 
Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드Angularjs 도입 선택 가이드
Angularjs 도입 선택 가이드
 
역시 Redux
역시 Redux역시 Redux
역시 Redux
 
Single-page Application
Single-page ApplicationSingle-page Application
Single-page Application
 
Modern PHP
Modern PHPModern PHP
Modern PHP
 
[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
 

Similar to Front end dev 2016 & beyond

Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
dpTablo
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Daum DNA
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER Engineering
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
Dong-Jin Park
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
Kichul Jung
 
Backend Master | 3.1.1 Build - JS build tools
Backend Master | 3.1.1 Build - JS build toolsBackend Master | 3.1.1 Build - JS build tools
Backend Master | 3.1.1 Build - JS build tools
Kyunghun Jeon
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조
 
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
Kichul Jung
 
hexa core
hexa corehexa core
hexa core
Seungbae Ji
 
올챙이로 살펴보는 개발툴과 Cloud
올챙이로 살펴보는 개발툴과 Cloud올챙이로 살펴보는 개발툴과 Cloud
올챙이로 살펴보는 개발툴과 Cloud
cho hyun jong
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
Junsu Kim
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
NAVER Engineering
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
 
올챙이 현재와 미래
올챙이 현재와 미래올챙이 현재와 미래
올챙이 현재와 미래
cho hyun jong
 
2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드
Tai Hoon KIM
 
빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x
Terry Cho
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles
Wonkyung Lyu
 
DevOps - CI/CD 알아보기
DevOps - CI/CD 알아보기DevOps - CI/CD 알아보기
DevOps - CI/CD 알아보기
SeungYong Baek
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
효근 박
 

Similar to Front end dev 2016 & beyond (20)

Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
 
Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012Javascript everywhere - Node.js | Devon 2012
Javascript everywhere - Node.js | Devon 2012
 
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
NAVER TECH CONCERT_FE2019_빠르게 훑어보는 웹 개발 트렌드
 
Unionweb프로젝트
Unionweb프로젝트Unionweb프로젝트
Unionweb프로젝트
 
최근 Javascript framework 조사
최근 Javascript framework 조사최근 Javascript framework 조사
최근 Javascript framework 조사
 
Backend Master | 3.1.1 Build - JS build tools
Backend Master | 3.1.1 Build - JS build toolsBackend Master | 3.1.1 Build - JS build tools
Backend Master | 3.1.1 Build - JS build tools
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철Bootstrap에 대해서 정기철
Bootstrap에 대해서 정기철
 
hexa core
hexa corehexa core
hexa core
 
올챙이로 살펴보는 개발툴과 Cloud
올챙이로 살펴보는 개발툴과 Cloud올챙이로 살펴보는 개발툴과 Cloud
올챙이로 살펴보는 개발툴과 Cloud
 
Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)Web Framework (웹 프레임워크)
Web Framework (웹 프레임워크)
 
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
W3C HTML5 Conference 2015 - NAVER 웹 기술 및 환경 전망
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
 
올챙이 현재와 미래
올챙이 현재와 미래올챙이 현재와 미래
올챙이 현재와 미래
 
2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드2017. 프론트엔드 트랜드
2017. 프론트엔드 트랜드
 
빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x빠르게훓어보는 Node.js와 Vert.x
빠르게훓어보는 Node.js와 Vert.x
 
Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles Social Tutorial Platform: Webbles
Social Tutorial Platform: Webbles
 
DevOps - CI/CD 알아보기
DevOps - CI/CD 알아보기DevOps - CI/CD 알아보기
DevOps - CI/CD 알아보기
 
Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.Big Data platform을 위한 Sencha Ext JS 사례.
Big Data platform을 위한 Sencha Ext JS 사례.
 

More from Jae Sung Park

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
Jae Sung Park
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
Jae Sung Park
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
Jae Sung Park
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
Jae Sung Park
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
Jae Sung Park
 
현실적 PWA
현실적 PWA현실적 PWA
현실적 PWA
Jae Sung Park
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
Jae Sung Park
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
Jae Sung Park
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular js
Jae Sung Park
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
Jae Sung Park
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & PolymerJae Sung Park
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
Jae Sung Park
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
Jae Sung Park
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
Jae Sung Park
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
Jae Sung Park
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기
Jae Sung Park
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana Ruble
Jae Sung Park
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: YeomanJae Sung Park
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio API
Jae Sung Park
 

More from Jae Sung Park (20)

[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes[SOSCON 2018] 오픈소스 개발: Behind the scenes
[SOSCON 2018] 오픈소스 개발: Behind the scenes
 
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
[DEVIEW 2018] JavaScript 배틀그라운드로부터 살아남기
 
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
[SOSCON 2017] 네이버의 FE 오픈소스: jindo에서 billboard.js까지
 
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기
 
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
[DEVIEW 2016] 네이버의 모던 웹 라이브러리 - egjs
 
현실적 PWA
현실적 PWA현실적 PWA
현실적 PWA
 
How jQuery event works
How jQuery event worksHow jQuery event works
How jQuery event works
 
iOS9 소개
iOS9 소개iOS9 소개
iOS9 소개
 
현실적 Angular js
현실적 Angular js현실적 Angular js
현실적 Angular js
 
가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS가볍게 살펴보는 AngularJS
가볍게 살펴보는 AngularJS
 
Web Components & Polymer
Web Components & PolymerWeb Components & Polymer
Web Components & Polymer
 
모바일 웹 디버깅
모바일 웹 디버깅모바일 웹 디버깅
모바일 웹 디버깅
 
CSS Functions
CSS FunctionsCSS Functions
CSS Functions
 
우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구우리가 몰랐던 크롬 개발자 도구
우리가 몰랐던 크롬 개발자 도구
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기스마트 TV 앱 개발 맛보기
스마트 TV 앱 개발 맛보기
 
How to create Aptana Ruble
How to create Aptana RubleHow to create Aptana Ruble
How to create Aptana Ruble
 
Web Audio API
Web Audio APIWeb Audio API
Web Audio API
 
도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman도구를 활용한 더 나은 웹 개발: Yeoman
도구를 활용한 더 나은 웹 개발: Yeoman
 
Developing game audio with the Web Audio API
Developing game audio with the Web Audio APIDeveloping game audio with the Web Audio API
Developing game audio with the Web Audio API
 

Front end dev 2016 & beyond

  • 1. November, 2016 Jae Sung, Park [Image source] https://www.叀�ickr.com/photos/aftab/6712768933/ Front-end Dev 2016 & beyond
  • 2. 어떤 것을 배워야 할까? 시간 투자 필요
  • 3. 그러나 해당 기술이 '뜨지' 못하면? 많은 기술들 속에서 어떤 것을 '선택' 할지가 점점 중요
  • 4. JavaScript 지속적인 자바스크립트 인기 StackOver叀�ow 2013~2016 가장 인기있는 기술로 응답 [참고] StackOver叀�ow 2016 survey
  • 5. WebAssembly 프로그래밍 언어(일단은 C/C++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되 는 binary 포맷(low-level language) [Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행 네이티브 애플리케이션과 같이 빠른 실행을 목표 JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용 Compute-intensive 작업 수행에 적합 https://speakerdeck.com/pine613/webassembly-ru-men
  • 6. [Source] WebAssembly Browser Preview Designed to run native C/C++ code in a tiny binary format [참고] Reached the Browser Preview milestone Chrome Dev Summit 2016: Advanced JS performance with V8 and Web Assembly
  • 7. 뜨거웠던 2016 [참고] HackerNews와 Reddit에서의 토론: ( )How it feels to learn JavaScript in 2016 한글번역
  • 8. 몇가지 키워드 ▪ Server-side Rendering ▪ Component (Module) ▪ Isomorphic JavaScript ▪ Virtual DOM
  • 9. Server-side rendering [참고] You’re Missing the Point of Server-Side Rendered JavaScript Apps
  • 10. Reason? SEO 문제 Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제 초기 로딩속도 정적 자원 로딩 후, 컨텐츠 구성위한 추가 Ajax API 호출 시간소요 JavaScript 사용이 제한된 환경 클라이언트 렌더링은 무용지물 하지만, 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다.
  • 11. Virtual DOM JavaScript로 표현된 DOM 구조 (VTree) Model Virtual DOM Diff Patch DOM [Source] http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html React’s di algorithm Virtual DOM and di�ng algorithm YouTube: React.js Conf 2015 - Hype!
  • 12. Reason? DOM 노드 핸들링은 비용이 많이 든다. Di 알고리즘을 통해 효율적 변경 변경에 대한 업데이트는? 1) Dirty checking Angular1은 VDOM은 없지만, Digest cycle내에서의 변경 watch React: setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링 2) (Angular2)Observable [참고] What is Virtual Dom
  • 13. Isomorphic JavaScript 서버와 클라이언트 영역 모두에서 실행 백엔드와 프론트엔드가 같은 코드 공유 http://isomorphic.net/ Isomorphic JS: 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉 Universal JS: 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트 Is “Isomorphic JavaScript” a good term?
  • 14. ES6 (ECMAScript 2015) 2가지 질문 1) 사용해야 하나? 2) 현재 사용 가능한가?
  • 15. Transpiler 다른 언어로 변환해주는 도구 class Test { constructor(name) { this.name = name; } say() { document.getElementById("name").innerHTML = this.name } } ES6 / Babel ▾ say Run with JSAuto‐run JS HTML CSS ES6 / Babel Console Output HelpJS Bin Save
  • 16. ES6 지원율 영역 지원율 Modern Browsers 97% Node.js 6.5/7 97% Babel 71% http://kangax.github.io/compat-table/es6/
  • 17. Module System 모듈/구조화에 대한 니즈 Name Type Syntax Execution from Module Unit per Synchronous module.export require return ⠘le (AMD) Asynchronous de⠘ne require callback de⠘nition Sync/Async export import return de⠘nition CommonJS RequireJS ES6 Module [참고] JavaScript Module Systems Showdown: CommonJS vs AMD vs ES2015 ES6 > CommonJS > RequireJS
  • 18. Package Manger Name Target Con๴g Install Path Node.js package.json node_modules Front-end bower.json bower_components npm Bower [참고] Front-End Package Manager Comparison
  • 20. npm or Bower? 다양한 옵션을 제공하는 것도 좋지만, 그렇다고 결정적 이유도 존재하지 않음 Tom Dale: Ember와 SproutCore 개발 참여 https://twitter.com/tomdale/status/667389972794724352
  • 21. 페이스북에서 개발한 새로운 패키지 매니저 클라이언트 npm 레지스트리와 호환 병렬처리를 통해 npm 보다 향상된 처리성능 package.json을 통해 간단하게 전환가능 ## yarn.lock 설정파일 없으면 생성  ## 설정 파일 있으면 package 설치  $ yarn  yarn install v0.16.1  info No lockfile found.  [1/4] Resolving packages...  ...  success Saved lockfile.  Done in 34.60s.  https://yarnpkg.com/ [참고] Yarn: A new package manager for JavaScript Hello, Yarn!
  • 22. npm vs Yarn [참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
  • 24. Bundler 다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구 webpack Browserify webpack > Browserify [참고] https://npmcompare.com/compare/browserify,webpack
  • 25. webpack 2 v2 개발중 (2016/11/16 - )v2.1.0-beta.27 native ES6 import, export and System.import(promise-based loader) for ES6 → popularized by Tree Shaking rollup.js [참고] Tree Shaking In JavaScript webpack roadmap Migrating to Webpack 2
  • 26. Code splitting 개통된 모든 안드로이드 기기의 절반이 <= 1GB RAM 모바일 사이트 평균 로딩시간: 19 sec Automagic code splitting patterns: Angular built-in lazy module loading Polymer CLI per route fragments / sharing Web pack aggressive splitting plugin. require.ensure() [참고] Chrome Dev Summit 2016: Planning for Performance: PRPL
  • 27. Build tool Grunt Gulp 정의된 작업(Task) 들을 수행(Runner) 하는 도구 Gulp > Grunt [참고] https://npmcompare.com/compare/grunt,gulp
  • 28. http://stateofjs.com/2016/buildtools/ Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함 ex. loaders 등을 통한 transpiling
  • 30. Interests jQuery / Angular / React / Vue.js / Polymer (2nd week, Nov. 2016) jQuery > Angular > React > Polymer > Vue.js [참고] Google Trends
  • 31. [Source] BuiltWith: jQuery Usage Statistics 프레임워크 등장 이전까진 de-facto standard 위치 브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분 웹앱이 아닌 웹사이트에선 아직도 적합 [참고] Is jQuery Still Relevant?
  • 32. Angular1 != Angular2 AtScript → TypeScript (JS 또는 Dart도 사용가능) → Google: GWT → Dart → TypeScript? 2 way data binding (not built-in v2) → 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 1 AngularJS 도입 선택 가이드
  • 33. for Production? 아직 너무 잦은 변화 (2016/9/15) (2016/11/23) (2017/3 예정) 꼭 TypeScript을 사용하지 않아도 되지만... 대다수의 문서가 TypeScript 기반 구글 서비스 적용은? 2.0.0 2.2.3 3.0.0 YouTube는 표준 웹컴포넌트 기반인 Polymer로 새로 개발예정 [참고] Angular 2 Is Out: Should You Start Using It? YouTube is being rebuilt with Web Components & Polymer
  • 34. React 페이스북에서 개발한 MV* 구조에서 View 영역에 대한 구현체 데이터의 흐름이나 구조 등을 다루지 않음 → Flux 아키텍처 구현체 와 사용 Virtual DOM, one-way data 叀�ow(one-way binding) 페이스북 대표 서비스들(FB, Instagram)에서 사용 Redux 하지만, 예전엔 html에 비즈니스 로직 포함에 대한 비판 React 로직(자바스크립트)안에 html이 포함 (JavaScript XML) - 를 통한 변환 필요JSX JSXTransformer
  • 35. 간단한 React 예제 var HelloWorld = React.createClass({ render: function() { return ( <h1>Hello {this.props.name}!</h1> ); }, }); ReactDOM.render( <HelloWorld name="World" />, document.getElementById('root') ); /* Compiled JS: class HelloWorld extends React.Component { render() { return React.createElement( "div", null, "Hello ", this.props.name ); } ES6 / Babel ▾ Hello World! Run with JSAuto‐run JS HTML CSS ES6 / Babel Console Output HelpJS Bin Save
  • 36. Vue.js Progressive framework for building user interfaces View layer에 집중 (Model-View-ViewModel) MVC 패턴의 Controller와 같이 데이터 관리 및 액션 처리 AngularJS와 유사성 (heavily in叀�uenced by Angular) 그러나, Angular에 비해 light MVVM [참고] GitLab: Why We Chose Vue.js 자바스크립트 프레임워크 소개 3 - Vue.js
  • 37. 간단한 Vue.js 예제 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width" <title>JS Bin</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js" </head> <body> <h1>Loops</h1> <div id="app-1"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> <hr> <h1>Two-way binding</h1> <div id="app-2"> <p>{{ message }}</p> <input v-model="message"> new Vue({ el: '#app-1', data: { todos: [ { text: 'Hello' }, { text: 'World!' } ] } }) new Vue({ el: '#app-2', data: { message: 'Hello Vue!' } }) HTML ▾ JavaScript ▾ Loops 1. Hello 2. World! Two-way binding Hello Vue! Hello Vue! Run with JSAuto‐run JS HTML CSS JavaScript Console Output HelpJS Bin Save
  • 38. Polymer 표준 Web Component 기반한 프레임워크 Custom element, HTML import, Template, Shadow DOM → 웹 컴포넌트 미지원 브라우저에 Poly⠘ll 제공도 목적 (2016/11/17) → support the new custom elements v1 and shadow DOM v1 그동안 Web Component 표준 스펙 브라우저 지원이 걸림돌 → Safari - HTML imports 제외한 나머지 구현 ( , , ) Web Components & Polymer 2.0-preview Custom elements Shadow DOM Template
  • 39. 간단한 Web Components 예제 <!­­ Import polyfill ­­>  <script src="../webcomponentsjs/webcomponents­lite.min.js"></script <!­­ Import custom elements ­­>  <link rel="import" href="hello­world.html">  <!­­ Run custom elements ­­>  <hello­world who="Unicorn"></hello­world>  http://webcomponents.org/hello-world-polymer/bower_components/hello-world-polymer/
  • 40. JS web frameworks benchmark Name Duration (ms) Angular v2.0.0-rc5 1.85 React v15.3.1 1.82 Vue v2.0.0-beta1 1.37 VanillaJS 1.00 VanillaJS > Vue > React > Angular2 http://stefankrause.net/js-frameworks-benchmark4/webdriver-ts/table.html
  • 41. '최신'은 항상 좋은가? Angular case v1: 성능 이슈 어려움 v2?
  • 42. 프레임워크의 등장 요인 UI 컴포넌트 기반 개발 니즈 React, Angular, Vue 모두 관련 기능 제공 표준에 일부 기반하기도 하지만... [참고] Using Web Components in React View encapsulation in Angular 2
  • 43. "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 Vue.js
  • 44. Being aware of biases 매몰 비용 오류 특정 기술/도구 투자 비용이 증가시, 자신의 선택 합리화를 위해 노력 합리적인 시각을 갖기 어렵게 만들 수 있다.
  • 46. V8 기반의 서버 런타임 ( ) 한때 느린 개발 속도에 대한 반발 ( ) 연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획 굳이 언급할 필요 없을 만큼의 사용률 io.js fork 후 merge LTS(Long-Term Support plan for Node.js releases)
  • 47. JavaScript Native ( )Cordova PhoneGap NativeScript React Native Fuse tabris.js Ionic 은 점점 잊혀져가는...Titanium
  • 48. 하지만, 매력적이나, 프레임워크별 다른 API 어쨌든 Native App 개발과는 다르다. 등장한지 얼마되지 않아 문서와 예제 부족
  • 49. Desktop Application (GitHub) 2015/4 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발 (Node-Webkit) (Intel) 2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경 Electron NW.js
  • 50. 다양한 시도들의 배경 단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구 서비스/앱 개발시 일반적으로 Web, iOS, Android 버전필요 → 동일 기능을 3가지 환경에 맞추어 개발 결국, 플랫폼별 대응 개발 비용의 문제
  • 51. Browsers 점점 더 빨라진 업데이트 주기 브라우저 벤더들의 표준 implementation은 확산 포인트 매 2주마다 배포, 추가될 새로운 웹 기술을 미리 사용 Chrome: Android에서도 제공 시작 마다 정식 릴리즈 ? - Evegreen 이라고 하지만, 윈도우 업데이트를 통해 FireFox: 최근 (Servo 기반) 엔진 변경 발표 ? - 2015/8월 부터 별도 배포 Safari Technology Preview canary/beta 채널 매 2개월 Edge Quantum Samsung Internet
  • 52. What Comes Next for the Web? Progressive Web Applications (PWAs) - o ine cache [참고] ServiceWorker 현실적 PWA Web Components Generic Sensor API Credential Management API Web Payments API WebVR Automotive WG [참고] Chrome Dev Summit 2016: What Comes Next for the Web? W3C Automotive 표준 개발 현황
  • 53. 의 새로운 이름 생태계의 파편화를 막기위한 노력(?) https://js.foundation/ jQuery Foundation [참고] 자바스크립트 생태계 통합될까
  • 54. 2017? 현재와 같은 빠른 변화의 기조가 유지될 것 복잡도의 증가 생태계의 너무 빠른 변화 그러나 올바른 방향으로 발전중 [참고] State of JavaScript 2016: Opinions 2016년과 이후 JavaScript의 동향
  • 55. 성공 가능성 요인들 표준 영역 내 포함 여부가 중요 기술이 좋다고 성공하진 않는다. 확실한 사용 레퍼런스 필요 (React 경우처럼) 활발한 자발적인 커뮤니티 필요 풍부한 문서와 예제 다양한 3rd 파티 플러그인: 상용 or 오픈
  • 56. JavaScript Fatigue 우리의 자세는? - Louis C.K Everything is amazing and nobody is happy "Expert"로써 모든 플랫폼의 모든 것을 알아야 한다는 생각 모든 것을 배우는 것이 해결책인가? 단순하게 현재 작업에 필요한 것, 또는 끌리는 것에 집중 [참고] Why I’m Thankful for JS Fatigue A Study Plan To Cure JavaScript Fatigue