Front end dev 2016 & beyond

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

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

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!
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!
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/webcomponentslite.min.js"></script
<! Import custom elements >
<link rel="import" href="helloworld.html">
<! Run custom elements >
<helloworld who="Unicorn"></helloworld>
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/

Front end dev 2016 & beyond

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Front end dev 2016 & beyond

Semelhante a Front end dev 2016 & beyond (20)

Mais de Jae Sung Park

Mais de Jae Sung Park (20)

Front end dev 2016 & beyond