Best way to build Offline first React app using phoenix as the backend

Hi guys,

I am a recent convert to Phoenix/Elixir from meteor. I am currently working on a project with focus on offline first web and mobile apps. I have been looking into couchDB/pouchDB combo but am not entirely sure about the best way to approach the offline aspect of the app.

Has anyone worked on any offline first app with Phoenix? How did it go?

Any advise about the best way to approach an offline first app?

Thanks in advance!

3 Likes

I have not created an offline-first application myself, but I know that Phoenix has some great tools (arguably better than many other frameworks) to reconnect to the back-end and update the diverged state in a consistent fashion:

  • Phoenix websockets actively and automatically try to reconnect whenever a connection failed.
  • Phoenix Presence uses CRDTs ensure consistency across netsplits (both servernode <-> servernode and client<-> servernode), although it is mostly meant for simple states (such as listing what users are online on what devices, or service-discovery)

CouchDB looks interesting, and as far as I can tell from reading some information about it on Wikipedia, it will probably play nicely with Phoenix.

The hardest thing you will probably face is the whole stale caches between (old) local data and (newer) online data. This will still be a hard nut to crack, although I think that in functional land, this can be a lot easier to visualize (and therefore maintain) than in OOP.

4 Likes

I only found this page GitHub - pazguille/offline-first: 🔌 Everything you need to know to create offline-first web apps.. There is example app using pouchdb
GitHub - pazguille/offline-first: 🔌 Everything you need to know to create offline-first web apps.. The couchDB/pouchDB looks interesting, one concern worth investigation how it scales.

One solution would be to write own pouchdb-server in exlir instead nodejs :slight_smile:

Even Facebook relay does have yet support for this Discussion - using Relay offline · Issue #676 · facebook/relay · GitHub
This is not easy problem to solve for example conflicts resolution (local vs remote state).
The firebase has some Firebase Documentation

The main point of using couchDB/pouchDB combo is they communicate directly, and the client app only read/writes to local database (For me this is brlilant idea :slight_smile: )
Client App (pouchDB) < ----- network ------> CouchDB

3 Likes

Hi, I started with fixed JSON data. created JSON and store it in a variable in app.js
Created appropriate components and loaded appropriately.
I loaded react and redux libraries. Used brunch.

2 Likes

Offline First with Google Firebase (amazing presetnation)

3 Likes