nitpick: offline-first is not equivalent to local-first. Offline-first will typically function offline but once the network is available the app will default to using that. Local-first will ALWAYS use the local store of choice first and sync to the network whether there is one available or not.
On our project (react-native expo) we are using Apollo GraphQL + Prisma, so when user save something he do some savefunc({ ... }) that comming from [savefunc, {loading, error...}] = useSaveSomething() standard hook. Then on api side we do connection with PostgreSQL via prisma ORM. So please answer, how (and were) this powersync could help us to implement offline-first approach? Huge like for the pointing out where could I learn more about it
PowerSync handles the read path for data from your Postgres, so it takes care of downloading data from Postgres to the client according to rules that you define, and does that in real-time whenever data in Postgres changes. PowerSync retains the use of your existing write path e.g. using your API or GraphQL. So you could still use the approach for saving data that you mentioned (the savefunc example)
What about the memory space? Many users who have slower internet connections have also smaller memory sizes. Putting the burden of database size and calculations on user's devices can cause some issues. How about slower processors and RAMs? When we call an API, we leave the burden of database calculations on our own servers. It seems like we are moving backward when we didn't use to have REST APIs and cloud.
I am also not sure about the kind of apps that can benefit from the local first approach. For example, I have a restaurant delivery app, and I have to fetch the list of restaurants and dishes from the server. I can't store the whole database on the users' devices. Another example is a shopping website. We will have to sync with the database to know what is sold out and what is available. The apps like ToDo List and Groceries List can benefit from it. The kind of app that doesn't need a lot of syncing.
I kind of missed the point on how to deal with scenarios that multiple users of the app are offline, make changes and then come back online and sync with the backend. How to resolve conflicts?
CRDTs or structured data merge algorithms. You can basically guess for the user (CRDTs) or create interfaces for users to manually resolve their conflicts like in git.
so if it uses sqllite than it saves it as a file in the hosting system? Then you need some permissions for that? And your app would not work in the browser?! Do I understand it correctly? How does the browser apps stores it then? LocalStorage?
I thought the whole point of Supabase was to broadcast an event to all users with the app opened when there was a DB change. If you use PowerSync with Supabase, does it still broadcast events *locally* so the offline app can still consume Supabase events? Or do we have to update data differently when offline, defeating the strongest feature of Supabase?
I think that's the socket / live connection part of Supabase, but that wouldn't include any kind of offline-first mode for your app. If your app is offline you can't consume Supabase events anyway. I'm not entirely sure I get the question, but feel like those are a bit different features!
From my understanding on this local first approaches you technically wouldn't have to listen to these events yourself and do things manually in your app but instead configure the tool you are using (powersync, electric, etc.) with URL of your production DB to listen to those changes on SQLite and keep the Databases up to date. So the flow would be UI -> LocalDB (SQLite) -> Supabase -> AnotherUserLocalDB -> AnotherUserUIUpdated. If a user is offline the one that is online would still see changes in their UI since they are still interacting with the local database first and those changes would still be sent to Supabase. As soon as the other user is online again they should receive those changes via the Supabase to LocalDB Sync update from the tool you are using. Instead of thinking Supabase broadcasting events here think of the tool events that Syncs both remote and local Databases. Also Supabase has many other useful features than just Broadcasting.
@@freddiemotion Tools like PowerSync provide reactive live query hooks, which automatically update when the underlying data in SQLite changes. And the SQLite database itself is kept up to date through an HTTP stream / WebSocket. Read more here 👇 docs.powersync.com/client-sdk-references/js-web#watching-queries-powersync.watch www.powersync.com/blog/local-first-state-management-with-sqlite
does the power sync works like this like if i have data which i need to populate in my app and use it but initially the local db (sqlite) will be empty and api will get called and data will be populated to db and ui and second time i dont want to call the api again as i have data stored in local db so i want to get it from local db instead again api call and i will give a option for force api call for updating the data does the power sync will work in between this or anyone can explain please go ahead!
Very different purpose, ReactQuery manages server state and caching but it's not a local-first strategy in itself, nor does it keep a queue of offline events or help with merging your operations into the DB after going back online.
local first should've been the default behavior since the beginning when we had worse networks, but still. this should be the default, specially with youtube premium
You mean since the beginning when we had the first cellphone or even before that? When we had worst network we also had weaker devices with smaller RAM and memory sizes. Also, the processors were slower. Leaving the burden of database space and calculations on user devices was not a good idea. I am not even sure about now.
Yes, pglite is a project to use a lite version of Postgres as the client-side database in web apps (currently). PowerSync uses SQLite as the client-side database.
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Try PowerSync for free today: bit.ly/local-first
nitpick: offline-first is not equivalent to local-first. Offline-first will typically function offline but once the network is available the app will default to using that. Local-first will ALWAYS use the local store of choice first and sync to the network whether there is one available or not.
>> whether there is one available or not
umm, how can we sync to the network if it's not available?
@@tartachek so sync with it when it's available, easy
This looks awesome! Thank you for showing this to us. I would be interested in a full tutorial with React Native.
Hope we can make it work!
Great tutorial on Power Sync! I wasn't familiar with it before,I'm definitely interested in seeing a full tutorial with React Native
Local first means a lot of logic on the ui right?
Not more than you usually have with managing server state and caching!
Isn't it unnecessary for it to sync to their servers before syncing to your database of choice? 10:19
But what about having your own infrastructure hosting your postgres server and not relying on an external service...
No mention of Realm aka Atlas App Services?
I think they are in the process of rebranding, but yeah we could probably add that to the list!
Please do a video on your thoughts on InstantDB next.
Currently using InstantDB in production. It's great!
what about electricSQL ?
Why no mention of Firestore Bundles? Isn't that local first?
On our project (react-native expo) we are using Apollo GraphQL + Prisma, so when user save something he do some savefunc({ ... }) that comming from [savefunc, {loading, error...}] = useSaveSomething() standard hook.
Then on api side we do connection with PostgreSQL via prisma ORM. So please answer, how (and were) this powersync could help us to implement offline-first approach?
Huge like for the pointing out where could I learn more about it
PowerSync handles the read path for data from your Postgres, so it takes care of downloading data from Postgres to the client according to rules that you define, and does that in real-time whenever data in Postgres changes.
PowerSync retains the use of your existing write path e.g. using your API or GraphQL. So you could still use the approach for saving data that you mentioned (the savefunc example)
Great! Anticipating a full tutorial.
Will see what I can do!
What about the memory space? Many users who have slower internet connections have also smaller memory sizes. Putting the burden of database size and calculations on user's devices can cause some issues. How about slower processors and RAMs? When we call an API, we leave the burden of database calculations on our own servers. It seems like we are moving backward when we didn't use to have REST APIs and cloud.
I am also not sure about the kind of apps that can benefit from the local first approach. For example, I have a restaurant delivery app, and I have to fetch the list of restaurants and dishes from the server. I can't store the whole database on the users' devices. Another example is a shopping website. We will have to sync with the database to know what is sold out and what is available. The apps like ToDo List and Groceries List can benefit from it. The kind of app that doesn't need a lot of syncing.
I kind of missed the point on how to deal with scenarios that multiple users of the app are offline, make changes and then come back online and sync with the backend. How to resolve conflicts?
CRDTs or structured data merge algorithms. You can basically guess for the user (CRDTs) or create interfaces for users to manually resolve their conflicts like in git.
There usually is a timestamp and last write wins
Would like to see full tutorial
Working on it!
Awesome can't wait, thank you
so if it uses sqllite than it saves it as a file in the hosting system? Then you need some permissions for that? And your app would not work in the browser?! Do I understand it correctly? How does the browser apps stores it then? LocalStorage?
I thought the whole point of Supabase was to broadcast an event to all users with the app opened when there was a DB change. If you use PowerSync with Supabase, does it still broadcast events *locally* so the offline app can still consume Supabase events? Or do we have to update data differently when offline, defeating the strongest feature of Supabase?
Yeah that’s what I’m wondering. AFAIK it doesn’t, the UI querying SQLite won’t know new data has arrived. That’s the part I’m wondering about!
I think that's the socket / live connection part of Supabase, but that wouldn't include any kind of offline-first mode for your app. If your app is offline you can't consume Supabase events anyway.
I'm not entirely sure I get the question, but feel like those are a bit different features!
From my understanding on this local first approaches you technically wouldn't have to listen to these events yourself and do things manually in your app but instead configure the tool you are using (powersync, electric, etc.) with URL of your production DB to listen to those changes on SQLite and keep the Databases up to date. So the flow would be UI -> LocalDB (SQLite) -> Supabase -> AnotherUserLocalDB -> AnotherUserUIUpdated. If a user is offline the one that is online would still see changes in their UI since they are still interacting with the local database first and those changes would still be sent to Supabase. As soon as the other user is online again they should receive those changes via the Supabase to LocalDB Sync update from the tool you are using. Instead of thinking Supabase broadcasting events here think of the tool events that Syncs both remote and local Databases. Also Supabase has many other useful features than just Broadcasting.
@@freddiemotion Tools like PowerSync provide reactive live query hooks, which automatically update when the underlying data in SQLite changes. And the SQLite database itself is kept up to date through an HTTP stream / WebSocket. Read more here 👇
docs.powersync.com/client-sdk-references/js-web#watching-queries-powersync.watch
www.powersync.com/blog/local-first-state-management-with-sqlite
Thanks! Anticipating the full tutorial !
Awesome! Looking forward for a full tutorial
What about Couch and Pouch approach?
Ionic and angular tutorial would be lovely!
does the power sync works like this
like if i have data which i need to populate in my app
and use it
but initially the local db (sqlite) will be empty and api will get called and data will be populated to db and ui
and second time i dont want to call the api again as i have data stored in local db
so i want to get it from local db instead again api call
and i will give a option for force api call for updating the data
does the power sync will work in between this
or anyone can explain please go ahead!
What's the advantage of PowerSync over something like ReactQuery?
Very different purpose, ReactQuery manages server state and caching but it's not a local-first strategy in itself, nor does it keep a queue of offline events or help with merging your operations into the DB after going back online.
Cool video Simon. Waiting for the tutorial ...
Create a tutorial Simon, this is an interesting and so useful content 👏
Alright!
any security concerns?
Which exactly?
Data is being stored locally, is there automatic clean up to remove it when synced, is the data encrypted?@@galaxies_dev
Full Tutorial please
A tutorial would be great. Very cool information this. Thanx Simon. 😁
Will see what I can do ✌️
local first should've been the default behavior since the beginning when we had worse networks, but still. this should be the default, specially with youtube premium
Agree!
You mean since the beginning when we had the first cellphone or even before that? When we had worst network we also had weaker devices with smaller RAM and memory sizes. Also, the processors were slower. Leaving the burden of database space and calculations on user devices was not a good idea. I am not even sure about now.
I'd really like to see a full tutorial with it
Is pglite belong to local first? thanks
Yes, pglite is a project to use a lite version of Postgres as the client-side database in web apps (currently). PowerSync uses SQLite as the client-side database.
I need the video for the cons
Do not agree. Its an easy task to create backend for WatermelonDB. But from the other hand it looks like Watermelon is abandoned.
Hello SIMON. this is amazing.... would you do for us a tutorial in ionic and angular
nice video Simon
Thanks mate!
Awesome,would like to see a full tutorial.
Happy to work on that 💪
Why are your videos 25fps!!!
This tech will empower frontend developers again, LOL
Wtf I just open the video and stars 10 seconds before end
What I'm seeing here is that "offline-first" is not an afterthought. It's quite literally the first technical decision you make for a project.
It should be like that in the future!
that looks very similar to electricSQL
They are, but have some important differences (as outlined in the video)
local first != offline first
I'd really like to see a full tutorial with it
Working on it!