Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Gregor Martynus

April 24, 2014
Tweet

More Decks by Gregor Martynus

Other Decks in Technology

Transcript

  1. Good news, everyone: We can build web apps that work

    offline today. Plus it's easy. Gregor from Team @HoodieHQ
  2. Initiator at Hoodie, an Open Source Architecture to build Offline

    First apps (and to stop worrying about the backend).
  3. "Unlike the always-wired machines of the past, computers are now

    mobile and truly personal, and people move through online and offline seamlessly."
  4. "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)
  5. 1. Mobile is exploding 2. Mobile forces you to focus

    3. Mobile extends your capabilities
  6. Steps for Offline First 1. Separate Apps From Data 2.

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

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

    ServiceWorkers tomorrow. *appCache is a Douchbag
  9. 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
  10. Sync Data This is hard. Don't even think about inventing

    your own protocol. Build upon existing solutions.
  11. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('[email protected]', 'secret') // send an email hoodie.email.send( emailProperties )
  12. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('[email protected]', 'secret') // send an email hoodie.email.send( emailProperties ) But ... where is the Offline?
  13. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('[email protected]', 'secret') // send an email hoodie.email.send( emailProperties ) Offline? Why should you care?
  14. // store an object hoodie.store.add('todo', {name: 'get the sun screen'})

    // create an account hoodie.account.signUp('[email protected]', 'secret') // send an email hoodie.email.send( emailProperties ) // events hoodie.store.on('change', handleObjectChange) hoodie.account.on('signin', handleSignIn) hoodie.on('disconnected', handleConnectionError)