This document discusses front-end development trends and progressive web apps (PWAs). It summarizes the adoption of newer JavaScript versions over time, and compares usage rates of different JavaScript libraries/flavors. It then discusses how PWAs combine the benefits of the web and apps by providing reliable, fast and engaging experiences to users. Examples of popular PWAs are provided. The document suggests that with features like service workers, the boundary between web and apps is blurring, and PWAs that leverage app-like qualities are becoming more attractive to deliver app-like experiences through the web.

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.