[Tech meet up] 2018 프론트엔드 트렌드&인사이트
•
10 likes•2,062 views
[Tech meet up] 2018 프론트엔드 트렌드&인사이트 - 김태훈 NAVER
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to [Tech meet up] 2018 프론트엔드 트렌드&인사이트
Similar to [Tech meet up] 2018 프론트엔드 트렌드&인사이트 (20)
More from NAVER D2
More from NAVER D2 (20)
[Tech meet up] 2018 프론트엔드 트렌드&인사이트
- 1. 2018 프론트엔드 트렌드&인사이트 네이버 김태훈 Engineering Growth
- 2. about me 김태훈 NAVER Engineering Growth Member of Technical Staff SADI HTML5 초빙교수 NHN NEXT WebUI Basic 겸임교수 Project Management Professional(PMP) 페이스북 프론트엔드개발그룹 운영 http://facebook.com/groups/webfrontend
- 8. Trailing commas in function parameter lists and calls
- 16. 프로그래시브웹앱 속성 프로그래시브 Progressive 브라우저에 상관없이 모든 사용자에게 동작 반응성 Responsive 어떠한 폼 팩터에도 맞을 것 네트워크 연결과 독립적 Connectivity independent Service Worker를 통해 오프라인에서도 동작할 것 앱과 비슷한 동작 App-like-interactions 앱과 같은 네비게이션과 동작을 하기 위해 Shell 과 컨텐츠를 합친 어플리케이션 모델을 사용 최신버전 유지 Fresh Service Worker 를 통해 보이지는 않지만 언제나 최신 버전을 유지할 것
- 17. 프로그래시브웹앱 속성 안전 Safe TLS (Service Worker 의 요구사항)를 통해 스누핑을 방지할 것 검색 가능 Discoverable W3C Manifest 를 도입하여 "어플리케이션"으로써 인식되고 검색 엔진에 의해 등록 가능할 것 재방문 Re-engageable OS의 UI를 활용하여 사용자를 다시 방문하게 ex) Push 알림 설치 가능 Installable 앱 스토어가 아니라 브라우저 기반으로 홈화면에 아이콘 추가 연결 가능 Linkable 설치조차도 귀찮다면 앱 설치 없이도 사용 가능하고 공유하기 편할 것 소셜 네트워크에서도 URL 의 힘은 강력하다.
- 18. Web App Manifest
- 19. Add to Home Screen Banner
- 20. Service Worker for offline caching
- 21. Background Syncronisation, Web Bluetooth ... Push Notifications for re-engagement Layering in advanced features
- 22. Web Share API
- 23. Service Workers
- 24. Service Workers
- 25. Service Workers
- 31. AMP AMP가 제공하는 컴포넌트를 사용해 뛰어난 퍼포먼스의 페이지 개발 JS 필요없음. 커스텀엘리먼트를 사용하기 때문에 HTML 요소처럼 사용 가능 AMP로 만든 페이지와 리소스는 구글 CDN에 저장 구글 검색 결과에서 클릭시 딜레이없이 페이지를 보여줌
- 32. ... 35 more AMP Extended Component
- 33. /* 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
- 34. /* AMP 확장 컴포넌트 - lightbox */ <amp-image-lightbox id="lightbox1" layout="nodisplay"> </amp-image-lightbox> AMP-IMAGE-LIGHTBOX
- 35. /* AMP 확장 컴포넌트 - 사이드바 */ <amp-sidebar id='sidebar' layout="nodisplay" side="right"> ... AMP-SIDEBAR
- 38. AMP 1년여 굉장히 성공적 86만여개 도메인에 17억개의 AMP 페이지 생성 매주 3500만개의 AMP가 생성 PWA를 결합하기위한 시도 컴포넌트 방식 혹은 iframe/shadow DOM <amp-bind> 데이터를 바인딩하기 위한 컴포넌트 지원 프로그램 패러다임을 얻고 플랫폼으로 발돋움 AMP NEXT
- 39. 개선된 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
- 41. WEB ASSEMBLY 웹브라우저에서 돌릴 수 있는 새로운 형식의 코드 컴팩트한 바이너리 포맷을 제공하는 저수준 어셈블리 언어 C/C++ 등과 같은 언어로 작성하고 컴파일해 웹에서 실행 또한 자바스크립트와 나란히 돌아가면서 서로를 보완 2017년 상반기내 대다수의 브라우저들에서 프리뷰 지원 목표
- 44. WEB ASSEMBLY 빠르고, 효과적이고, 이식성이 좋을 것 여러종류의 플랫폼 위에서 거의 네이티브에 가까운 속도로 실행될 수 있음 읽기 쉽고 디버깅이 가능할 것 저수준 어셈블리 언어지만, 작성하고, 보고, 디버깅할 수는 있도록, 사람이 충분히 읽을 수 있는 수준의 텍스트 포맷을 갖고 있다 안전함을 유지할 것 샌드박싱된 실행환경에서 안전하게 돌아갈 수 있도록 설계되 브라우저의 동일한 출처(same-origin)와 권한정책을 강제 웹을 망가뜨리지 않을 것 다른 웹 기술과 마찰없이 사용되면서 하위호환성을 관리할 수 있도록 설계
- 45. WEB ASSEMBLY 3D 게임이나, 가상/증강현실, 영상처리, 이미지/비디오 편집 그 외 네이티브 성능을 필요로하는 여러 분야의 사례에서 현재의 웹은 성능상의 문제에 부딪힘 이런 문제를 웹어셈블리를 통해 해결하면서 자바스크립트를 보완 웹어셈블리 코드를 다운로드하고, 컴파일하고, 돌리는 일련의 과정을 자바스크립트로 제어 <script type='module'>같이 ES6 모듈처럼 사용
- 49. ngular by google 2016년 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
- 50. React by facebook 2013년 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
- 51. ue by Evan You 2014년 2월 시작 2016년 빠르게 성장 인터랙티브 인터페이스 구축을위한 직관적이고, 빠르고, 구성 가능한 MVVM Alibaba, Baidu, Expedia, Nintendo, GitLab 등 사용 60,000 stars / 120 contributors MIT license
- 53. 선택 포인트 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
- 61. 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
- 63. NAVER egjs 2.0 http://naver.github.io/egjs/ 네이버의 노하우가 축적된 모던 웹 라이브러리, 오픈소스(PR환영!) UI인터렉션, 이펙트, 유틸리티 등으로 구성, 네이버의 여러 서비스에서 사용 flicking, visible, infiniteGrid 등등 컴포넌트 제공, 빠른 성능과 안정성 제공 jQuery 의존성을 버리고 각 컴포넌트가 독립적인 모듈로 운영 VR 컴포넌트 추가
- 67. #thank you Atwood's Law Any application that can be written in JavaScript, will eventually be written in JavaScript.