RevolutionConf 2019 - Progressive Web Apps 101
•
2 gefällt mir•609 views
Progressive Web Apps 101 Progressive Web Apps (PWAs) bring features we expect from native apps to the mobile browser experience and are on track to becoming the new golden web standard. In this class, I'll walk you through the steps of transforming an existing website into a PWA from the bottom up and together, we'll explore the wide array of companies that have already benefited from the many enhancements PWAs offer. RevolutionConf June 6, 2019, from 3:30 pm to 4:15 pm Trader Interactive (Cape Henry)
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie RevolutionConf 2019 - Progressive Web Apps 101
Ähnlich wie RevolutionConf 2019 - Progressive Web Apps 101 (10)
Mehr von Frances Coronel
Mehr von Frances Coronel (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
RevolutionConf 2019 - Progressive Web Apps 101
- 1. @fvcproductions Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
- 2. @fvcproductions Hi, I’m Frances (your professor)! ! Software Engineer, Customer Acquisition
- 10. @fvcproductions
- 12. @fvcproductions
- 14. @fvcproductions
- 15. @fvcproductions Curriculum Why even? 🤔 (25%) Embracing the web Where even? 👀 (15%) Examples in real life How even? 🛠 (50%) The transformation process
- 16. @fvcproductions 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
- 17. @fvcproductions Disclaimers • I don't work for Google or Microsoft but I will be mentioning lots of Googly & Microsofty (?) stuff • Not gonna be talking about my work at Slack (sorry not sorry) • I'm not a developer advocate - I'm just a front end developer who likes to talk about front end stuff
- 18. @fvcproductions Why even? 🤔 @fvcproductions
- 19. @fvcproductions Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥
- 21. @fvcproductions
- 22. @fvcproductions
- 23. @fvcproductions PWA Checklist • Fast • Integrated • Reliable • Engaging
- 24. @fvcproductions Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive
- 31. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 33. @fvcproductionsThe State of LTE (Nov 2017)
- 38. @fvcproductions
- 44. @fvcproductions
- 45. @fvcproductions But what about the rest of the world... 🌍
- 46. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space @fvcproductions
- 47. @fvcproductions Emerging markets are becoming more crucial @fvcproductions
- 48. @fvcproductions ~53% of the world has access to the Internet now @fvcproductions
- 49. @fvcproductions Size of Twitter Clients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 1.3
- 50. @fvcproductions
- 57. @fvcproductions
- 58. @fvcproductions
- 60. @fvcproductions
- 63. @fvcproductions Where even? 👀 @fvcproductions
- 69. @fvcproductions Do the big companies support this though? 🤔
- 81. @fvcproductions Exploring Examples Starbucks 🍴🍔😋🍕🍗🌮 Instagram 📷🎥📸🎬 Forbes 📰🗞 Trivago ✈🌎🌍🌏 Flipkart 👜👕💸👔👚🛍 Hulu 🎥🍿🎬🎞📺 Slack 💬💼Q💡🧠 🤯
- 83. @fvcproductions
- 84. @fvcproductions
- 88. @fvcproductions
- 89. @fvcproductions
- 92. @fvcproductions No centralized hub @fvcproductions
- 93. @fvcproductions No centralized hub @fvcproductions
- 94. @fvcproductions Alex Russell "These apps aren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become ‘apps'."
- 99. @fvcproductions Same name! • Different Frances - they're married lol
- 100. @fvcproductions Alex Russell "These apps aren't packaged and deployed through stores, they're just websites that took all the right vitamins... They progressively become ‘apps'."
- 106. @fvcproductions
- 107. @fvcproductions 3. More support from Apple lol
- 108. @fvcproductions
- 109. @fvcproductions
- 110. @fvcproductions Ok but let me rant about Apple for a sec
- 111. @fvcproductions
- 121. @fvcproductions How even? 🛠 @fvcproductions
- 124. @fvcproductions
- 127. @fvcproductions
- 132. @fvcproductions Web UI (web.dev) @fvcproductions
- 142. @fvcproductions Static generators are cool tho
- 152. @fvcproductions sw.js 🌐 index.html 😌 manifest.json 📝 HTTPs 🔒 @fvcproductions
- 153. @fvcproductions
- 156. @fvcproductions 1. HTTPs 🔒 2. index.html 😌 3. manifest.json 📝 4. sw.js 🌐
- 162. @fvcproductions
- 163. @fvcproductions
- 172. @fvcproductions 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
- 177. @fvcproductions
- 181. @fvcproductions
- 188. @fvcproductions Remember 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
- 189. @fvcproductions 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs
- 194. @fvcproductions
- 198. @fvcproductions
- 199. @fvcproductions
- 200. @fvcproductions
- 201. @fvcproductions
- 204. @fvcproductions Takeaways Why even? 🤔 To deliver a native experience with the broad reach of the modern web Where even? 👀 Everywhere! How even? 🛠 A few vitamins
- 207. @fvcproductions 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/
- 208. @fvcproductions References 1. Hugo: https://gohugo.io/ 2. Go: https://golang.org/ 3. OneSignal: https://onesignal.com/ 4. Norfolk: https://www.wikiwand.com/ en/Naval_Station_Norfolk 5. Project Stream: https:// www.youtube.com/watch? time_continue=10&v=sE53eSbzxoU 6. Going Big: PWAs Come to Desktop and Chrome OS (Google I/O ’19): https:// www.youtube.com/watch? v=2KhRmFHLuhE 7. Verizon 5G: https://www.verizon.com/ about/our-company/5g 8. Microsoft & Google: https:// www.computerworld.com/article/ 3314746/mobile-apps/why-microsoft- and-google-love-progressive-web- apps.html 9. Google Fuschia: https:// www.wikiwand.com/en/Google_Fuchsia 10. Mobile OS Market Share: http:// gs.statcounter.com/os-market-share/ mobile/china 11. Manifest.json on MDN: https:// developer.mozilla.org/en-US/docs/ Mozilla/Add-ons/WebExtensions/ manifest.json 12. Microsoft - Progressive Web Overview: https://www.youtube.com/watch? v=ugAewC3308Y 13. Microsoft - Building Progressive Web Apps: https:// mybuild.techcommunity.microsoft.com/ sessions/77018? source=TechCommunity 14. What’s New with Chrome and the Web (Google I/O ’19): https:// www.youtube.com/watch? v=rUUazNIZW7I 15. Techqueria: https://techqueria.org 16. Tech Queens: https:// techqueenspod.com 17. Jukedeck: https://jukedeck.com 18. AARRR Pirate Metrics for Startups - How to Grow Revenue - Boardview: https://boardview.io/blog/startup- metrics-two-jackpot-moments-make- pirates-go-aarrr/
- 209. @fvcproductions Questions, comments or concerns? 💭 Let’s chat after. g
- 210. @fvcproductions These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
- 212. @fvcproductions Kudos • Music from Jukedeck - create your own at http://jukedeck.com
- 213. @fvcproductions Tech Queens • 6 episodes so far • If you're interested or know someone, head over to the website and fill out the contact form at the bottom • https://techqueenspod.com