Challenges on Offline First Web App in Javascript

Slide 1

Slide 1 text

Anshori & Dimas Engineering Challenges on Offline First Web App

Slide 2

Slide 2 text

http://offlinefirst.org/

Slide 3

Slide 3 text

Let’s Talk About Offline First ... With or Without Internet Offline First !== PWA Offline First Web?

Slide 4

Slide 4 text

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?

Slide 5

Slide 5 text

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?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Let’s Talk About The Others ... Dev.To Twitter Lite Trello

Slide 8

Slide 8 text

Let’s Talk About The Others Browser → Request HTML, js, css, etc → Render → Eval/run JS → Request data → Render

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Architectural Anatomy

Slide 12

Slide 12 text

How To Offline Assets Mostly PWA CRA Service Worker ready Service Worker for Caching

Slide 13

Slide 13 text

How To What is Offline Data Data Availability even it’s offline Stored in browser, from server Conditional Lifetime Offline Data?

Slide 14

Slide 14 text

Our Stories Challenges

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Story #1: Concerns Data Replacement Strategy Caching Strategy Pick your storage: Query, FileType

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Story #2: Concerns Merging Offline+Online Data UX Wise When To Sync

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

UX Wise Story #3: Concerns Conflict Resolution Strategy Manage Data Migration

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Story #4

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Story #4: Concerns How to paginate/sort/ filter data How to Sync w/ Component State

Slide 28

Slide 28 text

It’s so d*mn easy intuitively

Slide 29

Slide 29 text

Tech Stack

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

TortoiseDB (server) + TurtleDB (client) > Strong Points N/A > Limitations N/A

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Demo + Code

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

join us: [email protected] Subject: [software|android|data] engineer How To Start Offline First Project