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

Scaling Down: The Offline First Story

Joan Touzet
September 16, 2014

Scaling Down: The Offline First Story

VelocityConf NYC, 2014-09-16, 17:00.

What is the point of your offering if people can’t access it? Travel to just about any other country and you’ll immediately experience the pain of reduced or no data service. Mobile connectivity and bandwidth problems won’t solve themselves on a global level anywhere in the near future. Discover how to design or refit your service / application to thrive in an Offline First world.

Joan Touzet

September 16, 2014

More Decks by Joan Touzet

Other Decks in Technology


  1. Who am I? CouchDB Contributor / User (~2008) Committer (Feb

    2013) PMC member (April 2014) Cloudant Engineer (2012-2013) Sr. SW Development Manager (2014-) 2
  2. Getting to Velocity NYC 6 Meow meow turn meow. Meow

    meow turn another meow. Meow meow around the meow. Meow big sign says ‘Velocity 2014’.
  3. • Rogers: $10/day, 3-20MB (country specific) • Bell: • Telus:

    $5-15/MB Canadian Roaming Data Rates (Sept 2014) 8
  4. “Coverage? 9 • In 2011, 90% of the world's population

    lived in areas with 2G coverage, while 45% lived in areas with 2G and 3G coverage
  5. Design pattern: Store and Forward Unix to Unix Copy (UUCP)

    Network News Transfer Protocol (NNTP) Simple Mail Transport Protocol (SMTP) 18
  6. Design Pattern Summary 1. Offline only (not just Offline First)

    2. Local storage of datasets 3. Apps manipulate data stored locally 4. When online, low bandwidth/high latency 5. Sync 6. Trust, kind of… 22
  7. Perception A large percentage of content was text. Even with

    dialup (≥ 9600 bps), information was transmitted faster than you could absorb and comprehend it. It wasn’t enough. 23
  8. Reaction to what we knew was wrong • Real-time data

    • Interaction • Pictures / Video • Visualisation • Beautiful user experiences 26
  9. First steps to Offline First: AppCache 31 Credit for next

    6 slides: Caolan McMahon (@caolan), with gracious permission
  10. CACHE MANIFEST # 2014-09-16:v1 # 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: * # static.html will be served if main.py is inaccessible # offline.jpg will be served in place of all images in images/large/ # offline.html will be served in place of all other .html files FALLBACK: /main.py /static.html images/large/ images/offline.jpg 32
  11. Key Considerations 33 1. The Application Cache will only update

    if the contents of the manifest file have changed 2. It always serves from the cache, even when online (watch out for manifest renames!) 3. Non-cached files will not load on a cached page unless explicitly listed 4. User sees new content on next visit (requires double refresh)
  12. 34

  13. Pure web local storage options • LocalStorage gives access to

    a small amount of data + Well supported, easy to use – Synchronous, strings only, ~5MB • IndexedDB + Async, transactions, indexes, more storage (~50MB) - Complex API, poor support 35
  14. 42

  15. “Offline-first means zero latency UX. We live in the age

    of experiences, this is the #1 priority” - @janl 54 Why should you care?
  16. There are lots of interesting UX design issues. This matters

    more than the backend. Help us solve these problems. 57 Why should you care?
  17. The net will not be as ubiquitous or as fast

    as you dream it will be. (Especially in outlying places.) 60
  18. The speed of light will not get faster. (Unless we

    get lucky and invent the ansible.) 61
  19. Design Pattern Summary 1. Offline First 2. Local storage of

    datasets 3. Apps manipulate data stored locally 4. When online, sync, and support interaction 5. Sync 6. Trust! 67