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
Tweet

More Decks by Joan Touzet

Other Decks in Technology

Transcript

  1. Scaling Down
    The Offline First Story
    Joan Touzet - @wohali – http://www.atypical.net/

    View full-size slide

  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

    View full-size slide

  3. Part 1:
    Why Scale Down?
    3

    View full-size slide

  4. Getting to Velocity NYC
    4

    View full-size slide

  5. Getting to Velocity NYC
    5

    View full-size slide

  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’.

    View full-size slide

  7. Getting to Velocity NYC
    7

    View full-size slide

  8. • Rogers: $10/day, 3-20MB (country specific)
    • Bell:
    • Telus: $5-15/MB
    Canadian Roaming Data Rates (Sept 2014)
    8

    View full-size slide

  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

    View full-size slide

  10. “2G?
    10
    • GSM: 9.6kbit/s down and up.

    View full-size slide

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

    View full-size slide

  12. Part 2:
    The Past
    12

    View full-size slide

  13. 1969-1997 (ish)
    13

    View full-size slide

  14. Offline was the default.
    14

    View full-size slide

  15. Online was slow, expensive, rare.
    15

    View full-size slide

  16. Online was slow, expensive, rare.
    16

    View full-size slide

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

    View full-size slide

  18. Design pattern: Store and Forward
    Unix to Unix Copy (UUCP)
    Network News Transfer
    Protocol (NNTP)
    Simple Mail Transport
    Protocol (SMTP)
    18

    View full-size slide

  19. 1989: NoSQL bi-directional synchronization
    19

    View full-size slide

  20. 1989: NoSQL bi-directional synchronization
    20

    View full-size slide

  21. Trust and computing
    21

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  24. EVOLVE OR PERISH!
    24
    Source: Sony Online Entertainment (Used with permission)

    View full-size slide

  25. Part 3:
    The Present (ish)
    25

    View full-size slide

  26. Reaction to what we knew was wrong
    • Real-time data
    • Interaction
    • Pictures / Video
    • Visualisation
    • Beautiful user
    experiences
    26

    View full-size slide

  27. In case it's not clear...
    27

    View full-size slide

  28. Marshall McLuhan
    28

    View full-size slide

  29. What did we miss?
    29

    View full-size slide

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

    View full-size slide

  31. First steps to Offline First: AppCache
    31
    Credit for next 6 slides: Caolan McMahon (@caolan), with gracious permission

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  34. 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

    View full-size slide

  35. Just around the corner: Service Workers
    36
    https://github.com/serviceworker/offline-news-service-worker

    View full-size slide

  36. 37
    It can intercept, modify
    and respond to network
    requests
    Credit: @phuunet

    View full-size slide

  37. Continuum of solutions
    38

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. 41
    Friends don't let friends
    implement their own sync implementations.
    Use existing protocols and implementations.

    View full-size slide

  41. 44
    Sync Architecture

    View full-size slide

  42. A great open ecosystem
    45

    View full-size slide

  43. A great open ecosystem
    46

    View full-size slide

  44. Why should you care?
    47

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. Why should you care?
    Users maintain control.
    (And have exactly the right access.)
    50

    View full-size slide

  48. Why should you care?
    51

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  51. “Offline-first means zero latency UX.
    We live in the age of experiences,
    this is the #1 priority” - @janl
    54
    Why should you care?

    View full-size slide

  52. Scale horizontally, not vertically.
    55
    Why should you care?

    View full-size slide

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

    View full-size slide

  54. There are lots of interesting UX design issues.
    This matters more than the backend.
    Help us solve these problems.
    57
    Why should you care?

    View full-size slide

  55. EVOLVE OR PERISH!
    58
    Source: Sony Online Entertainment (Used with permission)

    View full-size slide

  56. Part 4:
    The Future
    59

    View full-size slide

  57. The net will not be as ubiquitous or
    as fast as you dream it will be.
    (Especially in outlying places.)
    60

    View full-size slide

  58. The speed of light will not get faster.
    (Unless we get lucky and invent the ansible.)
    61

    View full-size slide

  59. What does the futurist say?
    62

    View full-size slide

  60. What does the futurist say?
    63

    View full-size slide

  61. What does the futurist say?
    64

    View full-size slide

  62. What does the futurist say?
    65

    View full-size slide

  63. What does the futurist say?
    66

    View full-size slide

  64. 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

    View full-size slide

  65. This problem will not go away.
    68

    View full-size slide

  66. This is not a problem.
    69

    View full-size slide

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

    View full-size slide

  68. 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/

    View full-size slide