GDG DevFest 2018 - Progressive Web Apps 101
0 likes688 views
The document outlines a curriculum for a course on Progressive Web Apps (PWAs), targeting individuals with basic HTML and JavaScript knowledge. It discusses the importance, benefits, and implementation of PWAs, highlighting their accessibility, speed, and engaging nature. The presentation also provides examples of popular PWAs and includes a checklist for developers to ensure readiness.
GDG DevFest 2018 - Progressive Web Apps 101
- 1. Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
- 2. Hi, I’m Frances (your professor)! ! Software Engineer @SlackHQ @fvcproductions
- 5. Hi, I’m Frances (your professor)! ! Software Engineer @SlackHQ @fvcproductions
- 8. Curriculum • Why even? 🤔 (25%) • Embracing the web • Where even? 👀 (15%) • Examples in real life • How even? 🛠 (50%) • The transformation process @fvcproductions
- 9. Expectations • You have basic experience in HTML & JavaScript • You don't know too much about these Progressive Web Apps (PWAs) • Like why they exist • Or where they are used • Or even how to implement one @fvcproductions
- 10. Disclaimers • I don't work for Google but I will be mentioning lots of Googly stuff • Not gonna be talking about Slack work • I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff @fvcproductions
- 11. @fvcproductions
- 12. Why even? 🤔 @fvcproductions
- 13. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥 @fvcproductions
- 15. @fvcproductions
- 16. @fvcproductions
- 17. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
- 18. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
- 23. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 25. @fvcproductionsThe State of LTE (Nov 2017)
- 28. @fvcproductions
- 29. @fvcproductions
- 31. @fvcproductions
- 32. @fvcproductions
- 33. @fvcproductions
- 36. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
- 37. @fvcproductions Emerging markets are becoming more crucial
- 38. @fvcproductions ~53% of the world has access to the Internet now
- 39. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions 0.6
- 41. @fvcproductions
- 42. @fvcproductions
- 43. @fvcproductions
- 45. Where even? 👀 @fvcproductions
- 47. @fvcproductions
- 48. Exploring Examples • Starbucks 🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
- 49. @fvcproductions
- 50. @fvcproductions
- 51. @fvcproductions
- 54. @fvcproductions
- 56. No centralized hub @fvcproductions
- 57. No centralized hub @fvcproductions
- 58. @fvcproductions
- 59. @fvcproductions
- 60. @fvcproductions
- 71. How even? 🛠 @fvcproductions
- 72. Testing for PWA Readiness 💡 @fvcproductions
- 74. @fvcproductions
- 75. @sf_gdg
- 78. @fvcproductions
- 79. @fvcproductions
- 83. @fvcproductions
- 84. @fvcproductions
- 85. @fvcproductions
- 86. @fvcproductions
- 87. @fvcproductions
- 88. @fvcproductions
- 89. @fvcproductions
- 94. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js @fvcproductions
- 96. @fvcproductions
- 97. @fvcproductions
- 98. @fvcproductions
- 99. @fvcproductions
- 103. 3. manifest.json
- 105. @fvcproductions
- 106. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 107. @fvcproductions
- 112. @fvcproductions
- 118. Remember this 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
- 119. 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
- 121. @fvcproductions
- 126. @fvcproductions
- 130. @fvcproductions
- 132. @fvcproductions
- 133. Takeaways Why even? 🤔 To deliver a native experience with the broad reach of the modern web Where even? 👀 Everywhere! How even? 🛠 A few vitamins @fvcproductions
- 134. FIN @fvcproductions
- 135. Thanks for listening! 💛 @fvcproductions
- 136. References 1. Slack website: https://slack.com 2. Progressive Web Apps Checklist: https:// developers.google.com/web/progressive-web-apps/ checklist 3. US Design System Standards: https:// designsystem.digital.gov/components/typography/ 4. PWAs: building bridges to mobile, desktop, and native (Google I/O ’18) : https://www.youtube.com/watch? v=NITk4kXMQDw 5. Tooling for Progressive Web Apps: https:// www.youtube.com/watch?v=_CO3XZj00no 6. OneSignal: The State of LTE: https://opensignal.com/ reports/2017/11/state-of-lte 7. Syntax Highlighting: https://carbon.now.sh 8. Workbox: https://developers.google.com/web/tools/ workbox/ 9. Comscore 2017 US Mobile App Report: https:// www.comscore.com/Insights/Presentations-and- Whitepapers/2017/The-2017-US-Mobile-App-Report 10. Music from Jukedeck - create your own at http:// jukedeck.com 11. Speedtest 2017 US Market Report by Ookla: http:// www.speedtest.net/reports/united-states 12. Jopwell Stock Photos: https://www.jopwell.com 13. Service workers explained: https://www.netlify.com/ blog/2017/10/31/service-workers-explained/ 14. App revenue climbed 35 percent to $60 billion in 2017: https://techcrunch.com/2018/01/05/app- revenue-climbed-35-percent-to-60-billion-in-2017 15. Shrinking APKs, growing installs: https://medium.com/ googleplaydev/shrinking-apks-growing- installs-5d3fcba23ce2 16. We Are Social - Digital in 2018 Report: https:// wearesocial.com/us/blog/2018/01/global-digital- report-2018 17. Hugoma Theme: https://github.com/fvcproductions/ hugoma 18. PWAs 101 (same title lol): https:// medium.freecodecamp.org/progressive-web- apps-101-the-what-why-and-how-4aa5e9065ac2 19. Build the Next Generation of Mobile Web: https:// www.youtube.com/watch?v=3tb-1MWg44Y 20.YouTube: Trivago, Forbes and Flipkart Video 21. PWA Builder: https://www.pwabuilder.com/ 22. Netlify: https://netlify.com 23. Static Site Generators: https://www.staticgen.com/ 24. Gatsby: https://www.gatsbyjs.org/ 25. React: https://reactjs.org/ 26.Hugo: https://gohugo.io/ 27. Go: https://golang.org/ 28.OneSignal: https://onesignal.com/ 29.Norfolk: https://www.wikiwand.com/en/ Naval_Station_Norfolk 30.Project Stream: https://www.youtube.com/watch? time_continue=10&v=sE53eSbzxoU 31. Verizon 5G: https://www.verizon.com/about/our- company/5g 32. Microsoft & Google: https://www.computerworld.com/ article/3314746/mobile-apps/why-microsoft-and- google-love-progressive-web-apps.html 33. Google Fuschia: https://www.wikiwand.com/en/ Google_Fuchsia 34.Mobile OS Market Share: http://gs.statcounter.com/ os-market-share/mobile/china @fvcproductions
- 137. Questions, comments or concerns? 💭 @fvcproductions
- 138. These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
- 139. slack.com/careers