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 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 Slide

  3. Part 1:
    Why Scale Down?
    3

    View Slide

  4. Getting to Velocity NYC
    4

    View Slide

  5. Getting to Velocity NYC
    5

    View 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 Slide

  7. Getting to Velocity NYC
    7

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

  12. Part 2:
    The Past
    12

    View Slide

  13. 1969-1997 (ish)
    13

    View Slide

  14. Offline was the default.
    14

    View Slide

  15. Online was slow, expensive, rare.
    15

    View Slide

  16. Online was slow, expensive, rare.
    16

    View Slide

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

    View Slide

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

    View Slide

  19. 1989: NoSQL bi-directional synchronization
    19

    View Slide

  20. 1989: NoSQL bi-directional synchronization
    20

    View Slide

  21. Trust and computing
    21

    View 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 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 Slide

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

    View Slide

  25. Part 3:
    The Present (ish)
    25

    View Slide

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

    View Slide

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

    View Slide

  28. Marshall McLuhan
    28

    View Slide

  29. What did we miss?
    29

    View Slide

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

    View Slide

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

    View 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 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 Slide

  34. 34

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  38. Continuum of solutions
    38

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. 42

    View Slide

  43. 43
    Sync

    View Slide

  44. 44
    Sync Architecture

    View Slide

  45. A great open ecosystem
    45

    View Slide

  46. A great open ecosystem
    46

    View Slide

  47. Why should you care?
    47

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. Why should you care?
    51

    View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

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

    View Slide

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

    View Slide

  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?

    View Slide

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

    View Slide

  59. Part 4:
    The Future
    59

    View Slide

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

    View Slide

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

    View Slide

  62. What does the futurist say?
    62

    View Slide

  63. What does the futurist say?
    63

    View Slide

  64. What does the futurist say?
    64

    View Slide

  65. What does the futurist say?
    65

    View Slide

  66. What does the futurist say?
    66

    View Slide

  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

    View Slide

  68. This problem will not go away.
    68

    View Slide

  69. This is not a problem.
    69

    View Slide

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

    View Slide

  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/

    View Slide