[Web] 2017. 프론트엔드 트랜드

2017. 프론트엔드 트랜드

2017. 프론트엔드 트랜드 from Tai Hoon KIM

2017. 프론트엔드 트랜드

1. 2017 프론트엔드
 트렌드&인사이트 네이버 FE플랫폼 김태훈

2. about me 김태훈 NAVER FE플랫폼 SADI HTML5 초빙교수
 NHN NEXT WebUI Basic 겸임교수 Project Management Professional(PMP) 페이스북 프론트엔드개발그룹 운영 http://facebook.com/groups/webfrontend

3. ES.NEXT BABEL, WEBPACK WEB ASSEMBLY jQuery, React, Angular, Vue ... AMP, PWA ETC...

4. ES.NEXT 2015. 06 ECMAScript 6th Edtion / ES2015(ES6) 2016. 06 ECMAScript 7th Edtion / ES2016(ES7) // ES2017 - Array.prototype.includes ['a', 'b', 'c'].includes('a') //true ['a', 'b', 'c'].includes('d') //false // ES2017 - exponentiation operator (**) let squared = 3 ** 2 // 9 Math.pow(x, y) // 9 - produces the same result as maybe... 2017. 06 ECMAScript 8th Edtion / ES2017(ES8)

5. http://kangax.github.io/compat-table/es6/

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. BABEL 빌드 과정에서 간단하게
 babel 트랜스파일 단계를 추가해 사용가능 react, vue 등 새로운 프레임워크들이 ES6 사용 자바스크립트 애플리케이션 개발할 때도 ES6의 새로운 스펙을 사용할 수 있음 브라우저가 ES6를 완벽히 지원하는 것은 현재 어려움 2016년말 2017년초 90~95% 정도될 것으로 예상 하위브라우져와의 호환성 문제 등등
 현실적으로 babel 같은 트랜스파일러 사용이 최선

13. webpack 번들링 - 프로젝트에서 사용하는 다양한 자원들을 묶고 파일들과의 상관관계를 정적으로 분석해 원하는 형태의 파일 출력 다양한 프레임워크에서 이미 기본적인 도구로 사용 ES6를 사용하는 경우 거의 필수

14. webpack 2017. 01. webpack 2(v2.2.0) 릴리즈 네이티브 ES6 import/export의 지원 ES6를 위한 Tree Shaking 지원 다양한 배포 전략에 따라 원하는 빌드의 구성이 가능 수많은 loader와 plugin을 통해 점점 더 성장 기존의 빌드 도구들은 전반적으로 webpack 전환 할 것

15. WEB ASSEMBLY 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어 C/C++ 등과 같은 언어로 작성하고 컴파일해 웹에서 실행 또한 자바스크립트와 나란히 돌아가면서 서로를 보완 2017년 상반기내 대다수의 브라우저들에서 프리뷰 지원 목표

16. WEB ASSEMBLY 빠르고, 효과적이고, 이식성이 좋을 것 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있음 읽기 쉽고 디버깅이 가능할 것 저수준 어셈블리 언어지만, 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고 있다 안전함을 유지할 것 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되 브라우저의 동일한 출처(same-origin)와 권한정책을 강제 웹을 망가뜨리지 않을 것 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계

17. WEB ASSEMBLY 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집 그 외 네이티브 성능을 필요로하는 여러 분야의 사례에서 현재의 웹은 성능상의 문제에 부딪힘 이런 문제를 웹어셈블리를 통해 해결하면서 자바스크립트를 보완 웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 자바스크립트로 제어 <script type='module'>같이 ES6 모듈처럼 사용

18. jQuery 2016. 06. 버전 3.0 발표 레거시 브라우저 지원을 위한 1.x와 2.x의 형태를 버리고 단일 버전 형태로 통합 AJAX 및 이펙트 등을 제거한 slim 버전도 출시해 기존 버전 대비 17~20kb 정도의 가벼운 용량을 제공

19. jQuery 브라우저의 표준 지원율 향상으로 VanillaJS 만으로도 충분히 개발 가능 최근의 프레임워크는 MV* 아키텍쳐로 DOM 조작을 하지 않음 프레임워크가 웹애플리케이션 개발에 적합하다면 jQuery는 웹페이지 개발에 있어서는 아직도 적합하고 경쟁력 있음(생태계 풍부) 많은 개발자가 jQuery의 사용은 트렌디하지 않게 보고 있는 것은 사실 과거와 같이 주도적이진 않으며 시간이 갈수록 서서히 영향력 감소

20. React 커뮤니티의 전폭적인 지원을 받으며 계속 발전 많은 베스트 프랙티스가 공유되고 있으며 react-router, Flux/Redux 등의 아키텍쳐와 함께 실질적인 프레임워크로 사용

21. React 페이스북은 React 스타터 킷인 'Create React App'의 개량된 버전을 직접 릴리즈 react-router도 공식 React 저장소로 머지하기 위한 논의 중 페이스북의 UI 컴포넌트 프레임워크가 나올 것으로 예상 Next.js - Dead simple Universal render & Routing for Node & React velocity-react - Animations for React

22. ngular2+ 수많은 베타 버전과 7개의 RC 버전 끝에 2016.09. Angular2.0 출시 TypeScript 기반, 모듈, 컴포넌트, Directive, DI 등 AngularJS의 컨셉을 유지하고 있지만 문법이 많이 다름 2017.03 버전3.0을 건너뛰고 4.0을 릴리즈 잦은 버전 변경과 변화가 개발자들에게 혼란을 가중

23. Angular2+ Zones.js, Change Detection 등을 통한 성능 향상 angular-cli로 개발 편의성 향상 RxJs를 통한 리액티브 프로그래밍

24. Angular2 vs React

25. ue.js MVVM(Model-View-ViewModel) 패턴으로 데이터 관리 및 액션 처리에 집중 Flux에서 영감을 받은 vuex 데이터 플로우 아키텍쳐 VirtualDOM 도입 Angular와 React의 장점들과 유사함 최근 급속하게 사용자층이 늘고 있음

26. AMP AMP가 제공하는 컴포넌트를 사용해 뛰어난 퍼포먼스의 페이지 개발 JS 필요없음. 커스텀엘리먼트를 사용하기 때문에 HTML 요소처럼 사용 가능 AMP로 만든 페이지와 리소스는 구글 CDN에 저장 구글 검색 결과에서 클릭시 딜레이없이 페이지를 보여줌

27. ... 35 more AMP Extended Component

28. /* AMP 확장 컴포넌트 - 캐러셀 */ <amp-carousel width=300 height=400> <amp-img src="my-img1.png" width=300 height=400></amp-img> <amp-img src="my-img2.png" width=300 height=400></amp-img> <amp-img src="my-img3.png" width=300 height=400></amp-img> </amp-carousel> AMP-CAROUSEL

29. /* AMP 확장 컴포넌트 - lightbox */ <amp-image-lightbox id="lightbox1" layout="nodisplay"> </amp-image-lightbox> AMP-IMAGE-LIGHTBOX

30. /* AMP 확장 컴포넌트 - 사이드바 */ <amp-sidebar id='sidebar' layout="nodisplay" side="right"> ... AMP-SIDEBAR

31. https://youtu.be/e6slMlFgdCQ

32. AMP 1년여 굉장히 성공적 86만여개 도메인에 17억개의 AMP 페이지 생성 매주 3500만개의 AMP가 생성 PWA를 결합하기위한 시도 컴포넌트 방식 혹은 iframe/shadow DOM <amp-bind> 데이터를 바인딩하기 위한 컴포넌트 지원 프로그램 패러다임을 얻고 플랫폼으로 발돋움 AMP NEXT

33. 개선된 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

34. Progressive Web App 프로그래시브 Progressive 브라우저에 상관없이 모든 사용자에게 동작 반응성 Responsive 어떠한 폼 팩터에도 맞을 것 네트워크 연결과 독립적 Connectivity independent Service Worker를 통해 오프라인에서도 동작할 것 앱과 비슷한 동작 App-like-interactions 앱과 같은 네비게이션과 동작을 하기 위해 Shell 과 컨텐츠를 합친 어플리케이션 모델을 사용 최신버전 유지 Fresh Service Worker 를 통해 보이지는 않지만 언제나 최신 버전을 유지할 것

35. 안전 Safe TLS (Service Worker 의 요구사항)를 통해 스누핑을 방지할 것 검색 가능 Discoverable W3C Manifest 를 도입하여 "어플리케이션"으로써 인식되고
 검색 엔진에 의해 등록 가능할 것 재방문 Re-engageable OS의 UI를 활용하여 사용자를 다시 방문하게 ex) Push 알림 설치 가능 Installable 앱 스토어가 아니라 브라우저 기반으로 홈화면에 아이콘 추가 연결 가능 Linkable 설치조차도 귀찮다면 앱 설치 없이도 사용 가능하고 공유하기 편할 것 소셜 네트워크에서도 URL의 힘은 강력하다. Progressive Web App

36. Progressive Web App - Service Worker

37. Progressive Web App - Service Worker

38. 가트너그룹은 2019년까지 브랜드의 20%가 모바일 앱을 포기 할 것으로 예상 모바일 사용자는 상위 3개의 앱만 사용하여 80%의 시간을 보냄 Progressive Web App을 모바일 디바이스에서 지원하고 사용자에게 앱과 같은 브라우징 경험을 제공한다면 많은 기업이 앱에 대한 투자 비용을 감소할 것 https://www.washingtonpost.com/ https://www.flipkart.com/ Progressive Web App Next

39. 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.

40. Functional Programming React/Redux가 많이 사용되면서 statless한 애플리케이션에 대한 장점 부각 모든 입력과 출력이 선언적으로 표현되는 순수함수를 통해 사이드 이펙트 감소 이를 기반으로한 Functional Reactive Programming이 추진력을 얻을 듯(RxJs) Angular2+는 이벤트, XHR 처리에 RxJs 사용

41. 자바스크립트의 뉴 프론티어 chatbot 많은 개발자들이 자바스크립트를 사용해 chatbot을 개발 단순한 Slack 봇에서 부터 복잡한 커머스 트랜잭션 봇까지 IoT IoT 영역에서도 자바스크립트의 도입을 쉽게 볼수 있다. 

삼성은 2015년 IoT 자바스크립트 엔진 JerryScript를 발표 가상현실 웹의 가상현실 기술은 WebVR을 통해 표준화 진행 자바스크립트 API를 통해 가상현실 기기에서 감지되는 위치와 움직임등에 대한 정보 획득 구글은 크롬팀이 리딩해 가상현실 경험을 개발할 수 있는 A-Frame 프레임워크를 개발 중 MS는 HoloLens에서 사용할 수 있는 앱 개발을 위해 HoloJS 프레임워크를 2016.12. 공개

42. NAVER egjs 2.0 http://naver.github.io/egjs/ 네이버의 노하우가 축적된 모던 웹 라이브러리, 오픈소스(PR환영!) UI인터렉션, 이펙트, 유틸리티 등으로 구성, 네이버의 여러 서비스에서 사용 flicking, visible, infiniteGrid 등등 컴포넌트 제공, 빠른 성능과 안정성 제공 2017년 상빈기 2.0 출시 예정 jQuery 의존성을 버리고 각 컴포넌트가 독립적인 모듈로 운영 360도 이미지 뷰어 컴포넌트 추가 예정

43. 프론트엔드 개발가이드 Front-End Developer Handbook 2017 https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/

44. References 

http://www.telerik.com/whitepapers/kendo-ui/the-future-of-javascript-2017-and-beyond http://developer.telerik.com/topics/web-development/javascripts-journey-2016/ 

https://mobiforge.com/research-analysis/13-statistics-on-mobile-web-performance-in-2017 https://mobiforge.com/news-comment/ampconf-amp-is-a-performance-framework-thats-growing-up https://www.oreilly.com/ideas/5-web-trends-for-2017 

http://d2.naver.com/helloworld/2809766 

https://youtu.be/e6slMlFgdCQ 

https://www.ampproject.org/amp-conf-2017/ 

https://developers.google.com/web/progressive-web-apps/ https://www.gitbook.com/book/frontendmasters/front-end-handbook-2017/ https://v8project.blogspot.kr/2016/10/webassembly-browser-preview.html 

https://unsplash.com/

45. #thank you Atwood's Law Any application that can be written in JavaScript, will eventually be written in JavaScript.

.