Front end dev 2016 & beyond

2,744 views

Published on

A perspective on front-end dev trend and environment in 2016

Published in: Software
1 Comment
38 Likes
Statistics
Notes
No Downloads
Views
Total views
2,744
On SlideShare
0
From Embeds
0
Number of Embeds
94
Actions
Shares
0
Downloads
22
Comments
1
Likes
38
Embeds 0
No embeds

No notes for slide

Front end dev 2016 & beyond

  1. 1. November, 2016 Jae Sung, Park [Image source] https://www.叀�ickr.com/photos/aftab/6712768933/ Front-end Dev 2016 & beyond
  2. 2. 어떤 것을 배워야 할까? 시간 투자 필요
  3. 3. 그러나 해당 기술이 '뜨지' 못하면? 많은 기술들 속에서 어떤 것을 '선택' 할지가 점점 중요
  4. 4. JavaScript 지속적인 자바스크립트 인기 StackOver叀�ow 2013~2016 가장 인기있는 기술로 응답 [참고] StackOver叀�ow 2016 survey
  5. 5. WebAssembly 프로그래밍 언어(일단은 C/C++) 컴파일을 통해 어느 브라우저에서도 빠르게 실행되 는 binary 포맷(low-level language) [Source] 브라우저가 가상 머신처럼 동작해 컴파일된 중간 코드를 실행 네이티브 애플리케이션과 같이 빠른 실행을 목표 JavaScript 컨텍스트에서 WASM 모듈을 로딩해 사용 Compute-intensive 작업 수행에 적합 https://speakerdeck.com/pine613/webassembly-ru-men
  6. 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. 7. 뜨거웠던 2016 [참고] HackerNews와 Reddit에서의 토론: ( )How it feels to learn JavaScript in 2016 한글번역
  8. 8. 몇가지 키워드 ▪ Server-side Rendering ▪ Component (Module) ▪ Isomorphic JavaScript ▪ Virtual DOM
  9. 9. Server-side rendering [참고] You’re Missing the Point of Server-Side Rendered JavaScript Apps
  10. 10. Reason? SEO 문제 Ajax API로 구성 페이지 초기 화면이 blank로 구성되면 SEO 문제 초기 로딩속도 정적 자원 로딩 후, 컨텐츠 구성위한 추가 Ajax API 호출 시간소요 JavaScript 사용이 제한된 환경 클라이언트 렌더링은 무용지물 하지만, 클라이언트 영역에서 처리가 빠르다고 했었다가 지금은 서버 렌더링 말한다.
  11. 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. 12. Reason? DOM 노드 핸들링은 비용이 많이 든다. Di 알고리즘을 통해 효율적 변경 변경에 대한 업데이트는? 1) Dirty checking Angular1은 VDOM은 없지만, Digest cycle내에서의 변경 watch React: setState 호출시 dirty로 마킹 이후 이벤트 loop 마지막에 마킹요소 재렌더링 2) (Angular2)Observable [참고] What is Virtual Dom
  13. 13. Isomorphic JavaScript 서버와 클라이언트 영역 모두에서 실행 백엔드와 프론트엔드가 같은 코드 공유 http://isomorphic.net/ Isomorphic JS: 클라이언트 또는 서버에서 페이지를 생성(조합)하기 위한 테크닉 Universal JS: 모든 자바스크립트 수행 환경에서 실행되는 자바스크립트 Is “Isomorphic JavaScript” a good term?
  14. 14. ES6 (ECMAScript 2015) 2가지 질문 1) 사용해야 하나? 2) 현재 사용 가능한가?
  15. 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. 16. ES6 지원율 영역 지원율 Modern Browsers 97% Node.js 6.5/7 97% Babel 71% http://kangax.github.io/compat-table/es6/
  17. 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. 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
  19. 19. Module Counts http://www.modulecounts.com/
  20. 20. npm or Bower? 다양한 옵션을 제공하는 것도 좋지만, 그렇다고 결정적 이유도 존재하지 않음 Tom Dale: Ember와 SproutCore 개발 참여 https://twitter.com/tomdale/status/667389972794724352
  21. 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. 22. npm vs Yarn [참고] NPM VERSUS YARN - THE EPIC FIGHT FOR SPEED IN CONTINUOUS INTEGRATION
  23. 23. Bundlers vs. Build tools
  24. 24. Bundler 다양한 자원들을 묶어 하나의 파일로 번들링 해주는 도구 webpack Browserify webpack > Browserify [참고] https://npmcompare.com/compare/browserify,webpack
  25. 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. 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. 27. Build tool Grunt Gulp 정의된 작업(Task) 들을 수행(Runner) 하는 도구 Gulp > Grunt [참고] https://npmcompare.com/compare/grunt,gulp
  28. 28. http://stateofjs.com/2016/buildtools/ Bundler가 기존 build 도구들이 수행하던 작업들을 일부 대체해 경계의 모호함 ex. loaders 등을 통한 transpiling
  29. 29. Frameworks
  30. 30. Interests jQuery / Angular / React / Vue.js / Polymer (2nd week, Nov. 2016) jQuery > Angular > React > Polymer > Vue.js [참고] Google Trends
  31. 31. [Source] BuiltWith: jQuery Usage Statistics 프레임워크 등장 이전까진 de-facto standard 위치 브라우저의 표준 지원률 향상으로 VanillaJS만으로도 점점 충분 웹앱이 아닌 웹사이트에선 아직도 적합 [참고] Is jQuery Still Relevant?
  32. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. '최신'은 항상 좋은가? Angular case v1: 성능 이슈 어려움 v2?
  42. 42. 프레임워크의 등장 요인 UI 컴포넌트 기반 개발 니즈 React, Angular, Vue 모두 관련 기능 제공 표준에 일부 기반하기도 하지만... [참고] Using Web Components in React View encapsulation in Angular 2
  43. 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. 44. Being aware of biases 매몰 비용 오류 특정 기술/도구 투자 비용이 증가시, 자신의 선택 합리화를 위해 노력 합리적인 시각을 갖기 어렵게 만들 수 있다.
  45. 45. 새로운 영역
  46. 46. V8 기반의 서버 런타임 ( ) 한때 느린 개발 속도에 대한 반발 ( ) 연 1회의 릴리스와 릴리스에 대한 18개월간 지원 계획 굳이 언급할 필요 없을 만큼의 사용률 io.js fork 후 merge LTS(Long-Term Support plan for Node.js releases)
  47. 47. JavaScript Native ( )Cordova PhoneGap NativeScript React Native Fuse tabris.js Ionic 은 점점 잊혀져가는...Titanium
  48. 48. 하지만, 매력적이나, 프레임워크별 다른 API 어쨌든 Native App 개발과는 다르다. 등장한지 얼마되지 않아 문서와 예제 부족
  49. 49. Desktop Application (GitHub) 2015/4 발표 - 처음 웹 기반 텍스트 편집기인 Atom의 데스크톱 셸로 개발 (Node-Webkit) (Intel) 2011 발표 - WebKit(Node-Webkit)에서 Chromium으로 변경 Electron NW.js
  50. 50. 다양한 시도들의 배경 단일 개발 모델을 통한 멀티 패러다임 소프트웨어 개발 요구 서비스/앱 개발시 일반적으로 Web, iOS, Android 버전필요 → 동일 기능을 3가지 환경에 맞추어 개발 결국, 플랫폼별 대응 개발 비용의 문제
  51. 51. Browsers 점점 더 빨라진 업데이트 주기 브라우저 벤더들의 표준 implementation은 확산 포인트 매 2주마다 배포, 추가될 새로운 웹 기술을 미리 사용 Chrome: Android에서도 제공 시작 마다 정식 릴리즈 ? - Evegreen 이라고 하지만, 윈도우 업데이트를 통해 FireFox: 최근 (Servo 기반) 엔진 변경 발표 ? - 2015/8월 부터 별도 배포 Safari Technology Preview canary/beta 채널 매 2개월 Edge Quantum Samsung Internet
  52. 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. 53. 의 새로운 이름 생태계의 파편화를 막기위한 노력(?) https://js.foundation/ jQuery Foundation [참고] 자바스크립트 생태계 통합될까
  54. 54. 2017? 현재와 같은 빠른 변화의 기조가 유지될 것 복잡도의 증가 생태계의 너무 빠른 변화 그러나 올바른 방향으로 발전중 [참고] State of JavaScript 2016: Opinions 2016년과 이후 JavaScript의 동향
  55. 55. 성공 가능성 요인들 표준 영역 내 포함 여부가 중요 기술이 좋다고 성공하진 않는다. 확실한 사용 레퍼런스 필요 (React 경우처럼) 활발한 자발적인 커뮤니티 필요 풍부한 문서와 예제 다양한 3rd 파티 플러그인: 상용 or 오픈
  56. 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
  57. 57. GraciasGracias[Image source] https://www.叀�ickr.com/photos/⠘en/416162413/

×