Vermont Code Camp 9 - Go Offline First to Save the World

Vermont Code Camp 9 - Go Offline First to Save the World

List of Nifty Tools:
A community-driven list of PWA stats: https://www.pwastats.com/
Progressive Web App Examples: https://pwa.rocks/
Test a website's performance: https://www.webpagetest.org/
A Collection of Offline States: http://offlinestat.es/
Calibre for performance analytics: https://calibreapp.com/
Codelabs for the PWA Roadshow https://codelabs.developers.google.com/pwa-roadshow
Server-rendered React apps: https://github.com/zeit/next.js/issues/861
Offline First Javascript Backend: http://hood.ie/
JS Database that Syncs: https://pouchdb.com/
Package manager for datasets: https://docs.datproject.org/
Fully-managed NoSQL database-as-a-service: https://cloudant.com/

Further Reading about Offline First:
* Nolan Lawson, Microsoft Edge, “Progressive Enhancement isn’t dead but it smells funny” https://nolanlawson.com/2016/10/13/progressive-enhancement-isnt-dead-but-it-smells-funny/
* Prosper Otemuyiwa, Google, “Introduction to Progressive Web Apps (Offline First) - Part 1” https://auth0.com/blog/introduction-to-progressive-apps-part-one/
* Pedro Teixeira, YLD, “Building realtime collaborative offline-first apps with React, Redux, PouchDB and WebSockets” https://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/#.WPe4Tj9926k
* Jesse Beach, Facebook, on Conceptualizing and Expressing Offline to the End User https://medium.com/@jessebeach/my-biggest-takeaway-from-the-second-offline-camp-in-santa-margarita-ca-d0dd930cd02b#.epml3r1tx
* Calvin Metcalf, AppGeo, “Security in Offline First Apps” https://medium.com/offline-camp/offline-first-security-59bf4800e82a
* Lara Hogan, Etsy, “Designing for Performance” http://larahogan.me/design/
* Ben Schwarz, “Real World Connectivity: Beyond the Bubble” https://www.youtube.com/watch?v=rwyZc1keSew&t=2s&index=9&list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_

767120621faf553bd3f738468c4980de?s=128

Maureen McElaney

September 16, 2017
Tweet

Transcript

  1. Go Offline First to Save the World

  2. Go Offline First to Save the World @Mo_Mack

  3. Offline is Not an Error Condition.

  4. None
  5. None
  6. None
  7. None
  8. Offline First is changing lives.

  9. None
  10. “Out of adversity can come innovation...” - Juliana Rotich Co-founder

    BRCK @afromusing
  11. None
  12. None
  13. None
  14. Offline First Challenges... 1. Sync Conflicts are hard. 2. 3.

  15. None
  16. None
  17. None
  18. HospitalRun

  19. HospitalRun

  20. None
  21. None
  22. Offline First Challenges... 1. Sync Conflicts are hard. 2. Security

    is hard. 3.
  23. So… What about me?

  24. https://datproject.org/

  25. Public Data Shared with Dat https://datproject.org/explore

  26. Invest in Offline First NOW

  27. TwinPrime Mobile Usage Stats: http://twinprime.com/lte-has-slowed-by-50-in-the-us/

  28. What about the rest of the internet?

  29. The number of internet users in India grew by 108

    million in 2016. Stats credited to Ben Schwarz, CEO of Calibre
  30. Airtel, India’s largest mobile phone carrier has almost 255 million

    customers, but only 24.7% market share. Stats credited to Ben Schwarz, CEO of Calibre
  31. 65% of the 1.2 billion population, do not yet have

    access to the internet. Stats credited to Ben Schwarz, CEO of Calibre
  32. Number of hours worked for 500mb of data India 17

    hr Brazil 13 hr Indonesia 6 hr United States 1 hr Stats credited to Ben Schwarz, CEO of Calibre
  33. 1hr of work for: • 8 songs on Spotify •

    6 minutes of Youtube • Less than 1 hour playing online games Stats credited to Ben Schwarz, CEO of Calibre
  34. “A 4G user isn’t a 4G user most of the

    time.” Ilya Grigorik, Google Web performance; co-chair of W3C Webperf WG Chrome Dev Summit 2016
  35. “60% of Mobile traffic is 2G” Darin Fisher, VP, Chrome

    Engineering Chrome Dev Summit 2016
  36. By designing for low latency first, you’ll make substantial improvements

    to performance.
  37. None
  38. https://mobile.twitter.com/

  39. None
  40. None
  41. Offline First Challenges... 1. Sync Conflicts are hard. 2. Security

    is hard. 3. Design Patterns are hard.
  42. Offline First Design Patterns 1. Freshness 2. Reach 3. Assurance

  43. Offline First Challenges... 1. Sync Conflicts are hard. 2. Security

    is hard. 3. Design Patterns are hard.
  44. offlinefirst.org

  45. A plethora of nifty tools! ◉ A community-driven list of

    PWA stats: https://www.pwastats.com/ ◉ Progressive Web App Examples: https://pwa.rocks/ ◉ Test a website's performance: https://www.webpagetest.org/ ◉ A Collection of Offline States: http://offlinestat.es/ ◉ Calibre for performance analytics: https://calibreapp.com/ ◉ Codelabs for the PWA Roadshow https://codelabs.developers.google.com/pwa-roadshow ◉ Server-rendered React apps: https://github.com/zeit/next.js/issues/861 ◉ Offline First Javascript Backend: http://hood.ie/ ◉ JS Database that Syncs: https://pouchdb.com/ ◉ Package manager for datasets: https://docs.datproject.org/ ◉ Fully-managed NoSQL database-as-a-service: https://cloudant.com/
  46. Further Reading: ◉ Nolan Lawson, Microsoft Edge, “Progressive Enhancement isn’t

    dead but it smells funny” https://nolanlawson.com/2016/10/13/progressive-enhancement-isnt-dead-but-it-smells-funny/ ◉ Prosper Otemuyiwa, Google, “Introduction to Progressive Web Apps (Offline First) - Part 1” https://auth0.com/blog/introduction-to-progressive-apps-part-one/ ◉ Pedro Teixeira, YLD, “Building realtime collaborative offline-first apps with React, Redux, PouchDB and WebSockets” https://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/#. WPe4Tj9926k ◉ Jesse Beach, Facebook, on Conceptualizing and Expressing Offline to the End User https://medium.com/@jessebeach/my-biggest-takeaway-from-the-second-offline-camp-in-santa-margarita-ca-d0dd930cd02b#. epml3r1tx ◉ Calvin Metcalf, AppGeo, “Security in Offline First Apps” https://medium.com/offline-camp/offline-first-security-59bf4800e82a ◉ Lara Hogan, Etsy, “Designing for Performance” http://larahogan.me/design/ ◉ Ben Schwarz, “Real World Connectivity: Beyond the Bubble” https://www.youtube.com/watch?v=rwyZc1keSew&t=2s&index=9&list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_
  47. Thank You! @Mo_Mack #OfflineFirst Public link to slides here http://bit.ly/vtcc9-offlinefirst

    Slide theme credit: http://www.slidescarnival.com/