Offline First 101

Why the term "Offline First" appears? What does it mean? The difference technically and development? And, what are the challenges ahead?

Transcript

1. Offline First 101 2020
2. Anshori @ans4175 ans4175.dev ans4175@efishery.com
6. “Offline is a state of error” Mindset
7. World Bank: Digital Dividends (2016)
9. “ WWW = World Wide Web, Not Wealthy Western Web @brucel
10. Urban Area Network Coverage https://www.nperf.com/id/map/ID/-/5119.Telkomsel/signal/?ll=-6.873760512640671&lg=10 7.63471776619555&zoom=15
11. Rural Area Network Coverage https://www.nperf.com/en/map/ID/-/5119.Telkomsel/signal/?ll=-6.286604647733838&lg=10 7.9693228378892&zoom=14
12. “Offline is expected and not an error” Reframe Mindset
13. Common Approach (PWA)
14. Missed Approach (PWA) Network Checking Network Cache Data Sync
15. http://offlinefirst.org/ (circa 2013) First Movement
16. First Movement
17. Booming
18. Design & Tech Patterns
19. Design Patterns 1. Optimistic UI 2. Graceful Degradation
20. Optimistic UI (Left) Non Optimistic vs Optimistic (Right)
21. Graceful Degradation 1. Aggressive Caching Is A Better User Experience 2. Let People Interact With Their Content. Always. 3. Make Error Messages Informative And Consistent 4. Don’t Let People Start Something They Can’t Finish 5. Design Your Empty States Well 6. Never Show The Raw Error Message
22. Tech Patterns Offline First is Distributed System
23. Tech Patterns 1. Stack 2. Conflict Resolution
24. Stack (Data Driven UI) “Any code that depended on server logic before now has to implement it itself” “The basic idea behind our sync is to store changes made offline as a series of deltas that are later uploaded to the server” • https://tech.trello.com/sync-architecture/ • https://tech.trello.com/syncing-changes/ CLOUD LOCAL DATA CLIENT UI deltas
25. Stack https://github.com/redux-offline/redux-offline
26. Stack
27. Conflict Resolution: Sync Paradox
28. Conflict Resolution: Event Sourcing
29. Conflict Resolution: Event Sourcing
30. Conflict Resolution: Existing Solution
31. Don’t Re-Invent The Wheel
34. Syncing Data Online
35. Using While Offline
36. Syncing Data After Offline
37. 1. https://design.google/library/offline-design/ 2. https://developers.google.com/web/fundamentals/in stant-and-offline/offline-ux 3. https://uxdesign.cc/offline-93c2f8396124 4. https://github.com/pazguille/offline-first 5. https://uxplanet.org/optimistic-1000-34d9eefe4c05 6. https://flpvsk.com/blog/2019-07-20-offline-first-apps- event-sourcing/ 7. https://github.com/eFishery/pouchy-store-example References
38. Anshori @ans4175 ans4175.dev ans4175@efishery.com Thank You