React Native EU 2021: Jon Samp - How to iterate on your app faster with Expo

this conference is brought to you by codestack react and react native development experts hey everyone my name is john samp and i'm a software developer at expo and today i want to talk about how to iterate faster with expo i started thinking of this idea because of an app that i use named tweetbot this is an app that shows you your twitter timeline with a nicer design and a bunch of other features that i find really nice and convenient i've been using this app since the early days and it used to look like this this design is really something and a relic of a pastime that i think is really cool i love the skeuomorphic icons and i like the glow around the different elements but i know i can confidently say that if i were to ship an app that looked like this today my users might think it's old or antique so tweetbot also had to update the look and feel of their app if you remember when ios 7 came out they introduced this design language of really thin line icons and everything being very flat and so tweetbot followed suit and just like that they also made a very current version of this app that looks a little different that has some of those same elements from tweetbot three that has those sentinel line icons but now the icons are a little bit thicker and things still look clean we've got soft shadows which is like something that's very in design right now and looking at the spread of these different designs it got me to realize that tweetbot has to change to match what its users expect and what the current design language and philosophy looks like today and they've really had to iterate a lot they've had to take these features and change what they look like constantly this means that the first version of our apps can never be the final version of our apps it would be so nice just to design something and to build something and have it be done but that's not really how apps work they're living they have to change and they have to evolve so to allow our apps to do this what we really need to do is we must embrace iteration and we must think about how our apps can change over time to better match what our users want so let's talk about what iteration looks like in a react native app here's what i think it looks like first you start with requirements what your app should actually do after that there's the implementation of those requirements then you review that your implementation actually fits the requirements then you would make a build of your app you'd submit it to app stores and then once users have it they're going to tell you things that are wrong and things that could be done better so you're going to be fixing bugs and adding more features and making new requirements and then this whole cycle starts over again so usually we can get this circle spinning somewhat and hopefully add a good clip but what if we could make this circle go even faster i think we can do that with tools that expo provides so let's start with the first thing in this wheel which is requirements and so together today we're going to build an app together and this app is going to be a coffee app so let's brew a coffee app together [Music] so let's talk about the requirements we need to implement to make a great coffee app the first one is we need to know the amount of water we need to the amount of coffee we need when making a pour over coffee and we can measure that with a scale usually a great ratio is 16 to one so 16 units of water to one unit of coffee one thing that's kind of hard to do in the morning especially when you're feeling a little groggy is trying to say okay i've got 27 grams of coffee all right what is 27 times 16 so i can figure out the amount of water so that's one problem and one requirement we will have for our coffee app the second requirement is around pulse pouring so pulse pouring is pouring a certain amount during a certain duration during the brew and usually you'll pulse pour three to maybe six times throughout the brewing process so our app should also count down and guide us through the brew and tell us how much to pour and when so those are our requirements that we're going to implement today the next step is implementation of our app the first thing to implement our app is to start an app we can do that by installing expo cli globally with an npm install global command after we do that we can run expo init coffee app this is going to result in a folder structure that looks like this on our computer on the left you can see the directories that expo init made and this is exactly what happens right after running expo init we've got an app.tsx file a few assets and just a couple other standard files in our project directory notice that there isn't an ios in an android folder full of native code expo is able to handle that stuff for us which can make our implementation much simpler and then later down the line if we need native code or custom native modules we can always add them next up we want to start our app which we can do with yarn start and through the prompts we can open up an android emulator and an ios simulator to let us preview in real time the changes that we're making to our app.tsx now one thing that would make this a little bit better and one problem i've had in the past is when i'm developing something in a simulator and then i actually open it on my phone after building it and getting it onto my device is that sometimes it appears a little bit differently so it would be great if i could actually see the app on my phone right now and expo allows us to do this and to me this is such a big step in iteration during development you can download the expo go app and then when you run the yarn start from the command that we did earlier you can use your camera app to scan that qr code which is going to open up your app a development version of your app inside of expo expogo once it's an expo go and you make a change to app.tsx you'll see it appear almost instantly on your actual device what a wonderful way to test the stuff that you're actually using in the stuff that you're actually developing so i should mention we've been talking about expo a lot i work at expo so what is expo exactly expo is a company that builds free open source tools and also hosted services that help you build an application with react native and it might be helpful to talk about what is react native exactly and what is expo exactly so here on the left react native is a set of component apis i think its main job is to render jsx from react into native views on android ios and also the web it comes along with a small unopinionated core it's got great third-party libraries that you can plug in but it doesn't come with a lot of the extra stuff you need to build a full application and that's where expo comes in expo provides a component sdk tools like expo go like we just showed you and also services to build submit and update your app it is powered by react native and sits on top of it and hopefully along with both of these you can create incredible applications so at this point we've got some requirements of what we need to build it's always great to start with a design i actually spent a while designing what this app could look like and i went through a lot of different iterations and i ended up making designs and then implementing them and this is what they look like so on the left i'm implementing requirement number one i ended up putting a question of how many ounces of coffee would you like to brew first so you can say maybe i want 24 ounces and then below it tells you how much water to heat and how many grams of coffee to grind on the right this fulfills requirement number two which is pulse pouring once you tap start it'll do a countdown timer and then tell you how many grams of water to pour over your coffee and when throughout the entire brew process this makes every brew really consistent and if you can replicate a really great process every time you can wake up with a beautiful cup every morning also when testing this app it's definitely a caffeinating process you could say i was maybe a little bit shaky after all of this so the next step is how do we review our app now that it's built how do we make sure that the requirements are actually implemented this is a problem i can test it myself and think like okay this is looking good but how can i let my teammates and my colleagues try this if i wanted to do this manually what i'd probably do is create an ad hoc archive at least for the ios side i would add the allowed devices through the apple developer ui and i would also then build an apk for my android users after that i would have to make builds of my app and then i would have to distribute them either by giving my team download links or distributing them via the play store internal track or via test flight for ios but there's a better way to do this and we can distribute our app faster to our teammates with this solution which is called internal distribution if we let expo handle our credentials and the whole process of this and expo can also build our app we can distribute it to our team even faster let's look at how this works so the first thing we need to do is install something called eas cli which stands for expo application services and eas is the services part of expo that will help set up your app for internal distribution the next command to run is eis device create and this is going to add a device to your credentials that we will then manage for you so every time you make a build you can say okay i've set up this device previously make sure that this build is built for that device that i set up that i actually connected to the provisioning profile is what it's called after that i can run a command called eas build profile internal and this is going to create two different builds for me that are set up to work with those credentials which enables me after these builds are done to do something like this where i can just send a link to someone and say hey try my app and then go to this link and then download the app that i just built and they can sideload it on their phone so what this whole process looks like is registering a device then making a build and then you can send a link to download and that makes this whole process much faster and allows people on your team to try your stuff faster and if you can try something faster you might try more features you might try stuff that you wouldn't try before and this iteration is going to help us make an awesome app now we can automate this process even further by setting up a ci action expo has something called the expo github action and we could make a ci action that looks sort of like this where we set up eas to build every time we merge our code into the main branch our expo action will install our clis and we'll we can then install our dependencies and then we can say let's build for all of our platforms and then also build the internal builds so every single time someone merges to main we can go and test our changes now there might be an even faster way to test our changes which is using expogo and publishing our app with updates so how does this work we can do something called expo publish on our app locally and when that occurs we build a bundle of all of the javascript code and all of the assets in your app and we make that into an update bundle that is stored on xbox servers then when you open up expo go you can see i have this coffee app and if i click on this thing that says default right here it's going to open up that coffee app in xbako itself so anytime i have a change i can run expo publish and then that change will be visible right here in the app without me needing to download another build anyone in your organization that's logged into expo go can access that app which makes it super fast to share the experiences that you're developing and we can make this even faster just like before by using that same ci action that we showed previously but this time using expo publish so that makes that iteration cycle super fast and it also after we've tested it with our colleagues and our team means we're ready to build our app for the app stores so the problem that we want to solve is how can we distribute our apps easily to the app stores it's all built now we've reviewed it it's ready to go what steps do we have to take hopefully not that many if we were to do this manually at least for ios we'd want to enable the app transport security we'd have to configure the release scheme and then we'd have to build the app locally for release and that is a lot of steps and a lot of configuration you have to deal with instead we could use eas or expose application services to do this for you and your team and in the cloud which will hopefully make it an even easier process and one where you don't have to set up everyone's computers identically to make this happen so let's look at the steps to do this we can use eas build and then pass in a profile called release which is set up when you run eas build and that's going to create two apps for us one optimized for the ios app store and another one for the android app store or google play then on our website we can see some ui where you can see all the builds that have ever been made for your app you can download that build and you can also submit that build which is the next step of a process if you were to submit manually we would have to at least for android download the aab file and then open up the play store console and drag and drop that thing in there and then we have to wait for it to upload make sure that everything is good same for ios we'd have to download the ipa file and then we'd probably open up a program like the transporter app and then we'd have to drag and drop that in there and wait for it to upload and see if any logs these are just manual steps that we have to do you could automate this but it would take some extra work so instead eas provides a command called eas submit and we've actually set up this automation for you already so you don't have to deal with this process yourself and you can take builds that you've made with the eas and then run eis submit and you can say take the latest build that i've built and then it will take that build and we will update or submit it to the app stores for you this is super convenient and makes building and submitting to the stores really quick and it really speeds up our iteration cycle for those two steps of the iteration process so our app is now out in the store and we've actually found a bug or let's at least pretend that we did a popular way to brew coffee is using something called an aeropress but let's say that instead of writing aeropress we accidentally wrote sparrow dress instead so if i wanted to fix this bug in production which is a pretty blatant bug i would need to rebuild my apps i would need to resubmit them to the app stores and then i would need to wait for my users to download that new version instead we can use expo updates to help you provide small fixes between builds like this so let's look at how this works expo publish ends up making an update and an update is a bundle of code that's javascript and also the assets from our app so in order to fix this sparrow address problem we would go into our app and then we would fix the spray address to say aeropress once that code change has been made we could run a command like expo publish and in the command line you're going to see that it builds the app at least all of the javascript and all the assets into what we would call an update bundle and then that gets uploaded to expose servers so once we have the new update on our servers it becomes available to users and it's important to think about what users have in their app so essentially apps are built into two parts one part is this native code that's built into the app binary and the native code is stuff that you can't change with an over-the-air update this is stuff like the apps icon and some of the configuration about how the app runs but then there's the second side of the app which is this js code and this update code that we're able to interchange with other updates so if i'm a user using an expo app and i open my app there's a module that's going to query our servers and say is there any new updates and if there is then we're going to look for any new updates based on a configuration inside of that app.json file that we saw when we set up our project this makes it so if you have critical bug fixes and things that you need to get out to users right away you can do that with expo publish so in this case if i ran expo publish with this aeropress fix then my users would open up their app they would download that new code and then they would see the typo fixed it it's at that point that i could start making new builds and then submit them to the app store to get review now there are a lot of different options that we can opt into with expo updates let's look at those okay so i'm here in the expo documentation and inside of app.json there is an updates configuration which i can see here on the left there are three different configurations i could configure which is whether they are enabled or not when to check automatically the different options are on load or on error recovery on load is the default here so when users force close their app and then open their app it's going to check for an update but probably the most important one is this fallback to cache timeout this is saying how long should we wait before launching your app while we download the new update if there is a new update so if this aeropress update was actually like really large and it took people a while to download or if they're on a very slow connection we could cap it at 30 seconds or three seconds or something and if they don't download the update within that time frame then they will fall back to the cache version of their app that's already downloaded on their phone we want to make sure that users can always get their app so that they don't get stalled on that splash screen now there is sort of a trick here by default we set this fallback to cache timeout to zero which means we won't wait at all for any new updates which means if we push an update up to user and they open their app it's not going to wait for the new update to download and it's actually going to download in the background while they continue using the app then the second time that they open their app it's going to load the update that was downloaded in the background the last time they used the app this is preferable for some developers but it also might be preferable for you to let users wait a couple of seconds to download the new update so that they can get those new updates even faster so it's just good to know about the different configurations we can set with updates so this is a lot of stuff that you can do with expo and there's a lot more configuration to all the stuff that i haven't talked about yet but i do want to mention just quickly some of the recent updates and things that have been going on at expo in case that you've used expo before so one awesome change that we've come up with this year with eis is that you can build an app with any native code you can add native modules like bluetooth or you can also add in-app purchases or things like a blur hash module that will allow you to uh add in like a native module that like blurs out your images as placeholders there's tons of these and you can add codes like this and we will still build your app for you and that is not possible we also have something called custom dev clients before i showed expo go and expo go works great if you're not using any custom native code if you are using your own custom native code you can make your own version of the expo go app and still get all of those niceties around opening up updates on your phone and also your colleagues can do this too and finally we're coming out with a service that updates our our updates called eas update and this is incoming this fall and early spring we'll be rolling this out so keep an eye out for that you're going to be able to do things like roll out updates to your users and see exactly which builds are pointed at which updates at all times so the point is let's iterate together and figure out how to iterate faster expo allows you to do this in development by implementing an app without requiring knowledge of your native code you can also review your work faster with internal distribution or with expogo and you can build and submit your apps in lightning speed in the cloud and make it consistent across all of your teammates finally you can fix critical bugs with updates which helps you fix things that might have slipped through the review process which means hey it's coffee time so if you haven't had a coffee today and you like coffee please have one i'd love to have one with you next time we can have something in person uh hit me up i'm always free and available and thank you so much for iterating with me and listening to this talk i hope you enjoyed it and can take some of these concepts into your work life and into the projects that you build in the future let me know if you have any questions and we can't wait to see what you build with react native and with expo you

Channel: Callstack Engineers

Views: 287

Keywords: reactnative, reactjs, javascript, developer, softwaredevelopment, frontenddevelopment, coding, conference, callstack

Id: P7aQ4QlubzI

Length: 21min 19sec (1279 seconds)

Published: Fri Nov 05 2021