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.

Transcript

1. Offline First, Made Easy! Gregor Martynus / @gr2m / #offlinefirst
4. image: plane
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
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
29. Offline First It's not a feature. It's a mindset.
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.
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?
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
64. Example hoodie.email.send(properties)
73. Offline First extends your capabilities. Now come the good parts
74. Conversion?
76. Scaling? You barely know someone is using your app.
77. Latency? Zero.
79. Save? All the time.
80. Server down? What do I care?
82. Backend? Swappable commodity.
83. Offline First is an ongoing discussion
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