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.

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