진화의 시작

2016 Front-End 개발 동향


Created by 손찬욱 / chanuk.son

손찬욱

아내와 아들 그리고 딸밖에 모르는 개발자


  • 재직 중
  • JMC(Jindo Mobile Component), egjs 개발
  • iScroll Committer
  • "네이버는 이렇게 한다! 쉽고 빠른 모바일 웹 UI 개발" 저자

egjs는 jQuery기반의
플리킹,무한스크롤과 같은 UI 인터렉션 관련 통합 라이브러리

eg.InfiniteGrid VS Masorny

ES2015

ECMAScript6

ES6

JavaScript의 탄생

Brendan Eich (브랜든 아이크) 개발

1996년 3월 Netscape Navigator 2.0에서 JavaScript 지원 1996년 8월 Internet Explorer 3.0에서 JScript 지원

표준화로 널리 이롭게 하라...

1996년 12월 ECMA에 표준등록을 위한 스펙 전달

ECMA-262, ECMAScript

1997년 6월 1'st Edition (ES1)

1998년 6월 2'nd Edition (ES2)

1999년 12월 3'rd Edition (ES3)

정규식, try/catch, ...

대다수 브라우저에서 ES3을 지원

이제 진정한 업계 표준

ECMAScript4

이제 좀 혁신적인 것을 만들자

Classes, Module system, Generators and iterators, Destructuring assignment, etc, ...

이게 무슨 JavaScript 야? 절라 복잡하자너

있는 것부터 잘하자! ECMAScript 3.1 워킹그룹

ES 4 VS ES 3.1

ECMAScript 4 지연

2008년 완료가 목표

ECMAScript 4 is dropped

사실상 IE가 표준

커뮤니티 내의 현실적인 표준

jQuery

ECMAScript ?

두 그룹의 잡업을 합치기로 결정

ECMAScript Harmony

2008년 가을.

코드네임 ECMAScript Harmony 발표

ES4의 완성된 스펙을 ES5로 지정

ES4 나머지 스펙은 ECMAScript Harmony로 진행

2009년 12월. ES5 표준 발표. 두둥~!

ECMAScript 3.1 기반, No New Syntax

Strict mode, JSON, property define, ...

2015년 6월 ES6의 최종안인 ES2015를 발표 두둥~!

외국인도 열광하고

한국인들도 열광하고

도대체 ES6이 뭐길래?


복잡해진 웹애플리케이션 개발에 적합한 스펙


Classes, Module system, Reflect, Promise, Proxy, Generators and iterators, Destructuring assignment, etc, ...

무엇보다도,

TC39 위원회가 아닌...

커뮤니티의 의견이 반영된 표준

JSConf.us 2011

JavaScript의 표준은 커뮤니티가 주도해야 한다.

Me, too

JS.next (ES6, ES7, ...) 는

커뮤니티의 의견을 반영하는 오픈소스 표준

그 첫번째 결과물이 ES6(ES2015)

ES6 브라우저 지원현황

2016년말까지 90~95%에 달할 것으로 예상

https://kangax.github.io/compat-table/es6

하지만, 현실은...

여전히 IE와 ES3

그렇다면, 지금 ES6을 사용할 수는 없나?

transpiler(transcompiler)를 이용시... 가능


Proxy, own property를 제외하고는 모두 사용가능

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

JavaScript를 또 JavaScript로 변환해야 하나?

강력한 지원군

JSX로 변환해야한다. ES6도 지원한다

TypeScript로 변환해야한다. ES6도 지원한다

이렇게 된 이상 ES6을 지원한다

네이버에서는...

동영상 플레이어 (IE8~, Android2.x~), 스마트 에디터 3.0 (IE10~)

JavaScript 올해의 운세

ES2017

ES2017

2016년 완료예정

  • exponentiation operator
  • Array.prototype.includes
  • SIMD
  • Async functions

Framework

jQuery

2005.8.22 ~ 현재
http://trends.builtwith.com/javascript/jQuery

더 이상 필요 없다. 직관적인 인터페이스 때문에 사용한다 ...

React

2013.5 ~ 현재

2016년 stackoverflow에서 가장 유행한 기술

http://stackoverflow.com/research/developer-survey-2016

React를 사용하고 있는 대규모 서비스

https://github.com/facebook/react/wiki/Sites-Using-React

Virtual DOM과 같은 React 개념의 확산

많은 개발자가 React를 학습

Angular

2016년 Front-End 개발자에게 인기있는 기술 2위

http://stackoverflow.com/research/developer-survey-2016

Angular2 Release

현재 Angular 2.0 Beta 진행 중. 2016년에 정식 배포될 예정

Angular 2는 AngularJS 1보다 10배 빠른 성능

많은 개발자가 AngularJS 1을 벗어나 Angular 2로 이동할 것

엔터프라이즈 영역에서는 AngularJS 1의 사용이 계속 이어질 것

Others

JavaScript의 새로운 영역

Universal/Portable/Isomorphic JavaScript

Full stack language

React, Angular2, NodeJs, ...

Mobile APP

Cordova, React Native, ...

  

Desktop APP

NodeWebkit, Electron, ...

  

2016년에는...

  • Transpiler,polyfill의 사용으로
    브라우저 호환성에 대한 중요도 감소
  • 개발자들이 ES6을 적극적으로 사용할 것
  • 새로운 영역으로 JavaScript가 더 많이 활용 될 것.
    One Language == One Developer

운수대통

How to live

https://github.com/naver/egjs

여러분의 스타 하나가 저희에게는 큰 힘이 됩니다

Reference

감사합니다.


BY 손찬욱 / chanuk.son