Offline First – Made Simple!

Offline First – Made Simple!

Have you ever tried to send a tweet in the subway? Access your cloud-stored
notes while your train enters tunnel? Tried to get a navigation route
abroad?

We can't keep building apps with the desktop mindset of permanent, fast
connectivity, where a temporary disconnection or slow service is regarded
as a problem and communicated as an error. The rise of mobile devices don't
provide that same level of quality and consistency, but at the same time
drive the expectations of ubiquitous data, across all devices.

The good news is: all the technology is here today, there is no reason not
to make your apps work offline. Neither are the problems unique to your
application. Generic solutions like Hoodie allow developers to build
excellent user experiences that deliver in the face of network
interruptions.

Today's apps should work offline per default, not as an exception. This
talk explains how.

24fc194843a71f10949be18d5a692682?s=128

Gregor Martynus

April 24, 2014
Tweet

Transcript

  1. Offline First, Made Easy! Gregor Martynus / @gr2m / #offlinefirst

  2. None
  3. None
  4. image: plane

  5. None
  6. Oh, you're not from here?

  7. Don't make assumptions on anything beyond your user's device.

  8. Our offline experiences suck! ... and we should do something

    about it
  9. Good news, everyone: We can build web apps that work

    offline today. Plus it's easy. Gregor from Team @HoodieHQ
  10. Hi, I'm Gregor.

  11. I'm a both-end Developer & UX Designer

  12. I've created minutes.io – Offline First since 2011

  13. Initiator at Hoodie, an Open Source Architecture to build Offline

    First apps (and to stop worrying about the backend).
  14. Talk to me: @gr2m Talk to us: @hoodiehq Discuss #offlinefirst

  15. None
  16. "Unlike the always-wired machines of the past, computers are now

    mobile and truly personal, and people move through online and offline seamlessly."
  17. "Our apps should do the same." Commons sense.

  18. Our Problem is ...

  19. We live in a bubble.

  20. We have been there before.

  21. "More often than not, the mobile experience for a Web

    application or site is designed and built after the PC version is complete." Luke Wroblewski (2009)
  22. 1. Mobile is exploding

  23. 1. Mobile is exploding 2. Mobile forces you to focus

  24. 1. Mobile is exploding 2. Mobile forces you to focus

    3. Mobile extends your capabilities
  25. None
  26. None
  27. None
  28. None
  29. Offline First It's not a feature. It's a mindset.

  30. None
  31. None
  32. None
  33. None
  34. None
  35. How to build Offline First?

  36. Steps for Offline First 1. Separate Apps From Data 2.

    Deliver App Code 3. Save Data Offline 4. Detect Connectivity 5. Sync Data
  37. Separate Apps from Data If you build JavaScript Apps today,

    you are there already. Backbone, Ember, Angular ... are your friends.
  38. Deliver App Code And make it cacheable. Use appCache* today,

    ServiceWorkers tomorrow. *appCache is a Douchbag
  39. CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached 'master entries'. CACHE:

    /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Resources that require the user to be online. NETWORK: * # offline.html will be served if search is inaccessible # offline.jpg will be served in place of all images in images/large/ FALLBACK: /search /offline.html images/large/ images/offline.jpg # MUST READ: http://alistapart.com/article/application-cache-is-a-douchebag
  40. Sava Data Offline localStorage, IndexedDB, Wrapper of your choice

  41. Detect Connectivity navigator.onLine, anyone?

  42. Sync Data This is hard. Don't even think about inventing

    your own protocol. Build upon existing solutions.
  43. None
  44. None
  45. None
  46. None
  47. Offline First is hard.

  48. Everything is hard before it is easy 1 Johann Wolfgang

    von Goethe
  49. Offline First, Made Easy?

  50. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

  51. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('joe@example.com', 'secret')
  52. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('joe@example.com', 'secret') // send an email hoodie.email.send( emailProperties )
  53. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('joe@example.com', 'secret') // send an email hoodie.email.send( emailProperties ) But ... where is the Offline?
  54. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('joe@example.com', 'secret') // send an email hoodie.email.send( emailProperties ) Offline? Why should you care?
  55. None
  56. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('joe@example.com', 'secret') // send an email hoodie.email.send( emailProperties ) // events hoodie.store.on('change', handleObjectChange) hoodie.account.on('signin', handleSignIn) hoodie.on('disconnected', handleConnectionError)
  57. Hoodie Architecture

  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. Example hoodie.email.send(properties)

  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. Offline First extends your capabilities. Now come the good parts

  74. Conversion?

  75. None
  76. Scaling? You barely know someone is using your app.

  77. Latency? Zero.

  78. None
  79. Save? All the time.

  80. Server down? What do I care?

  81. None
  82. Backend? Swappable commodity.

  83. Offline First is an ongoing discussion

  84. None
  85. Recap

  86. Our Offline Experiences SUCK we have to do something about

    it.
  87. Offline First is hard. if you need sync.

  88. Take it easy use Hoodie <3

  89. Questions? iOS/Android? Conflicts? Security? Administration? Hosting? Backbone/Ember/Angular? Production ready? Plugins?

    ...?
  90. Offline First, Made Easy! Gregor Martynus / @gr2m / #offlinefirst

    Slides: go.hood.ie/jsonfbr-offlinefirst
  91. Credits 4 CatDog 4 London tube station escalator 4 The

    Origin of Internet Cats