Local First Dev
What is local first?
It’s an app that works entirely offline, but also CAN work online and will sync with upstream data store when connected to internet.
Traits of Local First
- Works offline
- Syncs when back online
- Writes are made locally (client-side) first, then synced to the backend data store. Think “optimistic UI”, but fully committed to the idea.
- Data is assumed to be available locally.
- Therefore, spinners/loading states should be very little to not present at all
Architecture
Think PouchDB and CouchDB, the original innovator(s) in the local first architecture. The original idea with PouchDB and CouchDB is to have a copy of the database available on the client side of the web app (the PouchDB).
The client-side instance of the DB is a small subset of documents in the DB — we can’t sync the entire db to the client side. Firstly, that’d just be too much data. Secondly, if the app is being used by multiple users, then we’d be syncing documents + data that don’t belong to the user to the client side. So we’re writing to a small, client-only instance of the DB with a subset of data scoped to the current user.
TODO: diagram here
Writes are first made on the client side (pouchDB), then synced in the background to the backend instance of the DB, the big DB.
Benefits
Firstly, the user experience is greatly accelerated when you don’t have to make roundtrips to the server for every piece of data and every user action. If you’re waiting for your server response for every little thing, the user experience is inherently more slower when compared to dealing with local data.
An unexpected benefit of this is reduced server costs. Linear claims to be able to run their entire backend on two CPU cores for $80 a month: link. That’s insane.
Links:
- this article from ink & switch
- localfirstweb.dev - great collection of resources
- This twitter thread
- Expo + Tinybase walkthrough
Sync Engines + DBs
- rxdb - focused heavily on the “client side database” concept. Angular-flavored. Smells overengineered.
- tinybase - reactive data store for local‑first apps. Can work on top of/in addition to rxdb, and a bunch of other localfirst tools.
- Electric SQL - Really awesome project for syncing a user-scoped subset of your existing postgres DB to the client side.
- Triplit - Somewhat similar to Electric, full end-to-end sync’d-on-client database.
- Evolu - Similar to triplit (fullstack localfirst sync’d db) but end-to-end encrypted (zero server siode knowledge)
- Powersync - paid sync engine
- Replicache - paid sync engine (based on git)
- Flushout
- Livestore - pre-release
- Zerosync - pre-release, seems to be from the people beind replicache
- Instantdb
- Convex - more like a full-on BaaS (ala supabase) that “supports” localfirst in some sense.
- CR-Sqlite - localfirst replicated consistent SQlite instances.
- Verdant
- Legend State - From some dudes who made an open source Linear clone.
- fireproof.storage
Frameworks
Full out-of-the-box localfirst frameworks.
- jazz
- onestack - not yet lofi, but purportedly will support in the future.
Other libs
- vella - Authentication strategy for localfirst.