[tech meet up] 2018 프론트엔드 트렌드&인사이트

67
2018 프론트엔드 트렌드&인사이트 네이버 김태훈 Engineering Growth

Upload: naver-d2

Post on 16-Mar-2018

738 views

Category:

Engineering


10 download

TRANSCRIPT

Page 1: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

2018�프론트엔드 트렌드&인사이트�네이버�김태훈 Engineering�Growth

Page 2: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

about�me

김태훈�NAVER�Engineering�Growth�Member�of�Technical�Staff�

SADI�HTML5�초빙교수NHN�NEXT�WebUI�Basic�겸임교수�Project�Management�Professional(PMP)�

페이스북�프론트엔드개발그룹�운영�http://facebook.com/groups/webfrontend

Page 3: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 4: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

String�padding

Page 5: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Object.values

Page 6: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Object.entries

Page 7: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Object.getOwnPropertyDescriptors

Page 8: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Trailing�commas�in�function�parameter�lists�and�calls

Page 9: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Async�functions

Page 10: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 11: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 12: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 13: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 14: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 15: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 16: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

프로그래시브웹앱�속성

프로그래시브�Progressive�

브라우저에�상관없이�모든�사용자에게�동작�

반응성�Responsive�

어떠한�폼�팩터에도�맞을�것�

네트워크�연결과�독립적�Connectivity�independent�

Service�Worker를�통해�오프라인에서도�동작할�것�

앱과�비슷한�동작�App-like-interactions�

앱과�같은�네비게이션과�동작을�하기�위해�

Shell�과�컨텐츠를�합친�어플리케이션�모델을�사용�

최신버전�유지�Fresh�

Service�Worker�를�통해�보이지는�않지만�언제나�최신�버전을�유지할�것

Page 17: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

프로그래시브웹앱�속성

안전�Safe�

TLS�(Service�Worker�의�요구사항)를�통해�스누핑을�방지할�것�

검색�가능�Discoverable�

W3C�Manifest�를�도입하여�"어플리케이션"으로써�인식되고 검색�엔진에�의해�등록�가능할�것�

재방문�Re-engageable�

OS의�UI를�활용하여�사용자를�다시�방문하게�ex)�Push�알림�

설치�가능�Installable�

앱�스토어가�아니라�브라우저�기반으로�홈화면에�아이콘�추가�

연결�가능�Linkable�

설치조차도�귀찮다면�앱�설치�없이도�사용�가능하고�공유하기�편할�것�

소셜�네트워크에서도�URL�의�힘은�강력하다.

Page 18: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Web�App�Manifest

Page 19: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Add�to�Home�Screen�Banner

Page 20: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Service�Worker�for�offline�caching

Page 21: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Background�Syncronisation,�Web�Bluetooth��...

Push�Notifications�for�re-engagement

Layering�in�advanced�features

Page 22: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Web�Share�API

Page 23: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Service�Workers

Page 24: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Service�Workers

Page 25: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Service�Workers

Page 26: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 27: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 28: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 29: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 30: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 31: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

AMP

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

Page 32: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

...�35�more

AMP�Extended�Component

Page 33: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

/*�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

Page 34: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

/*�AMP�확장�컴포넌트�-�lightbox�*/�

<amp-image-lightbox�id="lightbox1"�

������layout="nodisplay">�

</amp-image-lightbox>

AMP-IMAGE-LIGHTBOX

Page 35: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

/*�AMP�확장�컴포넌트�-�사이드바�*/�

<amp-sidebar�id='sidebar'�

������layout="nodisplay"�

������side="right">�...

AMP-SIDEBAR

Page 36: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 37: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

https://youtu.be/e6slMlFgdCQ

Page 38: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

AMP�1년여�굉장히�성공적�

86만여개�도메인에�17억개의�AMP�페이지�생성�

매주�3500만개의�AMP가�생성�

PWA를�결합하기위한�시도�

컴포넌트�방식�혹은�iframe/shadow�DOM�

<amp-bind>�

데이터를�바인딩하기�위한�컴포넌트�지원�

프로그램�패러다임을�얻고�플랫폼으로�발돋움

AMP�NEXT

Page 39: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

개선된�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

Page 40: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/

Page 41: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

WEB�ASSEMBLY

웹브라우저에서�돌릴�수�있는�새로운�형식의�코드�

컴팩트한�바이너리�포맷을�제공하는�저수준�어셈블리�언어�

C/C++�등과�같은�언어로�작성하고�컴파일해�웹에서�실행�

또한�자바스크립트와�나란히�돌아가면서�서로를�보완�

2017년�상반기내�대다수의�브라우저들에서�프리뷰�지원�목표

Page 42: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 43: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 44: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

WEB�ASSEMBLY

빠르고,�효과적이고,�이식성이�좋을�것�

여러종류의�플랫폼�위에서�거의�네이티브에�가까운�속도로�실행될�수�있음�

읽기�쉽고�디버깅이�가능할�것�

저수준�어셈블리�언어지만,�작성하고,�보고,�디버깅할�수는�있도록,�

사람이�충분히�읽을�수�있는�수준의�텍스트�포맷을�갖고�있다�

안전함을�유지할�것�

샌드박싱된�실행환경에서�안전하게�돌아갈�수�있도록�설계되�

브라우저의�동일한�출처(same-origin)와�권한정책을�강제�

웹을�망가뜨리지�않을�것�

다른�웹�기술과�마찰없이�사용되면서�하위호환성을�관리할�수�있도록�설계

Page 45: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

WEB�ASSEMBLY

3D�게임이나,�가상/증강현실,�영상처리,�이미지/비디오�편집�

그�외�네이티브�성능을�필요로하는�여러�분야의�사례에서�

현재의�웹은�성능상의�문제에�부딪힘�

이런�문제를�웹어셈블리를�통해�해결하면서�자바스크립트를�보완�

웹어셈블리�코드를�다운로드하고,�컴파일하고,�돌리는�일련의�과정을�자바스크립트로�제어�

<script�type='module'>같이��ES6�모듈처럼�사용

Page 46: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 47: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

https://editor.construct.net/

Page 48: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 49: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

ngular�by�google2016년�9월�시작�(AngularJS는�2010년�10월)�/�최근�버전�5�출시�

TypeScript(by�MicroSoft)�기반�프레임워크�

Zones.js,�Change�Detection�등을�통한�성능�향상�

RxJs를�통한�리액티브�프로그래밍�

25,000�stars�/�463�contributors�

google.�wix,�weather.com�forbes�등에서�사용�

MIT�license

Page 50: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

React�by�facebook2013년�3월�시작�안정적인�API�

a�JavaScript�library�for�building�user�interfaces�

최근��React�Fiber를�통해�렌더링�속도�개선�

커뮤니티의�전폭적�지원,�많은�베스트�프랙티스가�공유�

react-router,�Flux/Redux�등의�아키텍쳐와�함꼐�실질적인�프레임워크로�사용�

70,000�stars�/�1,000�contributors�

Airbnb,�Uber,�Netflix,�Twitter�등에서�사용�

MIT�license

Page 51: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

ue�by�Evan�You2014년�2월�시작�2016년�빠르게�성장�

인터랙티브�인터페이스�구축을위한�직관적이고,�빠르고,�구성�가능한�MVVM�

Alibaba,�Baidu,�Expedia,�Nintendo,�GitLab�등�사용�

60,000�stars�/�120�contributors�

MIT�license�

Page 52: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 53: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

선택�포인트Angular는�All-in-One�프레임워크로�라이브러리�선택�비용�절감�

React,�Vue는�사실상�프레임워크지만�라이브러리�조합을�통해�유연한�개발�가능�

JSX,�템플릿간�의견이�다양하지만�취향�문제�

HTML�like한�개발이�좋다면�Angular�

JSX를�통해�응집도를�높히고�컨포넌트�관리�비용을�줄이고�싶다면�React�

TypeScript�버프(개발도구�지원,�데코레이터�등)를�누리고�싶다면�Angular�

하지만�React�+�TypeScript�조합도�최근�많이�사용,�flow도�있음�

Angular는�TypeScript,��RxJS등�러닝커브가�있다고�하지만�배우고�나면�큰�도움이�됨�

React는�오랜�기간�쌓인�베스트�프랙티스가�있음�

각�프레임워크의�퍼포먼스�&�사이즈는�크게�의미�없음�

다양한�도구를�통해�최적화�가능함�

각�프레임워크의�컨셉을�파악하고��

프로젝트에�맞게�선택하자

https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176

Page 54: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

*https://developers.google.com/web/fundamentals/payments/deep-dive-into-payment-request

Page 55: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 56: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 57: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 58: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 59: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 60: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 61: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

Weblas�GPU�accelerated�Javascript,�numerical�computing�in�the�browser�=>�Currently�fastest�in�WebGL!�Benchmark�turbo.js�WebGL�with�CPU�fallback-�Fairly�recent,�fairly�complex�to�use�gpu.js�GPU�accelerated�Javascript�-�Fairly�recent,�no�NN�example�yet�Tensorfire�-�Very�recent�library,�no�Github�currently,�found�an�NPM�library�Deeplearn.js�Newest!!�library�from�members�of�Google�brain�

GPU�use�like�WebGL

WEBGPU�API�(Safari�Only)WebDNN�Works�only�on�Safari,�defaults�to�WebAssembly�in�other�browsers

Page 62: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 63: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

NAVER�egjs�2.0�http://naver.github.io/egjs/

네이버의�노하우가�축적된�모던�웹�라이브러리,�오픈소스(PR환영!)�UI인터렉션,�이펙트,�유틸리티�등으로�구성,�네이버의�여러�서비스에서�사용�flicking,�visible,�infiniteGrid�등등�컴포넌트�제공,�빠른�성능과�안정성�제공�

jQuery�의존성을�버리고�각�컴포넌트가�독립적인�모듈로�운영�VR�컴포넌트�추가

Page 64: [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Page 65: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

http://delapuente.github.io/presentations/state-of-the-web-17/#/

Page 66: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

References

https://codeburst.io/the-web-share-api-is-here-cb651d84eccd�

https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1�

https://www.youtube.com/watch?v=_srJ7eHS3IM�

https://frontendfoc.us/link/31488/aadc74bc5f�

https://www.youtube.com/watch?v=7rx9fSUG8H0�

https://ayushgp.github.io/html-web-components-using-vanilla-js/�

https://redfin.engineering/i-watched-all-of-the-chrome-dev-summit-2017-videos-so-you-dont-have-to-9b62a593c3cb�

https://blog.nrwl.io/a-new-day-for-pwa-e7c3342b753c�

http://delapuente.github.io/presentations/state-of-the-web-17/#/�

https://bondifrench.github.io/ml-in-js/�

Page 67: [Tech meet up] 2018 프론트엔드 트렌드&인사이트

#thank�you

Atwood's�Law�Any�application�that�can�be�written�in�JavaScript,�will�eventually�be�written�in�JavaScript.