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

Scaling Down: The Offline First Story

2553dc824d5a4fdd278651385a48b8ec?s=47 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.

2553dc824d5a4fdd278651385a48b8ec?s=128

Joan Touzet

September 16, 2014
Tweet

Transcript

  1. Scaling Down The Offline First Story Joan Touzet - @wohali

    – http://www.atypical.net/
  2. Who am I? CouchDB Contributor / User (~2008) Committer (Feb

    2013) PMC member (April 2014) Cloudant Engineer (2012-2013) Sr. SW Development Manager (2014-) 2
  3. Part 1: Why Scale Down? 3

  4. Getting to Velocity NYC 4

  5. Getting to Velocity NYC 5

  6. 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’.
  7. Getting to Velocity NYC 7

  8. • Rogers: $10/day, 3-20MB (country specific) • Bell: • Telus:

    $5-15/MB Canadian Roaming Data Rates (Sept 2014) 8
  9. “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
  10. “2G? 10 • GSM: 9.6kbit/s down and up.

  11. Scaling out your backend is not going to help. 11

  12. Part 2: The Past 12

  13. 1969-1997 (ish) 13

  14. Offline was the default. 14

  15. Online was slow, expensive, rare. 15

  16. Online was slow, expensive, rare. 16

  17. Design pattern: Store and Forward Plan 55-A message switching systems

    17
  18. Design pattern: Store and Forward Unix to Unix Copy (UUCP)

    Network News Transfer Protocol (NNTP) Simple Mail Transport Protocol (SMTP) 18
  19. 1989: NoSQL bi-directional synchronization 19

  20. 1989: NoSQL bi-directional synchronization 20

  21. Trust and computing 21

  22. 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
  23. 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
  24. EVOLVE OR PERISH! 24 Source: Sony Online Entertainment (Used with

    permission)
  25. Part 3: The Present (ish) 25

  26. Reaction to what we knew was wrong • Real-time data

    • Interaction • Pictures / Video • Visualisation • Beautiful user experiences 26
  27. In case it's not clear... 27

  28. Marshall McLuhan 28

  29. What did we miss? 29

  30. Why isn't it good enough for us? 30

  31. First steps to Offline First: AppCache 31 Credit for next

    6 slides: Caolan McMahon (@caolan), with gracious permission
  32. 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
  33. 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)
  34. 34

  35. 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
  36. Just around the corner: Service Workers 36 https://github.com/serviceworker/offline-news-service-worker

  37. 37 It can intercept, modify and respond to network requests

    Credit: @phuunet
  38. Continuum of solutions 38

  39. 39 Friends don't let friends implement their own crypto implementations.

  40. 40 Friends don't let friends implement their own sync implementations.

  41. 41 Friends don't let friends implement their own sync implementations.

    Use existing protocols and implementations.
  42. 42

  43. 43 Sync

  44. 44 Sync Architecture

  45. A great open ecosystem 45

  46. A great open ecosystem 46

  47. Why should you care? 47

  48. Why should you care? Users get control. 48

  49. Why should you care? Users maintain control. 49

  50. Why should you care? Users maintain control. (And have exactly

    the right access.) 50
  51. Why should you care? 51

  52. Why should you care? Users have a great experience. 52

  53. Why should you care? Users always have a great experience.

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

    of experiences, this is the #1 priority” - @janl 54 Why should you care?
  55. Scale horizontally, not vertically. 55 Why should you care?

  56. Scale horizontally to new geographies. 56 Why should you care?

  57. There are lots of interesting UX design issues. This matters

    more than the backend. Help us solve these problems. 57 Why should you care?
  58. EVOLVE OR PERISH! 58 Source: Sony Online Entertainment (Used with

    permission)
  59. Part 4: The Future 59

  60. The net will not be as ubiquitous or as fast

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

    get lucky and invent the ansible.) 61
  62. What does the futurist say? 62

  63. What does the futurist say? 63

  64. What does the futurist say? 64

  65. What does the futurist say? 65

  66. What does the futurist say? 66

  67. 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
  68. This problem will not go away. 68

  69. This is not a problem. 69

  70. This is a fact. Leverage it proudly. 70

  71. Thank you for listening! https://cloudant.com/edgewise/ https://offlinefirst.org/ http://hood.ie/ http://serviceworker.io/ 71 Joan

    Touzet - @wohali – http://www.atypical.net/