Save 37% off PRO during our Black Friday Sale! »

Patterns for Offline-first applications

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.

311ef954cb39178e7b04627f51e37d15?s=128

Miguel Angel Quinones Garcia

October 21, 2017
Tweet

Transcript

  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