React Native EU 2021: Truls Skeie - React Native going Native

this conference is brought to you by codestack react and react native development experts hello everyone today i'm going to talk about how you can leverage the native sites in order to improve the performance the readability and maintainability of your react native app some of you might know that airbnb tried to integrate react native into an existing app and coinbase recently rewrote their app from a native app and to a react native app today i want to talk about another option where we actually started off with the direct native app and we moved some of it to the native sites so a bit about me my name is uh troops i work for a company called kirwan here in norway where we make investments available for everyone a shameless little plug here if that's something you're interested in we are looking for reacting recognition developers so please reach out other than that i've been using react native since version 08 when upgrading to a new native version was actually a pain in ass and ios was only supported i've also built and maintained several rack native apps for for a period of years and the project i'm going to talk about today is a project called shift that was started over three years ago so before we dig deep into that i just want to give you overview of what this talk is going to be about so i will start off giving an introduction to shift that so you can get a better context of uh of what app is about when i'm gonna show you the use cases of where we moved uh code from react native to the native site and then i will talk a bit about the motivation of why i wanted to have this talk in the first place then we will start off with the use cases and then i will close off with some closing thoughts so let's dig into it so the elevator pitch for shift is that is a workout workout app that lets you shift within podcast and music uh it's it all started over three years ago when uh my friend and i wanted to carve out more time for podcast in our daily life so we figured that listen to podcasts while we work out is is a good start but really you can't really uh listen to podcasts when you are working out hard but the rest times in between worked flawlessly so what we did is that uh we built an app that plays music and podcast and it's all controlled by a timer so if you run in 12 for four minutes it will play four minutes of music when the four minutes it's up the app will automatically shift podcast and then play podcast for your rest time and then it will shift back to music when your rest time is up so i guess that's enough talk i wanna give you uh just a short intro to the app as well just to give you some issues it might be easier to to to understand what i'm talking about so let's go so uh this is the front page of the app you have a podcast section and a music section for music you can either use spotify or our own curated mixtapes for podcast it's basically just a normal podcast app where you have your queue we have a set of discover episodes and you can also import podcasts from other podcast apps but the most important thing for this talk is the workout screen so let's start a workout and jump right into that so as you can see now i've started working out and i'm in resting mode and then i'm listening to podcast so one thing uh we have a couple of settings and some of them are actually quite important for this talk so remember them later we have setting where you can play beep when it's a given set of time left of your rest or work period and we also have the same for for speech so now i don't know if you saw it but the timer just ran out and it automatically uh shifted to music and now we're listening to club live club live by tiesto and another thing to remember for later is that we also have a notification that also shows the timer left and what is current playing so now the timer will run out again and it will automatically shift to the podcast and you can see that the notification is also updated and we also have a feature where you can pause or what we call it freeze the workout and you can unfreeze it and these are uh features that i will break down later in the talk in the in the use case so um i guess that's enough of that let's dig back into the presentation so uh the motivation for me to to do this talk was that when we started uh thinking about moving stuff from rec native to the native side um there wasn't a lot of good resources out there there are resources on how to create um native uis and to integrate them into your native app there are resources now to create bridge but there we didn't find any good resources on why you should do it and that's essentially why i would like to have this talk here today to try to give you a tool in your toolbox that you can use if you also experience the same thing that's that we have experienced there and i want to give a shout out here to my co-founder michael gunderson this is what i'm going to present there today is a team effort that we have uh done all together so uh let's dig into it and before i start with the use case uh it is important to know what the bridge is in react native because that's essentially the whole point so in react native for you to communicate with the native sites you go back and forth over a bridge so an example of that is that if you create a view and you for instance have a style that will go will be passed over to the native side and rendered on the native side and if you have inline styles for instance the react native need to sterilize that and pass it over a bridge which requires more of the bridge so if you have tried to console.log a property on your style seat you will see that it's a number and that's for performance optimalization so majority of the time everything runs smoothly just like a real life bridge but you can occasionally get traffic jams and that's essentially what i'm gonna show you here today so we have this concept of shifting and uh one thing that i actually didn't show you but you can also press on this button and that will automatically shift to to the other music source and if that happens then that is catched by the javascript site and it goes over the bridge and pauses the podcast because how we play podcast we're using a package called react native track player on the native side so we need to go over a bridge and pause the podcast and that in return resolves a promise when the podcast is paused and then that gets back to the javascript side then we can start playing music and the music does it then so for music we are using a package called react native spotify to play spotify and for mixtapes we are using a package or a package we have built our own and then the same process here it returns a promise over a bridge when the the play has started and we can finally update the ui so you can see here we are going a bit uh back and forth over a bridge so it gets it gets worse so a lot of clients said that they don't want to they don't want to click on this button in order to shift if they don't have put a timer here so we implemented a way for them to do that and that's with headphones so with headphones you can press play or pause you can and it will automatically switch and that that means that we have set up headphones events on the native side and they catch when the client press on player pause and that is emitted over the bridge and then it starts the same process and the same happens for the beep that i showed you and also the android notification in order for us to actually um communicate that you're gonna play a beep then we pass that back over the bridge in order to play the actual beep and then now it starts to get a bit of course over the over bridge but it's not much it's it works perfectly but uh what i'm gonna show you next is uh is is our worst use case but before we get there i wanna just give a bit of background what it actually actually is so i don't know how many of you have tried to run a background timer in react native when the app is also in in in background so it seems like at least it's 3 000 people here who have had this problem or at least looked for a solution and what jose is is mentioning here is that he tried to use package called react native background timer uh which we also tried to use but it had some bugs at the moment and the the same for us unfortunately so uh but as a good samaritan as jose's he also answers his own question and that's he actually computes the value he takes computes the the duration between two dates so he takes the value it takes the the timestamp when uh that does something and when it finished and then he calculates how long the duration has been and that's essentially what we do as well but we have one more uh problem for us and that's uh we have this timer loop because we need to actually check every second what is going on we also need to update the ui every second so every second we are emitting an event over a bridge to the javascript side we update the javascript size and update ui it checks the counter if the counter is zero it will automatically switch and we also proceed some data every 15 seconds for instance we are persisting uh the podcast position so that when you close the app and open it again uh you will start where you left off and now as you can see uh we are sending an event over the bridge every second now uh that starts uh to blow the bridge uh a little bit so how did we solve this so i recently stumbled upon this table on the react native documentation and this is quite important for in this talk as well because as you can see here react native has listed out a couple of components and what they are in the native world and that means that react native is actually compiling your views into native code and why that is important that is because that's what we are going to do as well we are going to create our own native use in order to solve this problem so as you remember this was where we was where we were we were meeting an event every second over bridge and maybe based on that we will go even more over a bridge so what we did is that we took the duration and the countdown timer and we moved those to the native side and then we can get rid of all the calls going over the bridge so essentially what it looks like then is that now we have a main counter which is basically the same as the as the time loop from before and then that emits an event to account ui which is responsible for just displaying this and displaying this and then we have something called the shift master which is responsible for the notification that i showed you playing a beep whenever the counter is at the threshold set by the user playing speech and also when the counter goes to zero it will automatically switch so you will also have control over which audio is playing and have a reference to all the players so this is essentially the architecture we went for and now we are not using the bridge at all but another uh great thing that came out of this uh was actually that our codes got uh much cleaner and the readability was much better so i'm going to show you an example of that so i've i've heard that you might not see this and so i'll try to just go through it briefly but the whole thing is the the freeze or the pause mode that i showed you earlier the thing is that when you press send you start to freeze we need to get the current timestamp and also do some calculation based on previous timestamps and then when you unfreeze it will use those timestamps and calculate what the current uh countdown is and what the duration is and this was quite error prone and you can see we also have some sort of reporting here that reports to century for us and this was really hard for us to debug because we had events coming on the bridge over the bridge every second and then it was very hard to reproduce that events came in a certain order so after we did this rewrite this is essentially what that looks like now now we just have a basic counter which most people start off with when they learn how to program the same as how to do app i guess and it's just made our confidence in the code so much more and this is just one of the examples of where our scalability and readability increased quite a lot so i just want to emphasize some of the key points i think it's important for this talk before we finish and i hope that if there is one thing that you will take away from this talk is that you will have another tool in recognitive tool belts when you are gonna when you are approaching problems so this is the first time i've ever experienced a problem like this and um i i don't think you will reach for this uh often but i it might be and that's also the as i said in the motivation uh part is that what i want to have this talk in the first place to just show that this is actually in is is possible and uh we also did this change um after three years of maintaining the app so we had we knew the ins and outs of the app we knew where we had problems of bugs and where things were hard to um to reason about the code and also uh where things might fail feel a bit sloppy and why do you think and the reason why that is important is that when you start moving stuff from the native side like from react native to the native side you lose one of the biggest uh biggest things of frag native and that's learn once and write everywhere because now essentially we need to write every feature for uh all the platforms that we support and so i don't think this is something you should reach for whenever you have a problem like it you really need to think think it through and make sure that this is something that you would like to maintain for the period of the app as well but another important point for this is that our app was not uh did not perform poorly because going over the bridge as much as as as we did our app was chosen as apple today by apple we were monthly promoted in the app store as well and we're also invited to the apple entrepreneur program so i'm actually i was very positive surprised how good react native is when you're actually bloating the bridge as well and how much the bridge actually can manage so i'm not saying that uh so i'm saying that this is this might not be something that you will do that uh that often and another thing is that often when we when i speak about the rewrite to other uh people um a lot of a lot of them are saying that this is not for them they are not comfortable writing native code they are comfortable in direct native world and i was the same as well so i want to just share a couple of tips on how you can dip your toe into into the into the native side so uh what how we started is that we took a small problem and we moved it to the native side and over time we saw how that went and then we just start moving more and more parts and now each time i try to each time i integrate a new react native native package into my app i always go and look at the score source code and see how how they structure their bridge how are they writing their code and then i use that as an example of things i want to get more interested in and i started the internet and there's a lot of great resources out there on how to create native use correct for for deck native and integrate and create bridge and there's also great resources if you want to pick up android or ios development and at least for me going going into the native site has made me an even better react native developer because now i have a better understanding of how the native platform works so that's it thank you for listening all the way through and if you have any questions for me please route reach out on twitter my handle is through science and yeah that's it thank you

Channel: Callstack Engineers

Views: 445

Keywords: reactnative, reactjs, javascript, developer, softwaredevelopment, frontenddevelopment, coding, conference, software, technology, programming

Id: VSjisljZ1F4

Length: 20min 44sec (1244 seconds)

Published: Wed Oct 20 2021