Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Challenges on Offline First Web App in Javascript

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


Ahmad Anshorimuslim Syuhada

February 26, 2019

More Decks by Ahmad Anshorimuslim Syuhada

Other Decks in Programming


  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

  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

  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