O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Telegraph Track - Progressive Web Apps 101

94 visualizações

Publicada em

I presented these slides to the Telegraph Track at Hack Reactor in San Francisco, CA from 7:45 pm to 9:00 pm on Thursday - March 7th, 2019.

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://www.hackreactor.com/

Publicada em: Tecnologia
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Telegraph Track - 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, Customer Acquisition @SlackHQ @fvcproductions
  3. 3. @fvcproductions
  4. 4. @fvcproductions
  5. 5. @fvcproductions
  6. 6. @fvcproductions
  7. 7. @fvcproductions
  8. 8. slack.com/careers@fvcproductions
  9. 9. Hi, I’m Frances (your professor)! ! Software Engineer @SlackHQ @fvcproductions
  10. 10. Norfolk, VA @fvcproductions
  11. 11. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  12. 12. Curriculum Why even? 🤔 (25%) Embracing the web Where even? 👀 (15%) Examples in real life How even? 🛠 (50%) The transformation process @fvcproductions
  13. 13. 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
  14. 14. 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
  15. 15. Why even? 🤔 @fvcproductions
  16. 16. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶 🚗 🏥 @fvcproductions
  17. 17. The mobile web. 🌐📱 @fvcproductions
  18. 18. @fvcproductions
  19. 19. @fvcproductions
  20. 20. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
  21. 21. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
  22. 22. Integrated @fvcproductions
  23. 23. Reliable @fvcproductions
  24. 24. Engaging @fvcproductions
  25. 25. In Summary @fvcproductions
  26. 26. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
  27. 27. PWAs & Privilege @fvcproductions
  28. 28. @fvcproductionsThe State of LTE (Nov 2017)
  29. 29. 4GB Availability Worldwide @fvcproductions
  30. 30. 4GB Speed Worldwide @fvcproductions
  31. 31. @fvcproductions
  32. 32. @fvcproductions
  33. 33. @fvcproductions
  34. 34. @fvcproductions
  35. 35. @fvcproductions
  36. 36. @fvcproductions
  37. 37. @fvcproductions @fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions
  40. 40. But what about the rest of the world... 🌍 @fvcproductions
  41. 41. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
  42. 42. @fvcproductions Emerging markets are becoming more crucial
  43. 43. @fvcproductions ~53% of the world has access to the Internet now
  44. 44. Size of Twitter Clients (March 2019)Size(MB) 0 50 100 150 200 Android iOS PWA 1.3 186.4 86 @fvcproductions 1.3
  45. 45. Write once, deploy everywhere! @fvcproductions
  46. 46. Write once, deploy everywhere! @fvcproductions
  47. 47. @fvcproductions @fvcproductions
  48. 48. @fvcproductions
  49. 49. @fvcproductions
  50. 50. @fvcproductions
  51. 51. @fvcproductions
  52. 52. @fvcproductions
  53. 53. @fvcproductions
  54. 54. Where even? 👀 @fvcproductions
  55. 55. EVERYWHERE! 😳😮😯😲 @fvcproductions
  56. 56. @fvcproductions
  57. 57. @fvcproductions
  58. 58. 🤣 @fvcproductions
  59. 59. Do the big companies support this though? 🤔 @fvcproductions
  60. 60. @fvcproductions
  61. 61. @fvcproductions
  62. 62. @fvcproductions @fvcproductions
  63. 63. @fvcproductions
  64. 64. @fvcproductions
  65. 65. @fvcproductions
  66. 66. @fvcproductions
  67. 67. @fvcproductions
  68. 68. @fvcproductions
  69. 69. @fvcproductions
  70. 70. @fvcproductions
  71. 71. @fvcproductions
  72. 72. @fvcproductions
  73. 73. @fvcproductions
  74. 74. @fvcproductions
  75. 75. Exploring Examples • Starbucks 🍴🍔😋🍕🍗🌮 • Instagram 📷🎥📸🎬 • Forbes 📰🗞 • Trivago ✈🌎🌍🌏 • Flipkart 👜👕💸👔👚🛍 🤯 @fvcproductions
  76. 76. @fvcproductions
  77. 77. @fvcproductions
  78. 78. @fvcproductions
  79. 79. Forbes@fvcproductions
  80. 80. Trivago@fvcproductions
  81. 81. @fvcproductions
  82. 82. Downsides… 😓 @fvcproductions
  83. 83. 1. No centralized hub @fvcproductions
  84. 84. No centralized hub @fvcproductions
  85. 85. No centralized hub @fvcproductions
  86. 86. 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'." @fvcproductions
  87. 87. Ok, side rant @fvcproductions
  88. 88. @fvcproductions
  89. 89. @fvcproductions
  90. 90. @fvcproductions
  91. 91. Lol jk • Different Frances - they're married lol @fvcproductions
  92. 92. 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'." @fvcproductions
  93. 93. @fvcproductions
  94. 94. 2. Browser Support @fvcproductions
  95. 95. @fvcproductions
  96. 96. 3. More support from Apple lol @fvcproductions
  97. 97. @fvcproductions
  98. 98. @fvcproductions
  99. 99. Ok but let me rant about Apple for a sec @fvcproductions
  100. 100.  @fvcproductions
  101. 101. L @fvcproductions
  102. 102. M @fvcproductions
  103. 103. N @fvcproductions
  104. 104. O @fvcproductions
  105. 105. O @fvcproductions
  106. 106. P @fvcproductions
  107. 107. Q @fvcproductions
  108. 108. R @fvcproductions
  109. 109. 🌎 @fvcproductions
  110. 110. How even? 🛠 @fvcproductions
  111. 111. Testing for PWA Readiness 💡 @fvcproductions
  112. 112. Lighthouse @fvcproductions
  113. 113. @fvcproductions @fvcproductions
  114. 114. @fvcproductions
  115. 115. @fvcproductions
  116. 116. Shameless Plug 🤫 @fvcproductions
  117. 117. @fvcproductions
  118. 118. @fvcproductions
  119. 119. The Transformation 🦋 @fvcproductions
  120. 120. @fvcproductions
  121. 121. @fvcproductions
  122. 122. @fvcproductions
  123. 123. Static generators are cool tho @fvcproductions
  124. 124. @fvcproductions
  125. 125. @fvcproductions
  126. 126. @fvcproductions
  127. 127. @fvcproductions
  128. 128. @fvcproductions
  129. 129. @fvcproductions
  130. 130. @fvcproductions
  131. 131. @fvcproductions
  132. 132. @fvcproductions
  133. 133. sw.js index.html manifest.json HTTPs @fvcproductions
  134. 134. 1. HTTPs 2. index.html 3. manifest.json 4. sw.js @fvcproductions
  135. 135. 1. HTTPs @fvcproductions
  136. 136. @fvcproductions
  137. 137. @fvcproductions
  138. 138. @fvcproductions
  139. 139. @fvcproductions
  140. 140. 2. index.html @fvcproductions
  141. 141. index.html <head></head> @fvcproductions
  142. 142. @fvcproductions index.html <body></body>
  143. 143. 3. manifest.json @fvcproductions
  144. 144. 3. /manifest.json @fvcproductions
  145. 145. @fvcproductions
  146. 146. 48x48, 72x72, 96x96, 144x144, 192x192, 256x256, 384x384, 512x512 many icons much wow @fvcproductions
  147. 147. @fvcproductions
  148. 148. @fvcproductions
  149. 149. @fvcproductions
  150. 150. 4. sw.js @fvcproductions
  151. 151. Offline-first @fvcproductions
  152. 152. @fvcproductions
  153. 153. @fvcproductions
  154. 154. webpack.config.js @fvcproductions
  155. 155. webpack.config.js @fvcproductions
  156. 156. GenerateSW() @fvcproductions
  157. 157. generated sw.js @fvcproductions
  158. 158. sw.js file manifest @fvcproductions
  159. 159. Remember 🔥 ? • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications @fvcproductions
  160. 160. 🔥 Checklist • Integrated • manifest.json • HTML enhancements • Reliable • sw.js • HTTPs @fvcproductions
  161. 161. @fvcproductions @fvcproductions@fvcproductions
  162. 162. @fvcproductions
  163. 163. @fvcproductions
  164. 164. manifest.json index.html sw.js @fvcproductions Only 3 files needed! 🦄
  165. 165. @fvcproductions
  166. 166. Web push notifications? @fvcproductions
  167. 167. Engaging? @fvcproductions
  168. 168. @fvcproductions
  169. 169. @fvcproductions
  170. 170. TLDR; @fvcproductions
  171. 171. @fvcproductions
  172. 172. 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
  173. 173. FIN @fvcproductions
  174. 174. Thanks for listening! 💛 @fvcproductions
  175. 175. 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
  176. 176. References At least 30 more links need to be added here - please refer to the slide notes in the meantime 😂 😅 @fvcproductions
  177. 177. Questions, comments or concerns? 💭 @fvcproductions
  178. 178. These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  179. 179. slack.com/careers@fvcproductions
  180. 180. Tech Queens • First episode releasing tomorrow for International Women's Day • If you're interested or know someone, head over to the website and fill out the contact form at the bottom • https://techqueenspod.com @fvcproductions
  181. 181. Kudos • Music from Jukedeck - create your own at http://jukedeck.com @fvcproductions

×