Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GDG DevFest 2018 - Progressive Web Apps 101

113 views

Published on

I presented these slides at GDG DevFest in San Francisco, CA from 3 pm to 4 pm on Sunday - October 28, 2018.

GDG DevFest is a one-day community-run event designed to facilitate the exchange of ideas between developers of all skill levels and backgrounds.

Talk: This class walks you through the steps of transforming an existing website into a Progressive Web App from the bottom up. Together we’ll also explore the vast array of companies that have already benefited from the many enhancements PWAs offer and why they’re so successful in emerging markets.

https://devfestsf.com

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GDG DevFest 2018 - Progressive Web Apps 101

  1. 1. Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
  2. 2. Hi, I’m Frances (your professor)! ! Software Engineer @SlackHQ @fvcproductions
  3. 3. @fvcproductions
  4. 4. slack.com/careers@fvcproductions
  5. 5. Hi, I’m Frances (your professor)! ! Software Engineer @SlackHQ @fvcproductions
  6. 6. Norfolk, VA @fvcproductions
  7. 7. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  8. 8. Curriculum • Why even? 🤔 (25%) • Embracing the web • Where even? 👀 (15%) • Examples in real life • How even? 🛠 (50%) • The transformation process @fvcproductions
  9. 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. 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. 11. @fvcproductions
  12. 12. Why even? 🤔 @fvcproductions
  13. 13. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥 @fvcproductions
  14. 14. The mobile web. 🌐📱 @fvcproductions
  15. 15. @fvcproductions
  16. 16. @fvcproductions
  17. 17. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
  18. 18. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
  19. 19. Integrated @fvcproductions
  20. 20. Reliable @fvcproductions
  21. 21. Engaging @fvcproductions
  22. 22. In Summary @fvcproductions
  23. 23. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
  24. 24. PWAs & Privilege @fvcproductions
  25. 25. @fvcproductionsThe State of LTE (Nov 2017)
  26. 26. 4GB Availability Worldwide @fvcproductions
  27. 27. 4GB Speed Worldwide @fvcproductions
  28. 28. @fvcproductions
  29. 29. @fvcproductions
  30. 30. @fvcproductions
  31. 31. @fvcproductions
  32. 32. @fvcproductions
  33. 33. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
  34. 34. @fvcproductions Emerging markets are becoming more crucial
  35. 35. @fvcproductions ~53% of the world has access to the Internet now
  36. 36. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions 0.6
  37. 37. Write once, deploy everywhere! @fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions
  40. 40. @fvcproductions
  41. 41. Write once, deploy everywhere! @fvcproductions
  42. 42. Where even? 👀 @fvcproductions
  43. 43. EVERYWHERE! 😳😮😯😲 @fvcproductions
  44. 44. @fvcproductions
  45. 45. Exploring Examples • Starbucks 🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
  46. 46. @fvcproductions
  47. 47. @fvcproductions
  48. 48. @fvcproductions
  49. 49. Forbes@fvcproductions
  50. 50. Trivago@fvcproductions
  51. 51. @fvcproductions
  52. 52. Downsides… 😓 @fvcproductions
  53. 53. No centralized hub @fvcproductions
  54. 54. No centralized hub @fvcproductions
  55. 55. @fvcproductions
  56. 56. @fvcproductions
  57. 57. @fvcproductions
  58. 58.  @fvcproductions
  59. 59. K @fvcproductions
  60. 60. L @fvcproductions
  61. 61. M @fvcproductions
  62. 62. N @fvcproductions
  63. 63. N @fvcproductions
  64. 64. O @fvcproductions
  65. 65. P @fvcproductions
  66. 66. Q @fvcproductions
  67. 67. 🌎 @fvcproductions
  68. 68. How even? 🛠 @fvcproductions
  69. 69. Testing for PWA Readiness 💡 @fvcproductions
  70. 70. Lighthouse @fvcproductions
  71. 71. @fvcproductions
  72. 72. @sf_gdg
  73. 73. Shameless Plug 🤫 @fvcproductions
  74. 74. @fvcproductions
  75. 75. @fvcproductions
  76. 76. The Transformation 🦋
  77. 77. hugoma.fvcproductions.com @fvcproductions @fvcproductions
  78. 78. @fvcproductions
  79. 79. @fvcproductions
  80. 80. @fvcproductions
  81. 81. @fvcproductions
  82. 82. @fvcproductions
  83. 83. @fvcproductions
  84. 84. @fvcproductions
  85. 85. sw.js index.html manifest.json HTTPs
  86. 86. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js @fvcproductions
  87. 87. 1. HTTPs @fvcproductions
  88. 88. @fvcproductions
  89. 89. @fvcproductions
  90. 90. @fvcproductions
  91. 91. @fvcproductions
  92. 92. 2. index.html @fvcproductions
  93. 93. index.html <head></head> @fvcproductions
  94. 94. @fvcproductions index.html <body></body>
  95. 95. 3. manifest.json
  96. 96. 3. /manifest.json @fvcproductions
  97. 97. @fvcproductions
  98. 98. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
  99. 99. @fvcproductions
  100. 100. 4. sw.js @fvcproductions
  101. 101. Offline-first @fvcproductions
  102. 102. @fvcproductions
  103. 103. @fvcproductions webpack.config.js
  104. 104. webpack.config.js @fvcproductions
  105. 105. GenerateSW() @fvcproductions
  106. 106. generated sw.js @fvcproductions
  107. 107. sw.js file manifest @fvcproductions
  108. 108. Remember this 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
  109. 109. 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
  110. 110. @fvcproductions @fvcproductions
  111. 111. @fvcproductions
  112. 112. manifest.json index.html sw.js @fvcproductions Only 3 files needed! 🦄
  113. 113. Web push notifications?
  114. 114. Engaging? @fvcproductions
  115. 115. @fvcproductions
  116. 116. @fvcproductions
  117. 117. TLDR; @fvcproductions
  118. 118. @fvcproductions
  119. 119. 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
  120. 120. FIN @fvcproductions
  121. 121. Thanks for listening! 💛 @fvcproductions
  122. 122. 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
  123. 123. Questions, comments or concerns? 💭 @fvcproductions
  124. 124. These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  125. 125. slack.com/careers

×