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