[Example App] Offline-first drawing app with online sync

[GregoryConrad]

Idea from https://www.reddit.com/r/FlutterDev/comments/191wpbh/comment/kh63i78/?utm_source=share&utm_medium=web2x&context=3

[GregoryConrad]

Key requirements:

• User has a list of drawings on homepage
• Users can make new drawings
• Undo/redo strokes
• Auto save to device
• Sync with online when device online

[jtkeyva]

cool. looking forward to seeing how you do it

local/offline-first pixel drawing: https://www.reddit.com/r/FlutterDev/comments/16rleq7/a_live_demo_of_a_family_of_realtime_localfirst/

[GregoryConrad]

Unfortunately, I’ve realized, I don’t have the bandwidth to implement something of this size anytime soon :/

[jtkeyva]

Understood

[satvikpendem]

What about a simple todo list application with shared state?

[GregoryConrad]

@satvikpendem there is a todo list application under /packages/flutter_rearch/example

[satvikpendem]

Does it have shared state? Was looking for something that could sync as that might be a great use case especially for cross platform apps in Flutter that might need to share data seamlessly without conflicts.

[GregoryConrad]

Was looking for something that could sync as that might be a great use case especially for cross platform apps in Flutter that might need to share data seamlessly without conflicts.

Ah, you're probably looking for CRDTs. There is a great demo of those in Dart here and you can see the CRDT package here.

Does it have shared state?

You'd have to define shared state for me--but it uses Mimir as a database which exposes a stream based API to provide updates to the UI when data in the db changes.

[satvikpendem]

Ah OK I've used CRDTs before but thought this issue was asking for something like that implemented in ReArch, I might be misunderstanding then. Basically by shared state, if I have two devices such as a phone app and a web app, and I add a new to do for example, I want it to be automatically reflected on the other devices by way of some client to server to (other) client communication. And if one client is offline, the changes would be reflected when online again while still not necessarily overwriting the changes from the offline client. Is that possible with ReArch?

[GregoryConrad]

@satvikpendem Totally possible with ReArch, but your server will need to support pushing out updates (alternatively, you could use a poll-based approach, but I wouldn't recommend that at all). If you aren't using a service with this functionality built-in (like Firebase or pocketbase), then I'd probably recommend web sockets in case you also want your app to work on the web. If that isn't as much of a concern for you, you could then use a regular TCP socket for lower overhead and use something like protobuf to communicate over the socket. But again, that is going to be a lot of work to implement yourself.

If you aren't using Firebase, but do want a backend that "just works" with realtime updates, I'd highly recommend pocketbase. I know a lot of folks use supabase but I've got mixed feelings about it. IIRC pocketbase supports realtime updates which would cover your needs here.

Edit: I realize I didn't directly address your question; what you are asking for is something that a server needs to support first. Once the server supports it, then it's a question of how to encapsulate the API the server/backend framework exposes into ReArch capsules (which normally is done via Dart Streams and the use.stream side effect).

[satvikpendem]

Great, thanks for the clarification!

[jtkeyva]

@GregoryConrad sorry to go offtopic but what are your mixed feelings about supabase? why do you prefer pocketbase?

[GregoryConrad]

@jtkeyva pocketbase is easily extendable, more performant, and way easier to host yourself. It doesn’t scale, yes, but 99% of apps folks are making don’t need any complex scaling strategy.

[busslina]

@GregoryConrad Sorry to go offtopic too. Can you suggest a general pattern for scaling a system? Where I got stuck is when the backend have cached values (from database or volatile state), what is the best strategy. To have all replicas with the same cache (synced)? Also when each cluster have their WS clients connected and one of them want to send a message (like whatsapp) to another one connected to another cluster.

Also If you can recommend any architecture or tutorial about that.

Thanks

[GregoryConrad]

@busslina Scaling a system can quickly become a complex problem that has many, many books written about it. There isn't a "one size fits all" sort of solution and is highly dependent on your workload.

As far as what to look into, I'm currently reading "Designing Data-Intensive Applications" and would recommend it.

[busslina]

Thanks