Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

RevolutionConf 2019 - Progressive Web Apps 101

241 visualizaciones

Publicado el

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)

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

RevolutionConf 2019 - Progressive Web Apps 101

  1. 1. @fvcproductions Progressive Web Apps 101 Prerequisites: HTML 101 & JavaScript 101 @fvcproductions
  2. 2. @fvcproductions Hi, I’m Frances (your professor)! ! Software Engineer, Customer Acquisition
  3. 3. @fvcproductions Call me Ishmael.
  4. 4. @fvcproductions
  5. 5. @fvcproductions
  6. 6. @fvcproductions
  7. 7. @fvcproductions Norfolk, VA @fvcproductions
  8. 8. @fvcproductions@fvcproductions
  9. 9. @fvcproductions@fvcproductions
  10. 10. @fvcproductions
  11. 11. @fvcproductions@fvcproductions
  12. 12. @fvcproductions
  13. 13. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  14. 14. @fvcproductions
  15. 15. @fvcproductions Curriculum Why even? 🤔 (25%) Embracing the web Where even? 👀 (15%) Examples in real life How even? 🛠 (50%) The transformation process
  16. 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. 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. 18. @fvcproductions Why even? 🤔 @fvcproductions
  19. 19. @fvcproductions Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥
  20. 20. @fvcproductions The mobile web. 🌐📱
  21. 21. @fvcproductions
  22. 22. @fvcproductions
  23. 23. @fvcproductions PWA Checklist • Fast • Integrated • Reliable • Engaging
  24. 24. @fvcproductions Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive
  25. 25. @fvcproductions Integrated @fvcproductions
  26. 26. @fvcproductions Reliable
  27. 27. Engaging @fvcproductions
  28. 28. @fvcproductions In Summary
  29. 29. @fvcproductions@fvcproductions
  30. 30. @fvcproductions@fvcproductions
  31. 31. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
  32. 32. @fvcproductions PWAs & Privilege 💰
  33. 33. @fvcproductionsThe State of LTE (Nov 2017)
  34. 34. @fvcproductions 4GB Availability Worldwide
  35. 35. @fvcproductions 4GB Speed Worldwide @fvcproductions
  36. 36. @fvcproductions@fvcproductions
  37. 37. @fvcproductions@fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions@fvcproductions
  40. 40. @fvcproductions @fvcproductions @fvcproductions
  41. 41. @fvcproductions@fvcproductions@fvcproductions
  42. 42. @fvcproductions@fvcproductions
  43. 43. @fvcproductions @fvcproductions
  44. 44. @fvcproductions
  45. 45. @fvcproductions But what about the rest of the world... 🌍
  46. 46. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space @fvcproductions
  47. 47. @fvcproductions Emerging markets are becoming more crucial @fvcproductions
  48. 48. @fvcproductions ~53% of the world has access to the Internet now @fvcproductions
  49. 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. 50. @fvcproductions
  51. 51. @fvcproductions Write once, deploy everywhere! 🥇 @fvcproductions
  52. 52. @fvcproductions @fvcproductions Write once, deploy everywhere! 🥇
  53. 53. @fvcproductions @fvcproductions @fvcproductions
  54. 54. @fvcproductions @fvcproductions @fvcproductions
  55. 55. @fvcproductions@fvcproductions
  56. 56. @fvcproductions@fvcproductions
  57. 57. @fvcproductions
  58. 58. @fvcproductions
  59. 59. @fvcproductions@fvcproductions
  60. 60. @fvcproductions
  61. 61. @fvcproductions@fvcproductions
  62. 62. @fvcproductions@fvcproductions
  63. 63. @fvcproductions Where even? 👀 @fvcproductions
  64. 64. @fvcproductions EVERYWHERE! 😳😮😯😲
  65. 65. @fvcproductions@fvcproductions
  66. 66. @fvcproductions@fvcproductions
  67. 67. @fvcproductions 🤣 @fvcproductions
  68. 68. @fvcproductions@fvcproductions 🤣@fvcproductions
  69. 69. @fvcproductions Do the big companies support this though? 🤔
  70. 70. @fvcproductions@fvcproductionsFacebook
  71. 71. @fvcproductions@fvcproductionsAmazon
  72. 72. @fvcproductions@fvcproductionsApple
  73. 73. @fvcproductions@fvcproductionsNetflix
  74. 74. @fvcproductions @fvcproductions Netflix
  75. 75. @fvcproductionsGoogle
  76. 76. @fvcproductions @fvcproductions Google
  77. 77. @fvcproductions@fvcproductionsAdobe
  78. 78. @fvcproductions@fvcproductionsMozilla
  79. 79. @fvcproductions@fvcproductionsMicrosoft
  80. 80. @fvcproductions@fvcproductionsForrester
  81. 81. @fvcproductions Exploring Examples Starbucks 🍴🍔😋🍕🍗🌮 Instagram 📷🎥📸🎬 Forbes 📰🗞 Trivago ✈🌎🌍🌏 Flipkart 👜👕💸👔👚🛍 Hulu 🎥🍿🎬🎞📺 Slack 💬💼Q💡🧠 🤯
  82. 82. @fvcproductions@fvcproductions
  83. 83. @fvcproductions
  84. 84. @fvcproductions
  85. 85. @fvcproductionsForbes@fvcproductions
  86. 86. @fvcproductionsTrivago@fvcproductions
  87. 87. @fvcproductions@fvcproductions
  88. 88. @fvcproductions
  89. 89. @fvcproductions
  90. 90. @fvcproductions Downsides… 😓
  91. 91. @fvcproductions 1. No centralized hub
  92. 92. @fvcproductions No centralized hub @fvcproductions
  93. 93. @fvcproductions No centralized hub @fvcproductions
  94. 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'."
  95. 95. @fvcproductions Ok, side rant
  96. 96. @fvcproductions@fvcproductions
  97. 97. @fvcproductions@fvcproductions
  98. 98. @fvcproductions@fvcproductions
  99. 99. @fvcproductions Same name! • Different Frances - they're married lol
  100. 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'."
  101. 101. @fvcproductions@fvcproductions
  102. 102. @fvcproductions 2. Adoption Rate
  103. 103. @fvcproductions @fvcproductions
  104. 104. @fvcproductions@fvcproductions
  105. 105. @fvcproductions@fvcproductions
  106. 106. @fvcproductions
  107. 107. @fvcproductions 3. More support from Apple lol
  108. 108. @fvcproductions
  109. 109. @fvcproductions
  110. 110. @fvcproductions Ok but let me rant about Apple for a sec
  111. 111. @fvcproductions 
  112. 112. @fvcproductions V @fvcproductions
  113. 113. @fvcproductions W @fvcproductions
  114. 114. @fvcproductions X @fvcproductions
  115. 115. @fvcproductions Y @fvcproductions
  116. 116. @fvcproductions Y @fvcproductions
  117. 117. @fvcproductions Z @fvcproductions
  118. 118. @fvcproductions [ @fvcproductions
  119. 119. @fvcproductions @fvcproductions
  120. 120. @fvcproductions 🌎 @fvcproductions
  121. 121. @fvcproductions How even? 🛠 @fvcproductions
  122. 122. @fvcproductions Testing for PWA Readiness 💡
  123. 123. @fvcproductions Lighthouse
  124. 124. @fvcproductions
  125. 125. @fvcproductions@fvcproductions @fvcproductions
  126. 126. @fvcproductions Chrome DevTools @fvcproductions
  127. 127. @fvcproductions
  128. 128. @fvcproductions Chrome Extension @fvcproductions
  129. 129. @fvcproductions @fvcproductions
  130. 130. @fvcproductions Node Module @fvcproductions
  131. 131. @fvcproductions Command Line @fvcproductions
  132. 132. @fvcproductions Web UI (web.dev) @fvcproductions
  133. 133. @fvcproductions@fvcproductions
  134. 134. @fvcproductions@fvcproductions
  135. 135. @fvcproductions Shameless Plug 🤫
  136. 136. @fvcproductions@fvcproductions
  137. 137. @fvcproductions@fvcproductions
  138. 138. @fvcproductions The Transformation 🦋
  139. 139. @fvcproductions@fvcproductions
  140. 140. @fvcproductions @fvcproductions
  141. 141. @fvcproductions@fvcproductions
  142. 142. @fvcproductions Static generators are cool tho
  143. 143. @fvcproductions@fvcproductions
  144. 144. @fvcproductions@fvcproductions
  145. 145. @fvcproductions@fvcproductions
  146. 146. @fvcproductions@fvcproductions
  147. 147. @fvcproductions @fvcproductions
  148. 148. @fvcproductions@fvcproductions
  149. 149. @fvcproductions @fvcproductions
  150. 150. @fvcproductions@fvcproductions
  151. 151. @fvcproductions @fvcproductions
  152. 152. @fvcproductions sw.js 🌐 index.html 😌 manifest.json 📝 HTTPs 🔒 @fvcproductions
  153. 153. @fvcproductions
  154. 154. @fvcproductions@fvcproductions
  155. 155. @fvcproductions@fvcproductions
  156. 156. @fvcproductions 1. HTTPs 🔒 2. index.html 😌 3. manifest.json 📝 4. sw.js 🌐
  157. 157. @fvcproductions 1. HTTPs 🔒
  158. 158. @fvcproductions@fvcproductions
  159. 159. @fvcproductions@fvcproductions
  160. 160. @fvcproductions@fvcproductions
  161. 161. @fvcproductions@fvcproductions
  162. 162. @fvcproductions
  163. 163. @fvcproductions
  164. 164. @fvcproductions 2. index.html 😌
  165. 165. @fvcproductions index.html <head></head> @fvcproductions
  166. 166. @fvcproductions @fvcproductions
  167. 167. @fvcproductions@fvcproductions
  168. 168. @fvcproductions @fvcproductions index.html <body></body>
  169. 169. @fvcproductions 3. manifest.json 📝
  170. 170. @fvcproductions 3. /manifest.json @fvcproductions
  171. 171. @fvcproductions@fvcproductions
  172. 172. @fvcproductions 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow
  173. 173. @fvcproductions@fvcproductions
  174. 174. @fvcproductions@fvcproductions
  175. 175. @fvcproductions@fvcproductions
  176. 176. @fvcproductions@fvcproductions
  177. 177. @fvcproductions
  178. 178. @fvcproductions 4. sw.js 🌐
  179. 179. @fvcproductions Offline-first
  180. 180. @fvcproductions @fvcproductions
  181. 181. @fvcproductions
  182. 182. @fvcproductions webpack.config.js @fvcproductions
  183. 183. @fvcproductions webpack.config.js
  184. 184. @fvcproductions GenerateSW()
  185. 185. @fvcproductions generated sw.js
  186. 186. @fvcproductions sw.js file manifest @fvcproductions
  187. 187. @fvcproductions @fvcproductions
  188. 188. @fvcproductions Remember 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
  189. 189. @fvcproductions 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs
  190. 190. @fvcproductions@fvcproductions @fvcproductions@fvcproductions @fvcproductions
  191. 191. @fvcproductions@fvcproductions
  192. 192. @fvcproductions Lighthouse Scores
  193. 193. @fvcproductions manifest.json index.html sw.js Only 3 files needed! 🦄
  194. 194. @fvcproductions
  195. 195. @fvcproductions Web push notifications? 🔔
  196. 196. Engaging? @fvcproductions
  197. 197. @fvcproductions@fvcproductions
  198. 198. @fvcproductions
  199. 199. @fvcproductions
  200. 200. @fvcproductions
  201. 201. @fvcproductions
  202. 202. @fvcproductions TLDR;
  203. 203. @fvcproductions@fvcproductions
  204. 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
  205. 205. @fvcproductions FIN 🎉 @fvcproductions
  206. 206. @fvcproductions Thanks for listening! 💛
  207. 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. 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. 209. @fvcproductions Questions, comments or concerns? 💭 Let’s chat after. g
  210. 210. @fvcproductions These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  211. 211. @fvcproductions Kudos • Music from Jukedeck - create your own at http://jukedeck.com
  212. 212. @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

×