6. ES.NEXT
데스크탑은 거의 대부분 ES6 지원
특히 Safari(데스크탑 및 iOS)는 100%
IE/안드로이드 하위버전 지원율 낮음
트랜스파일러를 통해
하위 버전인 ES5로의 변환해서 사용
7. ES2015
let와 const를 통한 블럭 스코프 변수 선언
Arrow function을 통해 함수 표현의 단순화, this 바인딩 제어
rest parameter, spread parameter, default parameter 파라메터 핸들링
destructuring을 통한 데이터 추출 편의성
클래스는 sugar syntex 뿐이라는 논쟁이 있었지만 잘 받아들여짐
iterator, generator 등을 통한 값 생성의 효율성 증가
map, weakmap, set, weakset 등 새로운 컬렉션
비동기 처리를 위한 promise
8. ES MODULE
가장 주목받는 ES6 기능이지만 브라우저에서 지원하지 않음
TC39는 평가(evaluation) 시점에 모듈을 불러오는
새로운 import() 함수에 대한 표준을 논의 중 - Stage 3
import {foo} from "bar"
import("baz").then((module)=>{/*…*/}).catch((err)=>{/**…*/})
9. ES.Next 해결해야 할 문제
브라우저에서 원할하게 모듈 로딩
비동기 처리 - promise, async/await 등 브라우저 구현
동시성과 병렬성 - TC 39에서 멀티쓰레딩에 대해 검토 중
구현된다면 멀티코어 프로세서 환경에서 성능 향상 기대
Immutable Native Objects
함수형 프로그래밍 혹은 최근 프레임워크에서 요구하는
불변객체에 대한 네이티브 구현
10. Babel is a JavaScript compiler.
Use next generation JavaScript, today.
11. BABEL
Babel은 자바스크립트를 위한
다중 목적 컴파일러
Babel은 ES6로 작성한 자바스크립트 코드를
ES6을 지원하지 않는 브라우저에서 동작하는 코드로 컴파일
source-to-source 컴파일
또는 트랜스파일
https://github.com/thejameskyle/babel-handbook
12.
13. BABEL
빌드 과정에서 간단하게
babel 트랜스파일 단계를 추가해 사용가능
react, vue 등 새로운 프레임워크들이 ES6 사용
자바스크립트 애플리케이션 개발할 때도
ES6의 새로운 스펙을 사용할 수 있음
브라우저가 ES6를 완벽히 지원하는 것은 현재 어려움
2016년말 2017년초 90~95% 정도될 것으로 예상
하위브라우져와의 호환성 문제 등등
현실적으로 babel 같은 트랜스파일러 사용이 최선
14. webpack
번들링 - 프로젝트에서 사용하는 다양한 자원들을 묶고
파일들과의 상관관계를 정적으로 분석해 원하는 형태의 파일 출력
다양한 프레임워크에서 이미 기본적인 도구로 사용
ES6를 사용하는 경우 거의 필수
15. webpack
2017. 01. webpack 2(v2.2.0) 릴리즈
네이티브 ES6 import/export의 지원
ES6를 위한 Tree Shaking 지원
다양한 배포 전략에 따라 원하는 빌드의 구성이 가능
수많은 loader와 plugin을 통해 점점 더 성장
기존의 빌드 도구들은 전반적으로 webpack 전환 할 것
16. WEB ASSEMBLY
웹브라우저에서 돌릴 수 있는 새로운 형식의 코드
컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어
C/C++ 등과 같은 언어로 작성하고 컴파일해 웹에서 실행
또한 자바스크립트와 나란히 돌아가면서 서로를 보완
2017년 상반기내 대다수의 브라우저들에서 프리뷰 지원 목표
17. WEB ASSEMBLY
빠르고, 효과적이고, 이식성이 좋을 것
여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있음
읽기 쉽고 디버깅이 가능할 것
저수준 어셈블리 언어지만, 작성하고, 보고, 디버깅할 수는 있도록,
사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고 있다
안전함을 유지할 것
샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되
브라우저의 동일한 출처(same-origin)와 권한정책을 강제
웹을 망가뜨리지 않을 것
다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계
18. WEB ASSEMBLY
3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집
그 외 네이티브 성능을 필요로하는 여러 분야의 사례에서
현재의 웹은 성능상의 문제에 부딪힘
이런 문제를 웹어셈블리를 통해 해결하면서 자바스크립트를 보완
웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 자바스크립트로 제어
<script type='module'>같이 ES6 모듈처럼 사용
19. jQuery
2016. 06. 버전 3.0 발표
레거시 브라우저 지원을 위한 1.x와 2.x의 형태를 버리고 단일 버전 형태로 통합
AJAX 및 이펙트 등을 제거한 slim 버전도 출시해
기존 버전 대비 17~20kb 정도의 가벼운 용량을 제공
20. jQuery
브라우저의 표준 지원율 향상으로 VanillaJS 만으로도 충분히 개발 가능
최근의 프레임워크는 MV* 아키텍쳐로 DOM 조작을 하지 않음
프레임워크가 웹애플리케이션 개발에 적합하다면
jQuery는 웹페이지 개발에 있어서는 아직도 적합하고 경쟁력 있음(생태계 풍부)
많은 개발자가 jQuery의 사용은 트렌디하지 않게 보고 있는 것은 사실
과거와 같이 주도적이진 않으며 시간이 갈수록 서서히 영향력 감소
21.
22. React
커뮤니티의 전폭적인 지원을 받으며 계속 발전
많은 베스트 프랙티스가 공유되고 있으며
react-router, Flux/Redux 등의 아키텍쳐와 함께 실질적인 프레임워크로 사용
23. React
페이스북은 React 스타터 킷인 'Create React App'의 개량된 버전을 직접 릴리즈
react-router도 공식 React 저장소로 머지하기 위한 논의 중
페이스북의 UI 컴포넌트 프레임워크가 나올 것으로 예상
Next.js - Dead simple Universal render & Routing for Node & React
velocity-react - Animations for React
24. ngular2+
수많은 베타 버전과 7개의 RC 버전 끝에 2016.09. Angular2.0 출시
TypeScript 기반, 모듈, 컴포넌트, Directive, DI 등
AngularJS의 컨셉을 유지하고 있지만 문법이 많이 다름
2017.03 버전3.0을 건너뛰고 4.0을 릴리즈
잦은 버전 변경과 변화가 개발자들에게 혼란을 가중
35. AMP 1년여 굉장히 성공적
86만여개 도메인에 17억개의 AMP 페이지 생성
매주 3500만개의 AMP가 생성
PWA를 결합하기위한 시도
컴포넌트 방식 혹은 iframe/shadow DOM
<amp-bind>
데이터를 바인딩하기 위한 컴포넌트 지원
프로그램 패러다임을 얻고 플랫폼으로 발돋움
AMP NEXT
36. 개선된 Image gallery lightboxes, Parallax scrolling 추가
Thumblr, eBay 페이지 중 상당수 AMP로 전환
Yahoo Japen, Sogou, Baidu 검색엔진에 AMP 페이지 지원
https://ampstart.com/
AMP 개발을 위한 점프 포인트
https://ampbyexample.com/
Learn AMP by Example
AMP NEXT
37.
38.
39. Progressive Web App
프로그래시브 Progressive
브라우저에 상관없이 모든 사용자에게 동작
반응성 Responsive
어떠한 폼 팩터에도 맞을 것
네트워크 연결과 독립적 Connectivity independent
Service Worker를 통해 오프라인에서도 동작할 것
앱과 비슷한 동작 App-like-interactions
앱과 같은 네비게이션과 동작을 하기 위해
Shell 과 컨텐츠를 합친 어플리케이션 모델을 사용
최신버전 유지 Fresh
Service Worker 를 통해 보이지는 않지만 언제나 최신 버전을 유지할 것
40. 안전 Safe
TLS (Service Worker 의 요구사항)를 통해 스누핑을 방지할 것
검색 가능 Discoverable
W3C Manifest 를 도입하여 "어플리케이션"으로써 인식되고
검색 엔진에 의해 등록 가능할 것
재방문 Re-engageable
OS의 UI를 활용하여 사용자를 다시 방문하게 ex) Push 알림
설치 가능 Installable
앱 스토어가 아니라 브라우저 기반으로 홈화면에 아이콘 추가
연결 가능 Linkable
설치조차도 귀찮다면 앱 설치 없이도 사용 가능하고 공유하기 편할 것
소셜 네트워크에서도 URL의 힘은 강력하다.
Progressive Web App
44. 가트너그룹은 2019년까지 브랜드의 20%가 모바일 앱을 포기 할 것으로 예상
모바일 사용자는 상위 3개의 앱만 사용하여 80%의 시간을 보냄
Progressive Web App을 모바일 디바이스에서 지원하고
사용자에게 앱과 같은 브라우징 경험을 제공한다면
많은 기업이 앱에 대한 투자 비용을 감소할 것
https://www.washingtonpost.com/
https://www.flipkart.com/
Progressive Web App Next
45. 2016.10. 페이스북에서 새롭게 발표한 npm 클라이언트
기존 npm 레지스트리를 사용. npm의 모든 패키지들 그대로 사용
병렬처리를 통해 npm 보다 향상된 처리 성능
기존의 npm 설정 파일인 package.json을 통해
yarn 설정파일인 yarn.lock 파일을 손쉽게 생성
$ yarn
yarn install v0.16.1
info No lockfile found.
[1/4] Resolving packages...
...
success Saved lockfile.
Done in 34.60s.
46.
47. Functional Programming
React/Redux가 많이 사용되면서 statless한 애플리케이션에 대한 장점 부각
모든 입력과 출력이 선언적으로 표현되는 순수함수를 통해 사이드 이펙트 감소
이를 기반으로한 Functional Reactive Programming이 추진력을 얻을 듯(RxJs)
Angular2+는 이벤트, XHR 처리에 RxJs 사용
48. 자바스크립트의 뉴 프론티어
chatbot
많은 개발자들이 자바스크립트를 사용해 chatbot을 개발
단순한 Slack 봇에서 부터 복잡한 커머스 트랜잭션 봇까지
IoT
IoT 영역에서도 자바스크립트의 도입을 쉽게 볼수 있다.
삼성은 2015년 IoT 자바스크립트 엔진 JerryScript를 발표
가상현실
웹의 가상현실 기술은 WebVR을 통해 표준화 진행
자바스크립트 API를 통해 가상현실 기기에서 감지되는 위치와 움직임등에 대한 정보 획득
구글은 크롬팀이 리딩해 가상현실 경험을 개발할 수 있는 A-Frame 프레임워크를 개발 중
MS는 HoloLens에서 사용할 수 있는 앱 개발을 위해 HoloJS 프레임워크를 2016.12. 공개
49. NAVER egjs 2.0 http://naver.github.io/egjs/
네이버의 노하우가 축적된 모던 웹 라이브러리, 오픈소스(PR환영!)
UI인터렉션, 이펙트, 유틸리티 등으로 구성, 네이버의 여러 서비스에서 사용
flicking, visible, infiniteGrid 등등 컴포넌트 제공, 빠른 성능과 안정성 제공
2017년 상빈기 2.0 출시 예정
jQuery 의존성을 버리고 각 컴포넌트가 독립적인 모듈로 운영
360도 이미지 뷰어 컴포넌트 추가 예정
