웹 최신 트렌드 2018 발표 자료. 프런트엔드 개발에 있어 커뮤니티 동향과 PWA그리고 SSR의 필요성에 대해 발표함.

1. 프런트엔드 개발,
지금과 다음

2. ECMAScript

3. >> >>

4. 96%97% 98% 98% 99%

9. 세대 전환의 시점
하지만 우린 언제나 구 버전 브라우저와의 전쟁을...

10. JavaScript Flavors

11. The State Of JavaScript 2016

12. The State Of JavaScript 2018

13. Used it before, would use again
ECMAScript6
Plain JavaScript
TypeScript
Elm
ClojureScript
Flow
Reason
CoffeScript
2016 2017
74% 87%
79% 53%
21% 34%
3% 5%
2% 2%
unknown 10%
unknown 0.5%
unknown6%
(+13%)
(+13%)
18%
62%
Growth Rate

15. Type hinting
Refactor
Efficient collaboration
Better structural presentation

16. DEMO

24. DEMO

25. https://youtu.be/M3BM9TB-8yA?t=19m44s

26. Progressive Web App

27. 웹 경험을 탈피한 앱 스러운 웹
웹의 장점과 앱의 장점을 결합한 환경

28. 13%
Mobile web
87%
Apps
https://www.youtube.com/watch?v=z2JgN6Ae-Bo

29. Top 3 apps Other apps
https://www.youtube.com/watch?v=z2JgN6Ae-Bo
78% 22%

30. https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

31. https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

32. https://www.youtube.com/watch?v=z2JgN6Ae-Bo
평균적으로
사용자가
한달에
설치하는
앱의 갯수

33. https://www.youtube.com/watch?v=z2JgN6Ae-Bo
평균적으로
사용자가
한달에
설치하는
앱의 갯수
0

34. https://www.comscore.com/Insights/Presentations-and-Whitepapers/2017/The-2017-US-Mobile-App-Report

35. Integrated Experiences Manifest, Service worker, Autofill, Payment API, …
Reliable Experiences Service Worker
Engaging Experiences Material UI(Ripple), Push API, Notification
Secure Experiences HTTPS

36. Flipkart
https://www.flipkart.com/

37. TwitterLight
https://mobile.twitter.com/

38. Llumino
https://pwa.llumino.app/

39. https://www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here

40. https://www.windowscentral.com/first-batch-windows-10-progressive-web-apps-here

41. https://www.monterail.com/blog/pwa-for-apple-ios

42. 웹과 앱의
경계는 갈수록
얇아지고

43. 앱의 장점을
품은 웹은
매력적

44. Single Page Application

45. 반응성. PWA를 더 PWA 답게
Engaging Experiences

46. VS

47. &

48. Perfect?

49. Only client side rendering of Toss Service
CPU 4x slowdown

50. Only client side rendering of Toss Service
CPU 4x slowdown

51. CSR SSR

53. PWA, SPA + SSR

54. Thank you.