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_

Transcript

1. Go Offline First
   to Save the World
   

   View Slide

2. Go Offline First
   to Save the World
   @Mo_Mack
   

   View Slide

3. Offline is Not an Error Condition.
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. Offline First is changing lives.
   

   View Slide

9. View Slide

10. “Out of adversity can come innovation...”
    - Juliana Rotich
    Co-founder BRCK
    @afromusing
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. Offline First Challenges...
    1. Sync Conflicts are hard.
    2.
    3.
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. HospitalRun
    

    View Slide

19. HospitalRun
    

    View Slide

20. View Slide

21. View Slide

22. Offline First Challenges...
    1. Sync Conflicts are hard.
    2. Security is hard.
    3.
    

    View Slide

23. So… What about me?
    

    View Slide

24. https://datproject.org/
    

    View Slide

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

    View Slide

26. Invest in Offline First NOW
    

    View Slide

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

    View Slide

28. What about the rest of the internet?
    

    View Slide

29. The number of internet users in India grew by
    108 million in 2016.
    Stats credited to Ben Schwarz, CEO of Calibre
    

    View Slide

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
    

    View Slide

31. 65% of the 1.2 billion population, do not yet have
    access to the internet.
    Stats credited to Ben Schwarz, CEO of Calibre
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. “60% of Mobile traffic is 2G”
    Darin Fisher, VP, Chrome Engineering
    Chrome Dev Summit 2016
    

    View Slide

36. By designing for low latency first, you’ll make
    substantial improvements to performance.
    

    View Slide

37. View Slide

38. https://mobile.twitter.com/
    

    View Slide

39. View Slide

40. View Slide

41. Offline First Challenges...
    1. Sync Conflicts are hard.
    2. Security is hard.
    3. Design Patterns are hard.
    

    View Slide

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

    View Slide

43. Offline First Challenges...
    1. Sync Conflicts are hard.
    2. Security is hard.
    3. Design Patterns are hard.
    

    View Slide

44. offlinefirst.org
    

    View Slide

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/
    

    View Slide

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_
    

    View Slide

47. Thank You!
    @Mo_Mack #OfflineFirst
    Public link to slides here
    http://bit.ly/vtcc9-offlinefirst
    Slide theme credit: http://www.slidescarnival.com/
    

    View Slide