Local-First is the Future, Here’s Why

local first is one of the biggest Trends in 2024 developers are following more local first repositories and companies like Expo are actively working on new Solutions even the most uploaded feature request for super base is offline mode so local first or also called offline first could be the application architecture of the future and it has almost become like a movement in the mobile space it's a bit like web 3 but this time with actual real world benefits as you will see in this video and this trend is especially interesting for mobile app developers as it can dramatically improve the performance of your app and local first and offline first is not just about making your app work when there's no internet connection it's about delivering instant app experiences with the benefits of syncing in case of unreliable Network conditions so in this video I will show you what local first or offline first actually means which options you currently have for implementation how companies use offline first in the real world already and how power swing can make your life easier speaking of power SN this video is sponsored by power SN I would have probably done this video for free but thanks to power sync I could spend even more time on researching and putting together everything for this video Power sync is like a syn layer or middleware between your sqlite database on a client and your postgress database on the back end they enable offline first architecture for realtime reactive apps and you can basically plug it into your existing database back in an app and reap the benefits of an offline first architecture without Reinventing the wheel power swing works great with Expo and super base and in general react native and I will show you some more real life examples and code from Power swing in the end so stick around until then so what is actually local first or offline first people usually think about this as making application work when there's a bad Network condition but it's so much more for a basic definition let's take this from the power swing Block in the offline first Paradigm EP code Works directly with a client side embeded database which automatically syncs with the backend database in the background but more importantly to me your app feels really instant and snappy when you press that save button you get an instant feedback and you're not waiting for this little loading spinner and you're actually using this already in many applications most permanent probably figma in the browser which uses sqlite and the wesm support to make the experience of figma really really instant so let's talk about why local first is so important it's 2024 and users expect your app to be better every year and please loading Spinners are so 2015 right and yes in some cases your application needs an active connection if you want to track the stock prices or what not but many apps can benefit from this architecture so let's go through a few main points that you can benefit from first of all State Management it's always painful caching revalidation invalidation whatever you have to do you have to check your server State and make sure everything works with the app with local first you have a single point of Truth which is your local SQL light dat database you display it and it just sinks in the background loading times you can display and load your app a whole lot faster if you start with a local first approach where you first take the local data and then reload everything new in the background and same is true for updates as I said before if you click that save button you can just give an instant feedback of okay it's saved it's saved locally to the sqlite database and then the background it will upload to whatever background you have but there are even benefits to collaboration this is funny enough because of collaboration usually you think of having an active connection and yes that is true but the thing is that local first is actually built for this pattern of syncing stuff in the background and making it work so instead of building your own real time websocket whatever Logic for collaboration and syncing with local first approach you kind of have that built in already with the architecture on top of that you have the whole availability aspect of course if your app crashes the data is not lost usually all transactions will will be stored locally and when the app recovers you can still recover these transactions and same is true for if your backend goes down you can't save anything in your application in a regular app but with a local first approach every transaction and every change you made is persisted locally and once the back end comes back it will be synced to the cloud but there are even benefits for your beam which is funny because this is about local first but if you think about it you're making less calls to your API you need less API complexity and you will also have less load on your server which means you can probably decrease your server cost by using a local first app architecture so all of this sounds probably very theoretical to you and as I agree so let's take a look at a few examples there's an application called trash Blitz which helps people to track the trash they pick up in national parks and there's a case study with these pictures and you can just imagine how it helps to go through the Yim Park Track the trash and not rely on the network connection because most likely you won't have one in terms of collaboration there's app called cabs which it helps with scheduling for Film Production funny enough uh and because those are also happening in locations where you usually don't really have a reliable Network condition but you still need to have a lot of collaboration and this local first architecture enables applications like these speaking of making applications Snappy there's also an call app called habit kit which I've been following before which is about tracking your habits and as a bonus for an upgrade of that app the developer now wants to intru use local first which will make uh the backup of your data a lot faster another app is called jetp Peg which is used in the travel space for booking and keeping your documents and if you travel you want to have access to your documents all the time so with jetpack you have your application and data always locally available and also crossplatform across all the devices and sync and there are of course many more areas you can think of agricultural worker every service worker that is in the field submitting reports or up dates or incidents in areas where there's a spotty connection but also in terms of for example a point of sales application where you need instant feedback for user coming in and making an order and then having that order behind there in the kitchen where probably the network isn't that great in all of these cases offline first enables these apps to work better for the user and at the same time it's easier to implement for the developers because local first and offline first give you the right Paradigm to set up the architecture in the best possible way okay so probably all of this sounds great and you want to implement local first but developers did not implement this because it's simply painful to set up the whole syncing logic otherwise we would probably all have used this pattern before so what are our options into any 24 that we can use to implement a local first app architecture if you're now screaming Firebase from the rooftops because they have an offline mode let me tell you that Firebase is actually not really following the local first Paradigm they will still try to make a call to to the cloud servers first before falling back to your local offline data so it's not really in the fashion of local first one of the most prominent Solutions is probably rxdb which is a local database for JavaScript applications but you already read this it is a quite generic solution um it is not really focused on react native although it works and the focus is only on working offline but there's nothing really about the syncing of your data to your own backend watermelon DB is a super popular package in the react native world it is an reactive asynchronous database for powerful react native apps uh also for react and it's built with a goal of just best performance for complex applications and again this is great for offline apps it's really fast it adds observables but you have to implement your own sync engine for your back end and front end so it's becoming quite uh complicated to do all of this then there's replic probably a smaller solution which is an in browser persistent key value store which was made for web apps so you already see it's probably not the best for react native um it has really memory fast varites and sync in the background and it's made for instant UI and collaboration I think it's an interesting solution but it's more like a niche thing uh it doesn't really have a whole lot of stars on GI type yet but I will keep an eye on this then there's of course power which I mentioned as the sponsor of this video so power is like a sync layer between your sqlite database and the poest database on the server um in an enables an offline first architecture just like the other packages we mentioned and it has sdks for react native also a flut if you interested in that in the web and it really really makes it easy to set up local first in your application especially without messing up the whole architecture of the rest of your system and this is really one of the important things about power syn because it gives the developer basically full control over how varites are made to postest so uh they can retain existing business logic validation authoriz ation or or server s side Integrations you can get started for free which is currently a hosted plan and they do have planned an open-source self-hosted plan for later this year as I have heard and I'll show you more about power swing in a second but there's one more package that we should mention so the other service that is always mentioned when it comes to local first is electric SQL um on the first look it is actually pretty much exactly the same as power sync it is a drop in solution for uh reactive local first applications with postgress uh but the problem here is that this is a lot more entangled with your database so that was also an interesting comment here on GitHub and it said that yes another solution power sing which is a middleware between calite and postes while electrically basically takes over complete C control of your postest database power sync is just a middleware there's a huge difference between these two as far as I know electric is also currently in Alpha and not recommended for production so I will keep an eye on is as it's 100% open source so let's talk a bit more about power swing and then also see a code demo of this so you can imagine this as having the power swing SDK installed in your react native application it is then using the SQL light database on your device in the background it is syncing with the hosted version of power syn and from there it connects to your database the cool thing is that this also comes with a pre-built functionality for one of my favorite back ends which is super base as I said in the beginning the most requested feature is offline mode for super base and power swing is actively offering a solution for this and I can tell you a pretty good one the philosophy here is that the goal of power swing is to solve the hard problems of keeping data in Sy which is definitely the problem but then get out of the way and that's what I really like about it they really want to make developer life easier it's their Vision that an offline first AR architecture should be actually easier to develop and I wish that this becomes a truth in the future there are some pretty cool pictures here on the power swing documentation about how the data flows in terms of reading your data or writing your data as I mentioned before you have your app with the power SN SDK which is always using the local SQL light database and your Apple always read from there and the power will keep or the power sync servers will then keep your data in sync by using specific sync rules that we're going to see in a second also it's interesting to note for the right case is that your rights are first of all persisted locally into like an uploaded clue the uploaded queue and of course that upload queue is also persistent in the local sqi database so you basically never lose any kind of transaction and from that upload queue they will be directly written to your existing back end or API so power swing is really not messing up with that as you can see Power swing is down here the service it's not messing with the flow of data up here all right so let's dive One Step deeper and look into an actual react native codebase that is using power snc for the sync of the data okay so here's an example from pow sync it is a to-do list app I can now go into one of these lists and then add new items um it's kind of hard to correctly demonstrate this Behavior with offline mode because offline for the simulator is not really working but you see that when I add something in here it is instantly in the app and in the background it is also sync to super base at the same time the way to set up something like this is to first of all have your database ready your back and postgress in this case I was using super base I then created a new project here in the power sync dashboard and I defined some sync rules so these are the rules that verify how your data is sync from the back end back to your device once you got that part set up you would configure your react native application in the usual way with superbase but now also specify a power sync URL that points to the hosted uh version what we just did before and additionally you would define an app schema that resembles how your SQL database looks so we have a app schema here for my to-do table and for my list table and how they are working together once you got all of that set up you would use it in a tiny bit different way as you would now directly use SQL statements here in your application and not for example use the superbase SDK as these reads writes or updates are done to the local sqlite database through the pow sync SDK and yes I completely agree this raw SQL statement in our code does look a bit scary to me at least but as I heard omm integration is on the road map for power sync so in the future this will look a lot better if you would like to see a full tutorial about making react native work with power sync and super base please drop a comment below and I will make it a reality in the next time so let's conclude local first and offline first are no pipe dreams anymore and not just pure concepts for a perfect world they are reality and 2024 will be a big step forward to enable developers to use this new architecture in a more easy fashion if you want more than just making your your app work offline if you want instant app experiences and the best possible user experience you definitely need to opt into local first and you should certainly keep an eye on this space I also hope that this video helps the like 50% that responded in the state of react native surve that they have never heard about local first and hopefully next year it will be different and also special thanks again to power snc for making this video happen check out power SN you can get started for free and I think it's one of the best ways and easiest ways to drop in and enable local first in your react native applications right now and of course let me know in the comments if you want to see a full tutorial on building a react native offline first or local first application and I will make it a reality stay subscribed and I will catch you in the next one and until then Happy coding [Music] Simon

Channel: Simon Grimm

Views: 14,752

Keywords:

Id: SnhNHjqIbNw

Length: 14min 50sec (890 seconds)

Published: Tue Feb 27 2024