Scenic City Summit 2018 - Progressive Web Apps 101
•
0 gostou•240 visualizações
I presented this at Scenic City Summit in Chattanooga, TN from 11:15 am to 12 pm on August 17th, 2018.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Scenic City Summit 2018 - Progressive Web Apps 101
Semelhante a Scenic City Summit 2018 - Progressive Web Apps 101 (20)
Mais de Frances Coronel
Mais de Frances Coronel (20)
Último
Último (20)
Scenic City Summit 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 🐳
- 6. Hi, I’m Frances (your professor)! ! @fvcproductions
- 9. Expectations • You have basic experience in HTML & JavaScript • You don't really know much about Progressive Web Apps (PWAs) • Why they exist • Where they are used • How to build one @fvcproductions
- 10. 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 @fvcproductions
- 11. Curriculum • Why even? 🤔 (25%) • Embracing the web • Where even? 👀 (15%) • Examples in real life • How even? 🛠 (50%) • The transformation process @fvcproductions
- 12. Why even? 🤔 @fvcproductions
- 13. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶🚗 @fvcproductions
- 15. @fvcproductions
- 16. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
- 17. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
- 22. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 23. @fvcproductionsThe State of LTE (Nov 2017)
- 24. @fvcproductions
- 25. @fvcproductions
- 28. @fvcproductions
- 29. @fvcproductions
- 32. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
- 33. @fvcproductions Emerging markets are becoming more crucial
- 34. @fvcproductions ~53% of the world has access to the Internet now
- 35. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
- 37. Where even? 👀 @fvcproductions
- 39. @fvcproductions
- 40. Exploring Examples • Starbucks 🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
- 41. @fvcproductions
- 42. @fvcproductions
- 43. @fvcproductions
- 46. @fvcproductions
- 48. No centralized hub @fvcproductions
- 49. No centralized hub @fvcproductions
- 50. @fvcproductions
- 51. @fvcproductions
- 52. @fvcproductions
- 53. How even? 🛠 @fvcproductions
- 55. @fvcproductions
- 56. @fvcproductions
- 59. @fvcproductions
- 74. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js
- 75. 1. HTTPs
- 78. @fvcproductions
- 79. @fvcproductions
- 80. 2. index.html
- 84. The Cocoon
- 85. 3. manifest.json
- 87. 3. manifest.json
- 88. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 91. 4. sw.js
- 95. @fvcproductions
- 102. Remember this 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
- 103. 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
- 104. The butterfly 🦋
- 105. @fvcproductions
- 110. @fvcproductions
- 111. @fvcproductions
- 113. @fvcproductions
- 115. Thanks for listening! 💛 @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! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com