Interview: Building an offline-first React Native Group Chat App

[Music] yeah we're we're going to Showcase um a react native group chat app that was built using using par sync um and um yeah I think uh Benedict I think we can start with a quick uh introduction to you for for everyone here um yeah if you could give us some background on yourself um and also your developer background what kind of um tools and Frameworks you have experience with um yeah would be a great place to start yeah sure sure so yeah hi everyone I'm Benedict I'm from Germany originally currently I I do live in Singapore uh and even more currently I I am in Indonesia right now uh but yeah normally based in in Singapore um I am in in my day job I'm a solution engineer for Salesforce but I'm currently on an extended um parental leave I think you call it uh so I have some time to um work on my own projects and get back to programming I started as a developer uh started with and that brings us into the developer background as well started with PHP MySQL and HTML CSS building websites and web applications uh then had a very short uh stint where I did Ruby on Rails progr programming which uh I really liked uh but um then uh moved on to JavaScript and then typescript so nowadays my like favorite stack and and the things that I do and that I feel most comfortable in is writing typescript mainly react and then for mobile of course react native um yeah that's my developer background um and the and the stack basically that I use awesome thanks thanks so much for that and um is there some work of yours or some things that you've worked on that's publicly available if people want to check that out uh yeah sure so I I do have a GitHub Repro I think I can put it in the in the chat later um my username is the same as you can see here in GitHub it's BND dkt which is basically my first name with the uh only consonants spelled out uh so you can find me on GitHub and Twitter with this username and on GitHub you will see that I did two libraries for react native one to create app Clips so maybe some of you know it Apple introduced something to use apps without actually installing them from the App Store um they did that already two years ago I think they haven't really catched on uh which maybe uh partly um is grounded in the fact that it's not very easy to do but with this Library it should be fairly easy to do for a react native Library so that's uh one thing I which I did and another Library I created um allows you to create um live activities and widgets for react native apps you do have to write them in Swift still but this library that I built allows you to um integrate it Swift code into your react native app fairly easy and then one recent um example that you can look at is I launched an app on the app store recently which is called share my stack um which is basically um a way for people to curate and share their personal productivity stack or also their favorite development stack and that's an app that I built with um react native as well and where I used watermelon DB to build it um as an offline first approach um when I started building this I didn't know about po yet and it wasn't really on the on the scene yet because it's so new for react native uh so yeah I did it with watermelon DB and this was like um one of the there's another project where I used offline first so this was the first one where I used offline first and came into contact with this model um and this app that I launched to the App Store I also made it open source so you can look at the repo and and check out all the code that powers this app excellent there there's a public parking near me um that uses app Clips to pay for the parking and I love it it's great I use it all the time so yeah awesome yeah I I I think it's like a really genius idea those app Clips but yeah I I've rarely encountered them in the wild um okay excellent yeah and it was um so just for the context of the audience here um it was because of Benedict's work on the Sher my stack app um that's offline first um that uh we became aware of of um yeah some of the things that he was working on and we asked him to build a group chat app using uh Power sync um in react native um because we had recently launched our react native power sync SDK and we were um Keen to to get some some folks to try it out and um and yeah Benedict agreed to create a group chat application so we're going to um showcase that today so um Benedict I think we can start with just giving people a quick look um at the group chat app we can just kind of quickly show what it's about so people know what we're talking about and then we can talk a little bit about um yeah things like the mental model of working with react native and power sync and then you can take us through the implementation you know how did how did you set it up how did you integrate power sync um and then we can also go to uh to a proper demo of um of the application and kind of dig into a bit more detail but yeah if you can show us a quick look I think that would be a great place to St yeah absolutely I wanted to talk about the data model first and before we look at the data model I thought I thought it would be good to look at at least one two screens so that you have an idea of what this app is about so when we look at the data model you can connect it to the screens and the UI that you saw um so yeah the idea was to do a group chat app um as a demo project so this is not something where I expect to challenge WhatsApp or signal with this it's just like really a demo project to Showcase what offline first is about and what power sync um can do to make this really really easy and reliable and yeah that is what you see here so really if you think about the functionality think about think basically WhatsApp uh signal telegram whichever um group set app you you use so we have a chat screen um where you see the reent chats with either individual people or groups and then you have a contact screen where you see the people that you connected with on this group chat app and you can search for people and add them to your contact and then you have a settings screen where you can set your own name and username so basically you log in with an email and a password and then uh your profile has a name and a handle uh which you can set here and other people can find you via this name or via this handle or username and then uh yeah you can see the contact that you are connected with and see the recent chats and then just look into a chat for example and then you see the messages going back and forth so that's the very basic premise of the app okay excellent um yeah so I think with that in mind if you can take us through kind of the helping the audience to to understand the mental model of working with re active and bar sync what was your start you can just give us kind of an overview of what was your your starting point for this project how did you approach the development with bar sync um yeah where did you start what were some of the first things that you had to learn about how paring works and how do you go from there um I think uh yeah just kind of talking about the mental model um let's get into that yeah yeah sure so I would say for the very first step I kind of ignored um that it would be offline first and ignored that paing would play a role and I just thought about the app just in general right and how I would approach any app um and I thought about the data model so the first step for me and I'm going to show this in a second as well is uh to set up the data model um I decided to use super base as a backend because I'm familiar with superbase and love it and also because power Sync has a really easy connector to super base so that was like an easy decision and then I used super base to basically create the data model to Define which tables do I need which uh columns do I need in this tables what is the relation uh going to be between the different entities and then the next step was um where offline first and power sync came into the picture um The Next Step was to now think about if I have this General data model which for for me in my head is the data model that lives on the server right it stores all the data of all users um then to make the step and um think about the client and think about okay what parts of this data are the clients going to be working with and storing locally which of course is not all the data right it's uh in the on the server we will have all me messages from all users and on the client we will of course Only Store the messages from the user that is currently logged in and the people that this user is chatting with for example uh so yeah this was like the the Second Step then and yeah then the third step was already to to set up the app um set up um after I had set up um the data model on super base connected to power sync which I will show in a minute and then um integrate the sync rules which I'll talk about in more detail as well so this is basically the sync rules is basically the formalization of what I talked about a minute ago of this question which kind of data do I need on the client uh and for which user which data specifically will will be synced and which data will not be synced um and then I set up the react native app included the power sync SDK um which basically talks to the power sync server and to these sync rules that we are going to look at and receives all the relevant data for the logged in user um and from there I could start building the screens and and work with this data and in in this uh like what makes offline first so like appealing to me is there's the I mean the obvious advantage that an app works offline right so uh if you are really offline you can still work I mean for a chat app that's of like limited usefulness maybe but still you could prepare a message and even send it and then it got sent when you are connected again but for me like the the there are many more reasons which are almost more important than really being offline because of being offline is is quite rare right it's maybe when you are on a plane or something but it doesn't Happ too often but having a spotty connection happens often so for me one of the main benefits of offline first is the sheer performance right the app feels absolutely Snappy and data mutations are immediate um because talking to the server happens like the as the second step in the background and also during development uh it makes it fairly easy because um after I had done what I just said right set up the integrate the power sync SD SDK set up the sync rules I have all data that I need locally on the device and then when I build the screens um I just basically work against a local sqi database uh it's kind of uh like getting back a little bit to I said earlier that I started with PHP and MySQL and there I did fully local development as well right where you had like the local database and feels a little bit like like this simpler right you have the local database you write a query that says okay on this screen I need all the messages give me the messages and then um basically I take the result of the query and loop through the records and display them in a list on the screen and if something changes in the database because for example a new message is synchronized from the server my screen just updates because um the the react components are just tied to this query in the database and when the database updates my react components update so it's it makes a lot of things quite easy to be honest yeah I would say that is like a rough description of the of the mental model okay excellent um yeah I think um I think we can get into the the nety gry now and um I'll let uh Kobe take the lead on on going through that with you um yeah I think you can take us through the implementation and share your screen and show people yeah what how you implemented it yeah yeah um and I think for implementation there obviously the the two aspects to implementation the the one is setting up your sync rules in the in the dashboard and the other is then the rack native coding on the client and um yeah maybe we can start uh with with syn rules and and kind of show you know the the connection to to Super base and take a look at the sync rules as a start yes absolutely so maybe before the sys One Step before I would show the data model in super base so we stay with the excellent with the steps I mentioned earlier and then we will look at the sync rules so you should be seeing the super base dashboard now mhm okay so they do have a nice uh schema visualization now in the dashboard so we can look at that so that is the basic um data model um so maybe let me switch to code for one second uh do you see uh Visual Studio code now yeah okay so basically with super base um what I did is create migrations so that when I set up super base either locally or on the super base um cloud service those migrations are run and basically the tables are set up and this is all plain standard super base um uh procedure right so um what they tell you in the docs how to create a table and this is just equal right so I just set up um some tables and now I'm going to switch back to the data model this is the result of that so I have some migrations that's set up the tables and they look like this we have um a profiles table basically every user um that logs into the app or creates an account gets um a user profile where we store the name for example and the handle um and then I have something like a demo Boolean value here which I use to like there's some stuff in the app where I for example uh distinguish between demo users and real users because if you want to try the app yourself um and you want to have a quick chat you can create a demo user which for example will reply automatically so if you send them a message they will just send a um like a dummy message back to you so that's the user profiles um and then we have contacts and contacts basically um connect user profiles with other user profiles so if you add um a profile into your contact list there's a contact record for this uh so the contact has an owner which is a profile and then links to another profile which is also a profile um and then those contacts you can send a message to so we have a messages table and a message is basically just an entry which has some text as the content and then it has um a sender which is a profile and it has a recipient which is a profile uh so that would be like super easy and then to make it a little bit more complex but I think still quite easy uh we also have group functionality so you cannot only send a message to a single um profile you can also have a message where the sender is a profile but the recipient is a group and for that we hold have a group table and um the group has a name and an owner so someone creates the group he's he or she is the owner and gives the group a name and then of course you add people to the group and that's what we have the memberships for so the memberships basically link groups to profiles again uh to manage the members uh as I said earlier this is a demo app so of course there's like many places where you could make it more complex for example with the groups uh there's not really like a role uh management a group has an owner and the owner can add and remove people and also delete the group and group members can just be in the group and receive messages but you cannot make someone else a manager of the group or something like this so of course I think it it captures a decent amount of complexity um like the the many to many relationship from profiles to itself using the contacts table I think you know that's something we see developers ask about a lot is well how do I Implement many to many so I look forward to seeing that in the rest of the implementation as we dive into things okay cool then I would say let's look at the sync rules so this now uh just coming back to the menal model this is what lives on the superbase server and this is um a representation of all the data that is there for for this messaging app and now the question is if we have a single client a single device from a specific user which data do we need to think to this device so that this user can see their own messages and also the messages of the people that they ch with and also their groups um of course and their contexts so let me switch into the powerthink dashboard um so the first step in the power think dashboard was to create a power sync instance uh and I'm just going to open the instance that I already have to just show you uh what is behind this so the instance gets assigned a URL automatically and then this instance needs to create uh to connect to some kind of back end and in this case um I created a connection to superbase which basically means um going into the super base dashboard where in the settings uh it will give you all the information like the host name of the database and the username and the password and also you can download um an SSL certificate as a file and like five or six different um kinds of information you just take them from the dashboard and I put them in here so we have the name for the connection which is superbase then the host name for the database the certificate that I downloaded from super base and then information like the port and the the username and password just to connect to this database and then I can just quickly test the connection make sure that all the data is entered correctly and then power is connected to super base so this is the like the basic connection but then the question is okay now uh which data does a user get in the client if they log in um and what I found really uh neat is that it that power sync just um leverages the authentication in this case which superbase brings so let me just open the instance one more time you see that in credentials you can specify different uh kinds of authentications all um coming back to Json web tokens but in the case of super base uh I just have to check the box and then in the app I use the superbase authentication and power sync just piggybacks on the Jason web token from superbase and uses this to um determine which user is logged in in the client and then I can use this in the sync rules to now specify which data to send to the client and this is done in this file here sync rules I'm going to open and here you see the sync rules that I specified for for this chat app and what the sync rules do basically is they um create individual and dynamic buckets um which contain the data that is then sent to an individual client where which means like an individual device where the super where the power sync SDK is used and where a user is authenticated and we can just uh start with the first one to to make it more clear so um the first section are the very easy decisions s data to send um where just a question of what is the user and um those buckets they always or the like this sections of the syn rules they always um consist of these two different parts first we have the parameter which basically means I select some kind of ID or selector which I'm going to use then in the following statements to select the data that I want to synchronize and in most cases or the the most easy um scenario for this is that I just have um the user ID from the Json web token so which this line basically means I have the token parameters which um Power syn gets and I take the user ID and I use it with the name user ID and then I can do my selections based on this value so you see that I have a bunch of SQL queries in the data section here where I say for example I want to select all profiles where the ID is the user ID from this bucket so this first line what this does basically is it selects the user's own profile so that we make sure that if you log in on a device your profile will be S to this device and this is almost repeated for every table so for memberships for example I want to have all the memberships where the currently your in user is the is the profile um behind this membership or for contacts I want to synchronize all contacts where the owner of this contact is again the currently logged in user so those are the fairly easy ones uh but you can get more sophisticated uh with this um so uh just maybe we'll we'll take the just the next one uh first you see that um I also synchronize all messages where the sender is the currently logged in user um so that means like everything that you write and send uh gets synchronized to your device as well uh but then of course I also need the messages where you are the recipient so in the next line or in the next two lines you see that I synchronize also all the records from the messages table where the recipient ID is the currently loged in user uh and what you can also see here is that I can not only make a Distinction on the level of whole records what to think but I can also modify the records so what I'm doing here is um I implemented um a typing indicator so um I want to show to someone that you chat with that a new message is being prepared and um I'm synchronizing into two different ways here um checking whether a message has been sent or has not been sent and if the message is sent already so that means it's not a draft anymore it has been sent um we can synchronize the whole message also to the recipient because like the the sender has sent it so it's supposed to be read by the recipient if it's not send and that is what you can hear can you that is what you can see here send at is null so that means this is a me message that has been prepared so draft but it has not been sent um then we synchronize the message because we use this in the client to indicate to the recipient that a message is being prepared so to show a typing indicator for example but we do not synchronize the content so there's a field named cont content and if the message is sent already we synchronize it as it is if this message is not finalized yet we take this string here in this case only three dots and replace it and we synchronize this string as content because it would be uh it would would not be wise even if we maybe do not show the message in the user interface to synchronize data to another user's device which is still in draft mode for example okay I I hope maybe that gets more clear when we look at it in the user interface yeah yeah that three dot syntax might be might look a bit strange but if you're typing an iMessage or in a messaging app you kind of often see those three dots as like okay this is a draft message that someone's composing um and then you used essentially like a server side transformation almost or not really a trans information but um injecting another column um into um on on on power sync service so that that's what's synced down to the client another alternative would be I could not use the star and instead like select specific columns right and only select for example the sender and the recipient and maybe the date but not select the content I do not want to sync it that would also work yeah okay okay um yeah should I go more through the sync rules or do you think that's clear or maybe you can also see if there are any questions at this point yeah I think if um you know anyone's got questions drop them in the chat um we'll we'll keep an eye on the chat but I think um I think for now um that's pretty good um as an overview essentially you're partitioning all the super based postgress data to make it like user specific into these you know partitioned buckets for users um so that each user almost gets their own view into the entire postgress database you don't have to sync the entire postgress database down to each app or to each user um so I think that that gets the point across um and this code will all be made available and I think this is a pretty good um example of some more sophisticated Synchro implementation um yeah exactly and it will be part of the repository right so people can look it up as well yeah so I think we could probably switch to um the react native side um that was a pretty clear explanation of of syn rules thanks yeah then let's look at the react native side one thing that I wanted to put on the screen for pent is the repo of the reactnative SDK because um if you go into the GitHub repo or also if you um look up the SDK on npmjs and the package um directory basically uh you will see the read me file from the and it's also linked from the power B from the power sync docs um and basically that is all I use to implement this right I looked at the docs but also this read me has all the important steps so to implement it in react native there's a few dependencies that need to be installed um on the one hand there's the um Power sync dependencies so there's the react native SDK and then there's the um site dat database that needs to be installed as well so those two I added to the app and then because the react native SDK um uses um for example async iterators which are not supported by um at least Expo I think or react native in general I think as well there's some functionality that needs to be poly filled so if you have worked with react native you have probably come across poly filling because there's lots of stuff that libraries need that it really is Benedict we need to okay he's back you're back we lost you for oh was four seconds or so yeah you're back okay okay okay I I was talking about the polyils and that like if you have worked with react native you have probably used polyils just for functionality that is not there yet in the JavaScript standard that is that is used in react native um and that's also the case with with power sync um so yeah there's a few more dependencies that need to be installed and then there's this import of the polyfill that needs to be added somewhere in the app for example in the main entry point of the app so that um yeah JavaScript functionality that um Power sync needs like async um iterators for example will be will be available but those steps are all here in the in the docs and I basically just installed those dependencies added the import here um you have to add something to the Babel uh bubble config as well also for those async iterators and those are all the prerequisites um for people using Expo um I know that uh some people still use the Expo Go app which basically means you write JavaScript SCP code and then you have the native expoo container to look at the app um that's not possible and also no longer recommended by by Expo I think um you can just build um an expo def client so that means that you will have an expo um powered react native app which includes all the additional native dependencies that are listed here and that's also something you will see in the code yeah and then basically all the prerequisites are there um let me just switch into the code um yeah maybe quick look at the setup again so you see in the bubble config for example that I added this um plug-in that is mentioned in the docs and when if we look at the package Json you see that I have the um Journey apps SDK the posing SDK and also the sqi database I saw that um new versions were released today so I think it's no longer ala even it's there's like a release version I was too afraid to do the update before the call because I didn't want to break uh something potentially so I I'll do it after the call should be a safe upgrade that's more for yeah performance stuff but yeah yeah I did I didn't want to risk break very wise move wise move we have the audience saying like now but yeah that would be a that would be good yeah and then um basically what the app needs is let me just open this um so for people who are not familiar with this structure I'm using Expo router which basically means I have a folder structure which is defining the navigation structure of the app um based on the folder structure and I have a layout route which says for for example in this case we have a tab navigation with these three tabs um which are chats contacts and settings and that is we switch back to the simulator that is what you saw in the app right we have chats contacts and settings and uh what I basically need to do to work with power sync is on the very top level or at like at at some top level right at the very top level I have the authentication where I check if the user is signed in or not but at at the stage where I know that the user is authenticated I basically add a context provider um which is also provided by the power sync s spk which is just um a default um react context provider which has the power syn context and if we look into this we see that this is where the setup basically happens so uh here I import the polyils and I also have the setup steps um which are also in the readme of the SDK and in the docs um so I have to define a schema and I will open this in a second so that you see this as well uh and then I specify the file name of the local site database that will be used within the app container um I have a connector just jump into this the connector basically um is the glue between the power sync SDK and the back end because power sync works of course with different back ends not only with super base I used it with super base now in this scenario but it could be a totally different backend and what this backend connector does is basically it um tells power sync how to talk to the back end because data that is red is coming from Power sync and as I showed earlier I connected the power sync server with my superbase backend so there we have the connection but if I now create data in the app this data needs to be written to the server as well and this writing to the server will happen VI this backend connector um and this is also where of course we introduce the authentication to tell paring how to get the user credentials um of the currently logged in user to then use this to talk to the power sync back end and get the the correct data for the currently logged in user um yeah and if I can expand on there because or is something that you know um kind of can potentially um take a bit longer for people to understand um but um the fch credentials is a function that developers must Implement in the case of super base they can pretty much just copy paste um this code it's it's a it's pretty standard implementation that's what I did I copied it from the docs and it just worked so I didn't anything but I will just touch on it a little bit um in on line 43 um that that Returns the um the O the the cred ials used by the power sync SDK to connect to the power sync service so that it can download data from the you know the sync buckets that have been calculated and um the only really important things there are line 45 and 46 um um so 45 is your power sync URL which is that instance URL you were showing earlier that gets automatically created when you set up your instance and then line 46 uh is just the actual authentication token that your react native app will present to the cloud service when it's making any API calls and inside that if you recall from the sync rules there was that token uh token parameters. user ID that user ID is is embedded inside that token so those are really the the two main things um expires at and user ID or um a little bit for debugging purposes um but and yeah so I just wanted to add a little bit more color into exactly what's happening inside this fetch credentials function um but like you said you can copy paste from the docs all right thank you okay so yeah this is uh this one I just copied and um just connected it to my config file where I stored the poink URL so that this is used here and back to the context provider so this this is now where this um connector is used and then um basically paing is instantiated um initialized and then the connector is used to connect uh I did um something today just just they to um enable the app to disable syncing basically for demo purposes um so usually this is even EAS easier here because you just connect with the connector I introduc some code to just um I have a global state which I call is sync enabled which you can um just switch to the app so in the settings we have like a toggle button where you can say sync enabled and you can toggle it off and then sync should be disabled um so that the connection is taken away and basically power sync is no longer talking to the back end which you can use to just try it out to create records for example and and they do not show up on another device for example and they do not show up in the um super base back end and then if you come online again it is synchronized yeah but other that going offline right yes yes yeah then you have the the context provider where you pass in this um pass sying instance which is now like initiated and configured and then let's may just look at um one piece of code for example let's just let's take the chat screen so this is um now the screen which um shows up in the first tab where you see all your chats and for this you see that I am using a hook which is provided by par sync as well which is called use power sync watch query and as long as this Hook is used within the context that I showed earlier so so in one child component of the context it automatically knows like which power sync back end to use and then uses the connection and basically just executes the query and here I'm just um querying for all the chats um it's in this case it's it's a bit of a complicated query because um I have group chats and individual chats and I quer them and join them into one you see that there's a a union in here so I I take group chats and individ individual individual chats and join them so that in the end you have one list uh you can pass in parameters as well in this case a search um function which comes from a text or a search string which comes from a text box and what is really neat about um this Hook is that as the name suggest TS is it is watching the database right so I set up this query and then basically chats if I just select it we can see where it is used down here so you see down here I have a list which is basically um yeah just a flat component from react native where I pass in the data for example the chats um other data as well because I have a list that consists of different types of data and I just render the list to show the chats and because this is a watched query that means that um in if power syn synchronizes in the back end there's new messages or new chats that are sync from the server the interface will automatically reender and show the new items without me doing doing anything for that so that's quite in my eyes it's really powerful and and convenient um do not uh like have to worry about retching data or like polling for updates or something I just used this used uh use power sync watch F and I can always be sure that my UI reflects the the database yeah and I think mostly that's what the purpose of all the polyils were that you needed to install up front were to enable the HTTP streaming so that you get those nice live data views in your app and and your code is nice and elegant as well you don't have like awkward polling timers to refresh the SQL queries or anything like that y yeah yeah that's I mean you see that uh like here is a little bit more code on this page but that is um because I combine different things in the screen for example um you can do a search in the screen as well and then I use a different query uh so that's why there's more code here but it can be as simple as having the query and then having like a list that takes the result of the query and then you have a screen which which always shows the most current data cool okay I think maybe this is a good uh time to look at the app and the functionality in more detail unless there's something I should I should cover about the about the code no and what what were you thinking bouncing between the the app and the code a bit uh could work well yeah yeah sounds good yeah let me switch to the ad so I hope that you see two different iOS devices now okay so on the left is the actual device in your hand and on the right is a simulator yes correct and I'm logging in with so on this one you see that is the email address with a two in the end and in the left one I don't have the two and for that reason when I log in here on the left side you see now this is my first login so now it is showing me that data is being synced right because I logged out before and if I log out then of course all the local data is wiped uh and now I logged in again and then the local database is empty and what you saw with the spinner that was showing for like two seconds was um the device doing the initial thing downloading the data from the server and now I'm logged in and if I go to the settings tab you see that on this device I'm logged in as Ben and on my simulator device I'm logged in as Edis go back to chat so if I open the same chat now for example I on my device I'm using the chat that I have with Alis and then on Alice's device the chat that she has with Ben and then we are in the same chat and what we can do now is for example I can send a message from Ellis to Ben can say hi now you see uh something that I talked about earlier when we looked at the syn rules so you can see on the simulator device Alice has started typing a message which is high and on my actual device what I'm seeing is the three dots so I'm seeing that um Alice is typing a message to me but I'm not seeing the message yet and this is something that um I found really neat and and and a really good example for the syn rules because before we had implemented that uh like I had done the chat functionality and then the idea was to have a typing indicator as well and then I thought about how to implement the typing indicator and then the idea AA was to just um as soon as someone starts typing a message save this message uh as a message uh as a row in the messages table and then we can uh have the send add column to specify whether this has been sent already or when it has not been sent then it's obviously in draft mode and this is really nice because then we can use this draft message to show to the recipient that there is a message being prepared and it ALS also means that um if Ellis now would log in on another device and the message has not been sent this draft message uh would be available on the other device as well so I could start typing a message here and then I could use another device and open the chat with Ben and my input field down here would be filled right so I would have the message that I started typing on another device because it's already in the database and it's already synced uh so that's that's really cool and then uh then I thought about that it is not a good idea to think a message that has not been finalized because that basically means we take something that someone started typing out but has not sent yet and already put it on another user's device which is potentially like a security risk uh but going back to the sync rule that we looked earlier that we looked at earlier is this is something really powerful and nice which you can do with syn rules where we differentiate between is the message really sent or not and if it's not sent then let's not synchronize the content okay am I still uh do you still hear me because I just I do I do yeah I did also see that warning which yeah went away I think it's just a little bit spotty are you still there in the in um Indonesia I'm still in a in the middle of a rice field in Indonesia yeah in the middle of a rice field okay in the middle of a house in the middle of a rice field yeah no no we pretty good it's not too bad it's not too bad yeah you can you can carry on cool yeah that's good okay then let's send the message let's uh let's send and send it so then you see now that I sent it the full it now it falls under the syn rule right so and now the full message is synchronized which means the recipient gets to see it so you hit enter on the keyboard that created a row in the local database on the simulator device the SDK picked up that the row was in the upload queue uploaded it into superbase the row went from superbase via the sync rules down to uh the actual device so there was there was quite a lot there um but it happened pretty quickly okay now let's try uh let's try this again but now on my actual device I'm going to um activate the flight mode so now I'm not connected to the internet anymore and there is something that I noticed uh the status bar will still show W the Wi-Fi signal which is because I'm mirroring my device while quick time um so it is showing you also see that the time is not correct it is always showing the same status bar but I in fact don't have internet now which we will see because now if I send a message hello you see that I have a message that I prepared and sent and on the recipient side it's not it's not there yet right so that locally but it's it's just in the it's just on the local of database and ready to be uploaded but you're offline so it's going nowhere yeah yeah exactly and let's maybe do something else uh let's also create so I have this search bar here which I can use for example to search in the chats that I have open but I can also use it to for example create a family group in this case um so if I search for family and there's nothing there it will offer me to create a new group so I'm doing that now select the group I only have one contact so let's uh take Alis and add her to the group and create the group and then also we can send a message in this group as well guess I'm just thinking now that also makes search nice and fast because all the searches happen locally yes that's like for example um let me show you this if I enter a for example it will show me Alice and family because they have an A in there and it will also offer to create a group called a if I know press L uh it will only show Ellis and this is all really fast and this is like a use case updating the results after every letter that I enter that's something that I would not do if if I would need to query the server right because if you after every letter the user enters send a ping to the server and query new results that's going to be spotty right there will be a delay you cannot build it fast enough on the server basically to to have that really yeah function well but locally you got like very low latency to the server you if you've got like very low latency to the server it the user experience can be okay uh you know returning a search result on on every key press but I found especially when the connectivity becomes a bit spotty then that kind of like search ux degrades very fast um and it's almost impossible to search so that's really nice you usually do is usually I think you would use like a debounce function to make sure that when the user is typing you wait for a few seconds or maybe like few milliseconds right you wait for maybe half a second or a second if there's more coming and then you query the server right but you do not you not you do not just do it after every letter right that's you don't need a de locally yeah even locally I don't care right I just the the bar that we see on top here where I now enter an a for example if we switch back to the code that's basically what is stored in this state here I have the search and set the search as just the basic react State and that is the parameter that gets passed into the qu here which basically means every time the content of this is updated and we can look at the here's the input field and the input field just has an unchange text and then it sets the state so I just take every change of this input pass it into the state into the search state and the state is used in this book and just every time the value changes the query changes as well and then the results change and it's super fast okay but now all of this just happened locally right and now I want to go back offline back online sorry so now I'm online and now what I didn't really Implement is like a good way to to check uh whether I'm back on line so let's maybe just close this once and open this once I noticed that it can take some time for it to to pick up that it's back online yeah I've got that too in my testing and part of it is the device you know reconnecting to the Wi-Fi um getting getting connectivity again okay now it's there do you see the am I still sharing because I got a notification that my okay yeah we can still see so now you can see in the simulator we have the the family group with the message in it so that was a bunch of records that got created right the the family group the member membership the message within the group and that's all synchronized now to the server and then also because I added Ellis to the group it's also synchronized or part of it at least is synchronized to Ellis's um device nice and I think we are all already um like pretty um far into the time here um I there's one thing that I wanted to show in the live demo then maybe we can see uh that that we move on to the other points um there's one thing that I wanted to show because I think it's important to think with offline first to also have in the mental model that offline first in many cases will be some kind of hybrid scenario right for example in in the case of the chat app what we do is we synchronize the profiles of the people that you have added as a contact but of course there might be many many more people on the server that are also using the app um and a place where we can see this is if I go to the contacts tab you see those are the contacts that I have added and if I start typing we have again the very fast search so I can um I can like shorten down the list but those is this is again local data but if I now want to add a contact UM that I have never chatted before and that I did not uh have as a contact before this case of course I need to go to the server so and I solved it in this app by um doing the local search whenever the user is just typing but if the user types something and then hits the search button or or enter I will do a search against the server so in this case you can see here there's a lot more profiles on the server so those of course are not synchronized because let's say this service has has like 1 million people using it of course we do not want to million profiles so in some cases I will need to have to go back to the server which I'm doing here using just the the standard um superbase SDK in this case not the power syn SDK but the superbase SDK because I'm just talking to supervis base directly um but combining the results in one list between the local PA sying results um and the remote server results from superbase and the moment that I take one of these profiles and add it to my context for example let's add questionis here uh now it takes a second should be faster maybe something didn't work uh so it will take a second because now uh and this is probably a scenario where in a production app you would need to do some uh you need you would need to bridge this somehow to add the contact locally as well because what I'm doing now is I'm adding this profile as a contact and because it's a contact then then it gets synchronized to the device as well and I don't know why it's not showing up now maybe something didn't work in this case click on the Plus or again with joh there we go now now it worked maybe the connection was spoty mhm so now they are here because now I added them to my contacts and now they are also synchronized very good okay um there's more stuff to show like the group management for example to add and remove members from a group or to delete a group but I think um in the interest of time maybe we we leave it at that with the live demo what do you think I think so yeah um that that was great uh and a very clear explanation of everything involved thanks so much um yeah any uh any parting Pro tips for developers working with power sync I mean um you've be you've been through the process here and yeah yeah I I think I think my advice would be to to like start with a very simple case right to to just what I did when I started with the app is my first goal was to have one successful round trip right of very s very very simple data just to create data locally uh have it uploaded via power sync [Music] into um then syn back to the device and um I think this is like the very first Milestone that you have set up everything correctly that um Power sync is talking to super base and the app is talking to power sync and all the dependency sign installed and the polyils work um and that was easy and and quick to be honest and then the next step is to take the data model that you maybe already have or that you created and apply the Second Step that I talked about think about what data needs to be synchronized and how can I express this in sync rules and the sync rules were something that like is a bit like it's a new topic right it's like I have not use syn rules before but u in the end it's just SQL code right and it was quite easy to to pick it up and once you get the grip of it it is really easy to to express what kind of data needs to be sync and what kind of data Maybe I I do only need on demand and what was your your very first steps did you start with one of our demo apps or did you start with like a blank app like right at the beginning I started with a blank app so I just did um so it was easier for you to start with a blank app yeah so I'm I'm always using Expo I know that you can use react native without Expo as well uh but I just created a new Expo app using their clii but really just a blank start from scratch and then I followed the steps from the read me of power sync where I just added the dependencies added the power sync um context and uh then then already added the the queries and the connected the queries to the UI great um I see Frank kise asked whether um the repo is available for viewing I think um it's not public just yet but we will be making it available yeah I I do want to um update the to the new SDK version because also with the hook that I I showed that was in the Alpha version there was uh one problem with the hook which and then I saw in the repo that there was already a fixed but it was not released yet so I put this local into the app so I I just want to upgrade to the offic officially released SDK version and then I can also remove my own Hook from there and then it's the code is even it's even less custom code and it's even cleaner yeah but I think that's a question of one or two days now until we can just make this available okay excellent yeah I think when we uh when we post um this video um recording we will definitely to the repo as well okay I think that's everything that we have time for today um yeah thanks so much Benedict really appreciate you taking us through this and thanks to everyone for joining um any final comments or questions I see somebody's typing something in the chat so maybe there's a final question yeah that was a amazingly clear uh presentation thank you Benedict all right excellent okay looks like no more questions so yeah thanks everyone for joining and I hope you have a great rest of your week bye than by bye

Channel: PowerSync

Views: 2,538

Keywords:

Id: Ygvdri7o6Fc

Length: 65min 54sec (3954 seconds)

Published: Wed Oct 25 2023