GDG SF Meetup - Progressive Web Apps 101
•
1 recomendación•225 vistas
Presented August 15th, 2018 at 6:30 pm till 7:30 pm at Google in SF as part of a Google Developers Group SF Meetup. Talk: Progressive Web Apps 101 Description: I’ll walk you through the steps of transforming an existing website into a Progressive Web App from the bottom up. Together we’ll also explore the wide array of companies that have already benefited from the many enhancements PWAs offer. More event details: https://www.meetup.com/google-developer-group-san-francisco/events/251833049/
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a GDG SF Meetup - Progressive Web Apps 101
Similar a GDG SF Meetup - Progressive Web Apps 101 (20)
Más de Frances Coronel
Más de Frances Coronel (20)
Último
Último (20)
GDG SF Meetup - 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 🐳
- 4. Hi, I’m Frances (your professor)! ! Software Engineer @slackhq @fvcproductions
- 5. Norfolk, VA
- 7. Curriculum • Why even? 🤔 (25%) • Embracing the web • Where even? 👀 (15%) • Examples in real life • How even? 🛠 (50%) • The transformation process @fvcproductions
- 8. 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 build one
- 9. Disclaimers • I don't work for Google but I will be mentioning lots of Googly stuff • Slack does not have a PWA • I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff
- 10. Why even? 🤔 @fvcproductions
- 11. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶🚗 @fvcproductions
- 13. @fvcproductions
- 14. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
- 15. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
- 20. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 21. PWAs & Privilege
- 22. @fvcproductionsThe State of LTE (Nov 2017)
- 25. @fvcproductions
- 26. @fvcproductions
- 27. @fvcproductions
- 28. @fvcproductions
- 29. @fvcproductions
- 30. @fvcproductions
- 31. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
- 32. @fvcproductions Emerging markets are becoming more crucial
- 33. @fvcproductions ~53% of the world has access to the Internet now
- 34. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
- 36. Where even? 👀 @fvcproductions
- 38. @fvcproductions
- 39. Exploring Examples • Starbucks 🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
- 40. @fvcproductions
- 41. @fvcproductions
- 42. @fvcproductions
- 45. @fvcproductions
- 47. No centralized hub @fvcproductions
- 48. No centralized hub @fvcproductions
- 49. @fvcproductions
- 50. @fvcproductions
- 51. @fvcproductions
- 52. How even? 🛠 @fvcproductions
- 55. @fvcproductions
- 56. @fvcproductions
- 58. @fvcproductions
- 60. Shameless Plug 🤫
- 61. @fvcproductions
- 75. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js
- 76. 1. HTTPs
- 77. 3. sw.js 2. index.html 1. manifest.json 4. HTTPs
- 79. @fvcproductions
- 80. @fvcproductions
- 81. 2. index.html
- 84. 3. manifest.json
- 85. 3. manifest.json
- 86. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 89. 4. sw.js
- 92. @fvcproductions
- 99. Remember this 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
- 100. 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
- 101. @fvcproductions
- 106. @fvcproductions
- 110. @fvcproductions
- 112. @fvcproductions
- 113. FIN @fvcproductions
- 114. Thanks for listening! 💛 @fvcproductions
- 115. Shout out to Paul H., Armon A. & Rafa for letting me know what they wanted to hear about! 👌 @fvcproductions
- 116. 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 @fvcproductions
- 117. These slides will be shared ASAP to Meetup! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com