Patterns for Offline-first applications

The best applications function equally well with and without network access. Offline functionality
goes beyond a simple cache or database, and it is not a binary choice. Offline first encompasses
project requirements, user interface design, security and code architecture.

In this talk we'll review the challenges and ways to build applications that take offline as a first class requirement.

1. PATTERNS FOR OFFLINE-FIRST APPLICATIONS 1 — Miguel Angel Quinones - @miguelquinon - miqu.me
2. 2 — Super Mario Run https://venturebeat.com/2016/12/15/super-mario-runs-internet-connection-requirement-is-dumb/
3. TOPICS > PROBLEM: NOT ALWAYS CONNECTED > DESIGNING FOR OFFLINE > DATA SYNCHRONIZATION > DATA-DRIVEN UI 3 — Miguel Angel Quinones - @miguelquinon - miqu.me
4. TOPICS > PROBLEM: NOT ALWAYS CONNECTED > DESIGNING FOR OFFLINE > DATA SYNCHRONIZATION > DATA-DRIVEN UI 4 — Miguel Angel Quinones - @miguelquinon - miqu.me
5. ARE MOBILE DEVICES REALLY ALWAYS CONNECTED? 5 — Miguel Angel Quinones - @miguelquinon - miqu.me
6. > Roaming abroad > In the wildlife > Tube > Night club > Event with many people > Travelling by plane or train 6 — Miguel Angel Quinones - @miguelquinon - miqu.me
7. > Hospital workers > Construction site staff > Corporate salesmen > Oil rig crew 7 — Miguel Angel Quinones - @miguelquinon - miqu.me
8. USE YOUR APP AS A USER. GO OUT OF THE OFFICE. 8 — Miguel Angel Quinones - @miguelquinon - miqu.me
9. > Lie-Fi > AR/VR bandwidth requirements 1 > Network speeds getting slower! 1 https://medium.com/@sajuab/why-we-desperately-need-a-disruption-in-mobile-connectivity-33255052fcf5 9 — Miguel Angel Quinones - @miguelquinon - miqu.me
10. 10 — http://www.businessinsider.com/lte-median-speeds-drop-50-from-last-year-2016-10
11. TOPICS > PROBLEM: NOT ALWAYS CONNECTED > DESIGNING FOR OFFLINE > DATA SYNCHRONIZATION > DATA-DRIVEN UI 11 — Miguel Angel Quinones - @miguelquinon - miqu.me
12. Q1: OFFLINE: WHAT DOES IT MEAN FOR MY APP? 12 — Miguel Angel Quinones - @miguelquinon - miqu.me
13. 1. NO NETWORK IS AN ERROR 13 — Miguel Angel Quinones - @miguelquinon - miqu.me
14. 2. NO NETWORK IS TEMPORARY 14 — Miguel Angel Quinones - @miguelquinon - miqu.me
15. 3. NO NETWORK IS EXPECTED 15 — Miguel Angel Quinones - @miguelquinon - miqu.me
16. Q2: HOW TO HANDLE ERRORS? 16 — Miguel Angel Quinones - @miguelquinon - miqu.me
17. OFFLINE USAGE: ERROR HANDLING > Graceful degradation > Optimistic UI 17 — Miguel Angel Quinones - @miguelquinon - miqu.me
18. GRACEFUL DEGRADATION OR HOW I DON'T WANT TO BE BLAMED FOR NOT HAVING NETWORK CONNECTION 18 — Miguel Angel Quinones - @miguelquinon - miqu.me
19. 19 — Miguel Angel Quinones - @miguelquinon - miqu.me
20. OPTIMISTIC UI ERRORS > Salience > Casuality 20 — Miguel Angel Quinones - @miguelquinon - miqu.me
21. https://uxplanet.org/optimistic-1000-34d9eefe4c05
22. https://uxplanet.org/optimistic-1000-34d9eefe4c05
23. TOPICS > PROBLEM: NOT ALWAYS CONNECTED > DESIGNING FOR OFFLINE > DATA SYNCHRONIZATION > DATA-DRIVEN UI 23 — Miguel Angel Quinones - @miguelquinon - miqu.me
24. Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels — Jeff Atwood 24 — Miguel Angel Quinones - @miguelquinon - miqu.me
25. 25 — Miguel Angel Quinones - @miguelquinon - miqu.me
26. 26 — https://storiesofworld.com/human-evolution-and-history-of-wheels/
27. OFFLINE CLIENTS PARADOX 27 — Miguel Angel Quinones - @miguelquinon - miqu.me
28. OFFLINE CLIENTS PARADOX 28 — Miguel Angel Quinones - @miguelquinon - miqu.me
29. OFFLINE CLIENTS PARADOX 29 — Miguel Angel Quinones - @miguelquinon - miqu.me
30. OFFLINE CLIENTS PARADOX 30 — Miguel Angel Quinones - @miguelquinon - miqu.me
31. ! SYNCHRONIZATION PROBLEM ! > Dependant on data > Data loss is critical > Merges > Conflicts 31 — Miguel Angel Quinones - @miguelquinon - miqu.me
32. SYNC STRATEGIES 32 — http://confluence.tapcrowd.com/pages/viewpage.action?pageId=2262404
33. CONFLICT RESOLUTION > Latest wins > Server wins > User decides ⚠ > Conflict resolution: where > No conflict by design 33 — Miguel Angel Quinones - @miguelquinon - miqu.me
34. ⚠ BEST PRACTICES ⚠ > ! Timestamps are unreliable > Use GUIDs > Deterministic conflict resolution > Don't delete > First pull, then push > Design for less conflicts 34 — Miguel Angel Quinones - @miguelquinon - miqu.me
35. SYNC: THERE'S MORE! > Differential synchronization ** > Lamport timestamps, vector clocks > Conflict-free Replicated Data Types ** https://neil.fraser.name/writing/sync/ 35 — Miguel Angel Quinones - @miguelquinon - miqu.me
36. SYNC: AVAILABLE WHEELS > CouchDB lite > Realm > Firebase 36 — Miguel Angel Quinones - @miguelquinon - miqu.me
37. TOPICS > PROBLEM: NOT ALWAYS CONNECTED > DESIGNING FOR OFFLINE > DATA SYNCHRONIZATION > DATA-DRIVEN UI 37 — Miguel Angel Quinones - @miguelquinon - miqu.me
38. DATA-DRIVEN UI 38 — Miguel Angel Quinones - @miguelquinon - miqu.me
39. DATA-DRIVEN UI > Data can change anytime > UI listens to data changes > Reactive 39 — Miguel Angel Quinones - @miguelquinon - miqu.me
40. DUMB VIEW == GOOD VIEW 40 — Miguel Angel Quinones - @miguelquinon - miqu.me
41. UNIDIRECTIONAL DATA FLOW 41 — http://facebook.github.io/flux/docs/in-depth-overview.html#content
42. CHANGE RECONCILIATION How to make users ! tableView.reloadData() 42 — Miguel Angel Quinones - @miguelquinon - miqu.me
43. CHANGE RECONCILIATION 43 — Miguel Angel Quinones - @miguelquinon - miqu.me
44. CHANGE RECONCILIATION 44 — Miguel Angel Quinones - @miguelquinon - miqu.me
45. RECONCILIATION: WORD OF ⚠ > Naive LCS: O(N*M) > Myers diff: O((N+M)*D) > Paul Heckel's diff O(N) > Read the ! > http://wiki.c2.com/?DiffAlgorithm 45 — Miguel Angel Quinones - @miguelquinon - miqu.me
46. DIFFING LIBRARIES > Dwifft (LCS) > Differ (Myers) > HeckelDiff (Heckel) > IGListKit (Heckel) 46 — Miguel Angel Quinones - @miguelquinon - miqu.me
47. OFFLINE: WE CAN DO BETTER 47 — Miguel Angel Quinones - @miguelquinon - miqu.me
48. THANK YOU @MIGUELQUINON MIQU.ME 48 — Miguel Angel Quinones - @miguelquinon - miqu.me