Challenges on Offline First Web App in Javascript

Presented on monthly meetup BandungJS

Here we share what is Offline First in terms, historical and technological concerns.
We faced differents concern when develop offline first app against classic online only app.
In the end we extend PouchDB+CouchDB stack to accommodate web app development easily

1. Anshori & Dimas Engineering Challenges on Offline First Web App
2. http://offlinefirst.org/
3. Let’s Talk About Offline First ... With or Without Internet Offline First !== PWA Offline First Web?
4. Let’s Talk About Offline First ... 1. Offline is not an error, it’s a state 2. Intermittent Coverage 3. Web App is an “App” 4. Because it’s fun to develop Why should work offline?
5. Let’s Talk About Offline First ... 1. It’s easier to develop offline to online rather than vice versa *)to be continued Why should offline-first?
6. Let’s Talk About How We Got There ... Internal Research and Tools Inspired by Trello (mobile app) Indonesia Coverage are Sucks (IoT) https://tech.trello.com/sync -architecture/ https://tech.trello.com/synci ng-changes
7. Let’s Talk About The Others ... Dev.To Twitter Lite Trello
8. Let’s Talk About The Others Browser → Request HTML, js, css, etc → Render → Eval/run JS → Request data → Render
9. Let’s Talk About The Others Browser → load cached HTML, js, css, etc → Render → Eval/run JS → load cached data → Render and manage assets/data update
10. Keywords Anatomy 1. Serve assets from local first then remote 2. Serve data from local first then remote 3. Save data to local first then remote Offline First Offline Data Data Example: - user/auth data - datatable/main list - dropdown options - Metadata - Anything ... Offline Assets Assets Example: - HTML - JS - CSS - Images - Fonts View Resources Concern
11. Architectural Anatomy
12. How To Offline Assets Mostly PWA CRA Service Worker ready Service Worker for Caching
13. How To What is Offline Data Data Availability even it’s offline Stored in browser, from server Conditional Lifetime Offline Data?
14. Our Stories Challenges
15. Story #1 > Where to stored? Definitely not memory. Persistent storage i.e localStorage or indexedDB > Size Limitation? localStorage (~5 MB) much more limited than indexedDB (up to 50 MB). Special cases for mobile browsers (~5 MB) > Which one should be stored? Depends on what’s your app
16. Story #1 Offline First - Concern on caching strategy - Concern on storage options Online Only - Relatively no concern on storage size limitation - Relatively no concern on caching data strategy VS
17. Story #1: Concerns Data Replacement Strategy Caching Strategy Pick your storage: Query, FileType
18. Story #2 > When to fetch data? Depends on: RealTime, WatchChanges, UserTriggered, Scheduled Only when connection exist > How to manage fetched data? Depends on your needs to show data and how your UX handle data fetching > What about non-offline data? Depends on your UX and coding implementation
19. Story #2 Offline First - Concern on merging offline and online data fetch - Concern on fetching all data (?) Online Only - Relatively simple on demand by page - Relatively simple to handle data fetching strategy VS
20. Story #2: Concerns Merging Offline+Online Data UX Wise When To Sync
21. Story #3 > What if there’s an update remotely? Don’t purge data and re-download > What if there’s an update partially somewhere? Please be prepare for conflict resolution > Conflict Resolution? Similar with GIT, choose your strategy to merge
22. Story #3 Offline First - Concern on race condition - Concern on data merging Online Only - Relatively no concern on data migration/merge - Relatively no race condition update VS
23. UX Wise Story #3: Concerns Conflict Resolution Strategy Manage Data Migration
24. Story #4 > Can we use redux and redux-persist? Need to manage localDB sync to redux state. > Can we not use redux and redux-persist? Make sure [re]-render reactively against localDB > What about memory consumption on component load? Make sure localDB could handle smart rendering on which data to load
25. Story #4
26. Story #4 Offline First - Concern on selective load - Even doesn’t need redux Online Only - Relatively easy to handle selective load (from server) - Even doesn’t need redux VS
27. Story #4: Concerns How to paginate/sort/ filter data How to Sync w/ Component State
28. It’s so d*mn easy intuitively
29. Tech Stack
30. Firebase / Firestore > Strong Points Obvious choice. Backend as a Service. React Native Ready > Limitations • Pay as you scale • Limited query capabilities • Sync features are still experimental/unstable, does not support multi-tab, only works on some browsers
31. CouchDB (server) + PouchDB (client) > Strong Points Distributed Databases. Couch Replication Protocol > Limitations • Lots of things to integrate with React • Non-relational, so no join • Still questionable for React Native
32. TortoiseDB (server) + TurtleDB (client) > Strong Points N/A > Limitations N/A
33. Pouchy (Web + RN) > Strong Points Store Interface Handling. Extending PouchDB+CouchDB (local & remote ready) > Limitations • Still WIP. Some features/bugs are not implemented/identified yet • Same limitations as [C|P]ouchDB solution > Improvements PouchStore & React Native SQLite Adapter Plugin
34. Demo + Code
35. CONCLUSION > Offline First to Online is an MVVM pattern > Do not use Redux for Offline First > Troublesome on cache invalidation and pagination > Must try Pouch! Even for local data - indexedDB (bigger storage) - Multitab Watch Changes. Better Than Firebase/Firestore > Do Not Create Your Own Sync Mechanism - Use existing protocol if any
36. join us: career@efishery.com Subject: [software|android|data] engineer How To Start Offline First Project