Moving Off React Native

no secret I love react native it's allowed teams to move faster than they've ever moved before not just on web but on IOS and Android all using native components while there are other technologies that have done interesting things in terms of multiplatform none of them have targeted native code quite as well as react native has when you're under a button it's rendering an actual iOS button on iOS and an Android button on Android instead of some weird abstraction in order to do that react native has to communicate with the native platform and work with the native platform in a lot of different ways which makes everything from testing to integration to bundling to building in CI way harder than it needs to be as such we've seen a lot of developers turn away from react native relatively quickly and even some move off of it and today we're talking about one of those cases this is the case for a Allen which is I believe a French company that recently moved off of react native in favor of Expo so yeah it's kind of a catch I know I click baited y'all but but hear me out a lot of the problems people have with react native are solved incredibly well with Expo in the tooling built around it so let's take a look first off it what Expo is more importantly how the team at Allen moved off of react native onto Expo directly here's the tweet I saw as soon as I saw it I knew I wanted to react to this live so I actually went out of my way to get their permission and they seem pretty hyped on it Yep this is one of the enges from the team so they were hyped I was hyped too let's dive in our journey from react native to Expo for mobile application development at Allen if you're not already familiar with Expo think of it kind of like next SL forell but in the react native world it's a better starting point with a lot of the tools already built in so that you can quickly start your react native app but also maintain it build in the cloud and do all these other things like hot reloads that make react native such a powerful platform classic meme everyone's favorite where on the left side and the right side it's just use Expo but in the middle you have all of this chaos going on with custom tools for IOS and Android Circle CI in the middle of it orchestrating it all and then deploying through these other platforms all the native way it's a lot of work and at Allen theyve always been committed to providing the best experience for users as possible and that extends to their own Engineers through what they call the developer experience we believe that a great developer experience is essential for building highquality software and that it's a key factor in attracting and retaining top talent we've always used react native for our mobile applications as it's a powerful tool that brings the development experience of mobile closer to a web one and reduces concerns about native code and the discrepancies between IOS and Android however we recently made a significant shift in our mobile app development process by migrating from react native to Expo this blog post will detail our journey and the reasons behind this transition so why are they making this move why did they choose expo Expo is an ecosystem of tools on top of react native enabling us to not worry about the native part of our app in most cases and to have web like developer experience it significantly simplifies the development process by eliminating the need for local compilation of IOS and Android apps and allowing Engineers to focus on building and maintaining features for our members there's two ways to use Expo in Dev the first which is really easy and fits under this left side here of the low IQ is there's actually an app in the app store called the Expo Go app which lets you scan a QR code in Dev mode and immediately have the app on your phone that's a really really powerful developer experience that let anybody even on Windows spin up building a mobile app on their iPhone by just running the command and scanning the QR code npx create Expo app they changed this recently guys don't blame me we'll call this mobile demo and now I have everything I need to run with an emulated experience on iOS or Android or natively run with web now just mpm run start and that gives me this QR code and if I scan this QR code on my phone it opens an expo go it is currently compiling the code on my computer and there we go it's asking for permissions for things because it needs to conect my local network that is it compiling and there we are that's my react native app you can see the text open up an app.js to start working so if we go back here I'll go make a code change app.js I'm going to change it to why haven't you subscribed yet and I'll font size 40 and now is immediately on my phone no cables no anything connecting it's that easy for me to install the Expo generic app on my phone and get to work doing Dev on my computer like it's never been that easy and if I make a change here let's change the background color to Black I'm going to save right now and it was that quick going to undo and save right now and it was that quick to swap that's nuts that is an incredible mobile developer experience that like no one's come close to but as soon as you need native stuff that isn't included in Expos app like payments like weird Bluetooth module stuff and you need to have your own native code this wireless bridge can't get you native code on the phone so you have to build your own wrapper similar to what Expo has with go that lets you swap the JS bundle on top of the native code that's already included that's why this side is more and more valid now too though because with tools that they mention here like the Expo Dev client and Expo config plugins now you can build your own Expo Dev shell on your device device that one person at your company or maybe none actually know how to build they just build it in expose Cloud you all install it on your phones and now you can just write code on your computer and see it on your phone immediately it's a really really cool developer workflow that allows you to test your code on the actual devices that you're going to be using it on it's a bit slower cuz it's a Dev mode so the code's not going to be compiled and optimized properly but it lets you see just how bad things can be and use the code on the real device instead of using simulators all day it's really really nice andless you feel that the touch flows and things like that all behave as expected yeah as they said here a lot of the Expo tools make it easier to think less about the device specific stuff and just build and focus on the features for their application while they were considering Engineers to be full stack at Allen they noticed a certain shortage on Native mobile development skills they were struggling to find native Engineers which is still the case especially those that are willing to work with web devs meaningfully even at twitch we had this problem where the native team kind of became a siloed off thing and getting features into the native app was miserable because we'd have to play a lot of politics just to make a moderation Feature work on the phones because a different team was responsible for all of that stuff and as they mentioned here Expo shipped two major features recently that made it a valid option which were the dev client and config plugins because now you can do the native part and also have all of the benefits of Expo and something they haven't touched on too much here that I want to highlight we go to expo's GitHub the state of their packages is insane we just look at the packages on the open source Expo GitHub they have so much stuff they've already built they have an audio video package that uses the best AV players on both iOS and Android they have a background fetcher that let you run fetching code and fetch data in the background they have a barcode scanner that uses the camera and gives you the barcode data automatically they have Expo battery which lets you see how much battery the device has with JavaScript code and Mak decisions based on that response Expo blur which handles native blurring of layers on Native platforms which Android does very differently than iOS brightness controls calendar Integrations direct camera access cellular data native checkbox support native clipboard access native crypto modules all of these things things suck to build yourself if you're building either native directly or through an abstraction like I don't know flutter you have to either build a lot of native code or know these apis and sdks really well for both IOS and Android or if you're using react native you just install Expo image picker and now you have a native image picking Solution on both platforms that's so so powerful and really pump to see both the number of these packages and how wellmaintained and supported they are it's such a cool set of tools that I've relied on for all of my reacting development and it's cool seeing more and more companies getting to take advantage of this due to the dev client and config plugins allowing them to build complex native apps that happen to use react native for the UI layer let's see how they break down the anatomy of react native app because I'm just talking about why I love Expo so much the code of react native application lives in two Realms one is the JavaScript realm that allows the core logic of the program and is typically where developers spend most of their time native modules are the other part and they are employed to tap into native code when certain capabilities cannot be executed in JavaScript think like camera file systems Etc the JavaScript code is bundled into a single file which is then loaded by native code the native code is compiled into a binary that is then installed on the device cook anology of or with web development would be the following JavaScript is the code in the browser and Native modules are the browser apis like Navigator get user Media or Navigator blooth this is where the xod dev client comes in for this analogy what we need is a customized app that can load our JavaScript bundles and has all the native capabilities we need and that's what the xev client does continuous native generation maintaining scaling and updating a single native project is intricate let alone Main multiple in a crossplatform app the tasks become even more complex with the scaling of the project increasing third party dependencies and keeping up with the latest OS release this results in slowing down the development momentum discouraging the addition of complex native functionality thereby leading to the generation of less powerful apps to tackle these challenges a process called continuous native generation is implemented CG is an abstract concept that defines the generation of native code from several inputs typically the fusion of a code template in configuration the result is a native project that can be compiled into a native app it is a process used by Expo prebuild to generate native projects for react native apps but the concept extends Beyond react native or crossplatform apps Expo config plugins are a way to customize the native code for your project during the pre-building process they provide a way to add custom native code and manage native dependencies for your project tldr this lets you install an npm module and now Expo when it builds your app is going to automatically make sure the right pieces are bundled into that app so if you use the camera module you installed the Expo camera whatever in npm it's now going to include the right dependencies in the native bundles so that you can actually use that package in JavaScript previously you would have had to link this all yourself using pods in iOS and using weird Gradle stuff in Android but now you don't have to they are generating the right native code binary based on which packages you're using in need to use Expo and fig plugins are particularly useful when your project requires custom native code this can be needed for a variety of reasons such as you need a library that requires custom native code payments in iOS are a total mess and you have to specify very very very specific SKS on iOS that have their weird restrictions and run on a native level with Apple pay because those are all Project Specific you can't really make a generic module for them because they have to be approved by Apple individually so you likely are writing custom native code for that anyways but now you need to access that code from JavaScript this is where things start to get messy and with Expo plugins it's easier than ever to write that code reuse it and bundle it into the right app in the right time you also might need to just customize native Behavior like have scroll do something weird or have a crazy Zoom effect or some text rasterization that you're doing being able to write custom native code trivially and bundle it all natively really really powerful so let's hear about how they actually made this migration happen the migration process we expected the process of migrating four apps to Expo to be a long and arduous one with that in mind we identified two major items one is avoiding big migration branches in merg hell and two is identifying and classifying the native code here's good old evil Emoji that's how you know this was a struggle when migrating an app to Expo other developers would continue to work on it the naive way to think about it would be to create a branch where the migration would happen this would require that we carefully monitor the drift between this branch and Main would be a timec consuming and error prone effort big feature branches are evil uh the evil of big PRS I'm really excited to do this video in the near future because big PRS don't work especially if they stay open for a while the amount of pain I have had even the last few days from things I screwed up over on upload Thing by taking too long to merge stuff and now the drift is insane like it's a very real problem merging constantly is the only way you can prevent that their solution was to create a new temporary project in their mono repo that would load the entry point for the existing app here's the schema app rot component app registry register entry point for the Expo JavaScript bundle where app rot is mounted app registry register interesting so they're registering the Expo app as the roote app and then just Mount the old app inside of it that way we could operate the migration within a dedicated folder without worrying about breaking the original app where new features were continuing to be shipped every week I've done this before it's still not perfect but it's pretty damn good overall I've had a pretty good experience with migrations where I just have two folders in the same project one is the new version one's the old version we're still shipping the old one to users there's a feature flag where we're working on the new one and we're making sure all the code goes into both it just prevents a lot of the types of like slipping and conflicts that cause problems when you do big migrations like this with the migration to Expo done we started to ship the Expo version instead of react native and kept the Dual setup for a few weeks to clear off the remaining rough edges we finally moved our code from repo apps app-1 to repo rout apps app-1 Expo and then renamed it to app one sounds good to me identify and classify native code that's another important step when you're doing a migration like this when you no longer own the native part of your platform our oldest react native app is 7 years old in eternity in the react native world that that for react native like seven years ago react native was not a good solution it's grown so much since but I wouldn't have picked react native 7 years ago I would even picked it 5 years ago it's like the last three years react 8 has gotten to the point where I would start a new app with it so I don't even want to think about the horrors in this code and as I said the native code evolved during all these years to fit the react native ecosystem changes and are sometimes very specific needs this is the other thing when you're building a native app you almost always have some weird needs that no one else does and the result is some custom code you have to maintain and as a result they've had to carefully list examine and classify all their native code be it their own Solutions or third parties so there's two buckets they broke it down native code that doesn't require native changes like it can use the automatic linking features that now exist inside of react native or native code that requires some specific setup in their native code think about changes in like the Manifest which is like properties of the app what permissions it has what name it is what icons should appear on different screen sizes stuff like that once identified we have to classify it while the first category wouldn't cause problems during the migration the second category would require further analysis to assess that they could make it compatible with Expo so they broke new subcategories out the native code provides an expo config plugin so they can just add it to the dev client and it's good or it doesn't but an alternative of that native code provides the native plugin and they can assess if it's worth swapping over or if none of those are are valid solutions they develop their own plugin the tldr and the Expo config plugin is it lets you write a single file that describes here's how we handle this on iOS here's how we handle this on Android here's how we handle this on other platforms and now when you install that module Expo is smart enough to bundle it into the native platform for the app you're building so it's like almost give it like package Json for Native Integrations in a lot of ways so if the package you're using already has a config plugin awesome you don't have to worry about how it's bundled if it doesn't but something else does cool use that instead and if none of them do how hard is it to write your own that's a really good plan and that way they ended up carefully crafting around 30 in-house Expo config plugins again when you're writing native apps you're going to have a lot of weird one-off native stuff so they had to write these custom Expo configs for those native plugins but once they have those written it all just bundles itself and that took them 6 months to migrate their four apps not only crafting these plugins and ensuring non-breaking changes but also adapting to their continuous integration interesting let's hear about their CI CU I think this is one of the coolest parts of x now that we're fully able to produce a customized Expo Dev client for their needs the objective is to distribute it to their 90 Engineers that's a lot of Engineers to have working on react native apps that's cool they got this all working Expo does provide such Services through their Expo application service and I would strongly encourage you to rely on it I remember when EAS was starting I'm actually grandfathered into a super cheap plan on EAS cuz I was probably in their first like 20 users I was so hyped when EAS came out the tldr is it's kind of similar to what like vercel does with CI and building where they build the code and deploy it for you EAS will build your native app in the different ways you need it built you run the CLI they kick off the build on their server and you just get a link to install it when it's done if you want to have it distribute to the app store for you you can even have it do that in order for it to do this it needs to be able to build apps for IOS and Android and iOS apps have to be built on a Mac so they're actually running a cluster of Mac Minis that will build your app for you and run the right Sears they'll even use your Apple certification so that you can sign the app as your build and then send that to your team to install a version that doesn't even have the JavaScript in it it's just the native parts so they can scan a QR code and do development or you can sign the official production version all just pushing and running a CLI or attaching this into your CI on GitHub like you would with anything else like the nextjs world it's so cool that finally you don't need to run a build on your computer I cannot tell you how many times I had to make a a quick change or fix for an important client using one of our mobile apps and I had to like find my laptop that had xcode set up properly hope that it would still be able to Target the right IO version pray that nothing's changed on that machine and then send out the builds and actually get it it was super super sketchy I kept one of my old MacBooks around just cuz I had my Dev environment set up correctly on it and then I you not the week after I wiped it we had a massive problem and I had to borrow my CTO computer cuz he had it close to set up properly for us to trigger a new build I've since moved to e and had no problem since because I just run one quick command and it works we saying what about VMS what about Docker what about NYX none of those things work work in the Mac OS ecosystem xcode is horrible and if expo's main impact is that you don't need to deal with xcode anymore they have succeeded they have made our lives significantly better just by letting us move out of the xcode world and running these things on their servers instead so yes EAS is dope and it allows for a developer whose life is in Linux who happens to have an iPhone for testing for working on your app they can now work on your app on their computer without having xcode or Mac OS that is dope and as they mentioned here for this company they adapted their CI workflows to First generate the native code of the Expo app think about Expo pre-build and then rely on Fast Lane they're already using it to compile and submit to the stores they created a new CI workflow that proved to be a game changer for their engineering team building distribute the custom Expo Dev client to both app center and S3 App Center so Engineers could install it and S3 so they could download it for simulators that's really convenient because it's just a binary that's signed properly once it's done with EAS and they able to drop fast L and almost entirely it sounds like we created a simple CLI that would automatically download and install the Expo client on any engineer simulator and they can do whatever they want with a single line of code Y in workspace name of the app install Dev client dasp iOS or Android they now rely on the Expo Dev client for mobile development as they would rely on their browser for web the impact of this transition the transition to Expo has been a GameChanger for our mobile development process the feedback from our Engineers has been overwhelmingly positive with many setting the improved developer experience as a major benefit also onboarding new Engineers to mobile has become significantly easier as it only requires two commands install the XF client and then you run the JS bundler this is the biggest part react native is at a point where web developers can meaningfully contribute to it but getting it set up was one of the most painful pieces actually getting a machine with react native and with your app all set up properly so you can do Dev was harder than actually doing the dev if you already knew react that is solved with Expo it's now easier to get a react native project set up than to get a next project setup in a lot of ways and this blog post is an example of just how cool that is and the numbers we went for from an average 7-minute local build time to less than 2 minutes for the S3 download and install on a simulator before the migration to Expo we conducted a get investigation on how frequently a change would happen on the native code and that subsequently would require them to rebuild the app over the last 5 years this number varied from 5 time 760 per month with a mean of around 200 and a team of 90 Engineers 20% of the engineers needing to rebuild the app locally 10% of the Native changes gives you the following hour saved per month we're currently saving our engineering team around 30 hours per month of build time no more xcode xcode signing Android or Java version issues we don't regret you this is just the build time too there not even considering the amount of hell I've went through updating my X code locally making sure the versions of everything is set proper I've lost so much time to these types of issues and just seeing it handled this well is incredible this is a great article huge shout out to the team over at Allen both for putting the work in to do an overhaul like this but also to document it for the rest of us to learn from I wasn't honestly sure before reading this how viable these types of moves were and what I've been recommending is starting from scratch with Expo and Expo go and porting things over that is kind of what they did they had a lot of luck with this partial rewrite and the pulling over the old native app and running it inside of the Expo shell I think what they've described here is a really good opportunity for companies to move over this new development workflow and get even more of the benefits of Expo even quicker than they might have expected to on top of that if you're not already using Expo your team's considering a mobile app or the current mobile apps by a different team that's moving too slow I think they made a really compelling argument here for how powerful these tools can be and how effective you can deliver good software it's a great article huge shout out to the team for this if you want to hear me talk about some of the secret superpowers of react native I'll put a video in the corner here where I talk about why I think it's basically essential for your business if you can use it and if you've already seen that or you're not interested there's a video right below it you might like instead thank you guys again appreciate youall as always peace Nars

Channel: Theo - t3․gg

Views: 170,635

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: gntZth3mIbM

Length: 20min 49sec (1249 seconds)

Published: Wed Jan 03 2024