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.

A Fullstack Future - Progressive Web Apps

205 views

Published on

Expert Silicon Valley technologists deliver keynotes that help fullstack developers prepare for the next decade of programming.

I was invited to speak about Progressive Web Apps on July 28th, 2018 at Infosys in Palo Alto for ~30 minutes at 4 pm.

I believe PWAs represent the next big wave of modern web standards.

More event details: https://www.eventbrite.co.uk/e/a-full-stack-future-registration-47706682973#

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

A Fullstack Future - Progressive Web Apps

  1. 1. Progressive Web Apps @fvcproductions
  2. 2. Hi, I’m Frances (your professor)! ! Software Engineer @slackhq Mentor @thinkful @fvcproductions
  3. 3. @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  4. 4. Curriculum • Why even? 🤔 (50%) • Embracing the web • Where even? 👀 (50%) • Examples in real life @fvcproductions
  5. 5. Why even? 🤔 @fvcproductions
  6. 6. Most accessible platform across the world? 📻 🌐📱💻 🖥 🤖 🕶🚗 @fvcproductions
  7. 7. The mobile web. 🌐📱 @fvcproductions
  8. 8. @fvcproductions
  9. 9. PWA Checklist • Fast • Integrated • Reliable • Engaging @fvcproductions
  10. 10. Fast First Paint First Contentful Paint First Meaningful Paint Time to Interactive @fvcproductions
  11. 11. Integrated @fvcproductions
  12. 12. Reliable @fvcproductions
  13. 13. Engaging @fvcproductions
  14. 14. In Summary @fvcproductions
  15. 15. @fvcproductions 🔥 !!! • Fast • Even on slow networks • Integrated • Add to home screen • Reliable • Offline-first • Engaging • Web push notifications
  16. 16. @fvcproductionsThe State of LTE (Nov 2017)
  17. 17. @fvcproductions
  18. 18. @fvcproductions
  19. 19. 4GB Availability Worldwide @fvcproductions @fvcproductions
  20. 20. 4GB Speed Worldwide @fvcproductions
  21. 21. @fvcproductions ~70% of people in emerging markets consider app size before downloading due to data costs and storage space
  22. 22. @fvcproductions Emerging markets are becoming more crucial
  23. 23. @fvcproductions ~53% of the world has access to the Internet now
  24. 24. @fvcproductions
  25. 25. Size of Twitter Clients (May 2018)Size(MB) 0 50 100 150 200 Android iOS PWA 0.6 185 86 @fvcproductions
  26. 26. Write once, deploy everywhere! @fvcproductions
  27. 27. Where even? 👀 @fvcproductions
  28. 28. EVERYWHERE! 😮😁 @fvcproductions
  29. 29. @fvcproductions
  30. 30. Exploring Examples • Starbucks (Food) • Instagram (Photos) • Forbes (News) • Trivago (Travel) • Flipkart (Ecommerce) 😲 @fvcproductions
  31. 31. @fvcproductions
  32. 32. Forbes
  33. 33. Trivago
  34. 34. Flipkart
  35. 35. Downsides… 😓 @fvcproductions
  36. 36. No centralized hub @fvcproductions
  37. 37. No centralized hub @fvcproductions
  38. 38. @fvcproductions
  39. 39. @fvcproductions
  40. 40. @fvcproductions
  41. 41. TLDR; @fvcproductions
  42. 42. @fvcproductions
  43. 43. 🔥 Checklist • Integrated • 1. manifest.json • 2. HTML enhancements • Reliable • 3. sw.js • 4. HTTPs @fvcproductions
  44. 44. FIN
  45. 45. Thanks for listening! 💛 @fvcproductions
  46. 46. These slides will be shared ASAP! 🎉 https://slideshare.net/fvcproductions @fvcproductions fvcproductions fvcproductions.com hello@fvcproductions.com
  47. 47. 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 @fvcproductions

×