blog content
The following article is part of The Ultimate Guide to React Native Optimization and discusses the topic of OTA updates. It’s been co-authored by Expo, who shared their insights on EAS Update.
Why is this important?
Traditional ways of updating apps are too slow and make you lose precious time on them. Compared to native apps, React Native applications come with an advantage in this regard, though. The advantage in question are over-the-air (OTA) updates, and this article explains what they mean to your business and how to implement them.
In other blog posts based on The Ultimate Guide to React Native Optimization, we touch on the following stability-related topics:
- Continuous Integration (CI) in improving React Native apps
- Shipping Fast with Continuous Deployment
- Making your app consistently fast with DMAIC and Reassure
- Running tests for key pieces of your app
- Profiling React Native apps with iOS and Android tools
Why should you submit critical updates and fixes instantly through OTA?
The traditional model of sending updates on mobile is fundamentally different from the one we know from writing JavaScript applications for other platforms. Unlike the web, mobile deployment is much more complex and comes with better security out-of-the-box. We discuss this topic in greater detail in our article about Continuous Deployment in mobile apps.
What do OTA updates (or lack of them) mean to your business?
Every update, no matter how quickly shipped by your developers, is usually going to wait some time while the App Store and Play Store teams review your product against their policies and best practices.
This process is particularly challenging in all Apple platforms, where apps are often taken down or rejected because they don’t follow certain policies or meet the required standard for the user interface. Thankfully, the risk of your app being rejected with React Native is reduced to minimum as you’re working on the JavaScript part of the application. The React Native Core Team ensures that all the changes done to the framework have no impact on the success of your application’s submission.
As a result, the submission process takes a while. And if you’re about to ship a critical update, every minute counts.
Fortunately, with React Native, it is possible to dynamically ship your JavaScript changes directly to your users, skipping the App Store review process. This technique is often referred to as over the air update. It lets you change the appearance of your application immediately, for all the users, following the technique that you have selected.
When critical bugs happen - minutes and hours can be essential. Don’t wait for Apple and Google to review your app.
If your application is not OTA-ready, you risk it being left with a critical bug on many devices, for as long as Apple / Google reviews your product and allows it to be distributed.
Even though the review times got much better over the years, it is still a good escape hatch to be able to immediately recover from an error that slipped through the testing pipeline and got into production.
How to implement OTA updates with App Center/CodePush or EAS Update
As mentioned earlier, React Native is OTA-ready. It means that its architecture and design choices make such updates possible. However, it doesn’t ship with the infrastructure to perform such operations. To do so, you will need to integrate a 3rd party service that carries its own infrastructure for doing so.
There are to popular ways to implement OTA into your app. The first tool for OTA updates is CodePush, a service that is now a part of Microsoft’s App Center suite. The second tool is Expo's EAS Update.
App Center/CodePush
Let's first take a look at App Center/Code Push.
Configuring the native side
To integrate CodePush into your application, please follow the required steps for iOS and Android respectively. We decided to link to the official guides instead of including the steps here as they include additional native code to apply and that is very likely to change in the coming months.
Configuring the JavaScript side
Once you set up the service on native side, you can use the JavaScript API to enable the updates and define when they should happen. One of the ways that enable fetching updates on the app startup is to use the "codePush" wrapper and wrap your main component.
Basic CodePush integration
That’s it! If you have performed all the changes on the native side, your application is now OTA-ready. For more advanced use cases, you can also change the default settings on when to check for updates and when to download and apply them. For example, you can force CodePush to check for updates every time the app is brought back to the foreground and install updates on the next resume.
The following diagram code snippet demonstrates such a solution:
Custom CodePush setup
Shipping updates to the application
After configuring the CodePush on both JavaScript and the native side of React Native, it is time to launch the update and let your new customers enjoy it. We can do this from the command line by using the App Center CLI:
And then we continue with a <rte-code>release<rte-code> command to bundle React Native assets and files and send them to the cloud:
Once these steps are complete, all users running your app will receive the update using the experience you configured in the previous section.
Before publishing a new CodePush release, you will have to create an application in the App Center dashboard. That will give you the <rte-code>ownerName<rte-code> and <rte-code>appName<rte-code> that you’re looking for. As said before, you can either do this via UI by visiting App Center or by using the App Center CLI.
EAS Update
One of the services provided by EAS is EAS Update. It provides first-class support for instant updates in React Native applications and is especially easy if you’re already using Expo. EAS Update serves updates from the edge with a global CDN and uses modern networking protocols like HTTP/3 for clients that support them. It implements the Expo Updates protocol, an open, standard specification for instant updates. As with other Expo products, EAS Update provides superior DX and is often a pleasure to work with.
You will need to install the <rte-code>eas-cli<rte-code> package. We have already howed how to install it in the article about Continuous Integration. To get EAS Update working in your project with the bare React Native workflow, you need to set up Expo in your project. See the guide to make that work correctly.
Before proceeding with the further sections, make sure you have EAS Build configured in your project. To build your app you can use either EAS Build or another tool. If
you don’t want to use EAS Build, here’s the guide on what to do.
Setting up the build tool and EAS Update
Info: To build your app you can use either EAS Build or another tool. If you don’t want to use EAS Build, here’s the guide on what to do.
Creating a build
Follow the steps to create a build of your app using EAS Build or another tool of your choice. The new build will include the expo-updates native module, which will be responsible for downloading and launching your updates. Install the build on your device or an emulator or simulator.
Creating an update
Once you have installed the new build on your device, we’re ready to send an update to it! Make a small, visible change to the JS part of your application to help you confirm when your device is running the new update. Now, you’re ready to run the command to create an update and publish it to EAS.
Once these steps are complete, all users running your app will receive the update with your changes. By default, <rte-code>expo-updates<rte-code> checks for updates in the background when an application launches, and this behavior is configuration. With the default behavior, though, terminate your application running on your device and launch it to fetch the new update, which usually takes a few short moments. Terminate and launch your application again, and you should see your new changes live!
You can configure EAS Update in many different ways. EAS Update has the concept called <rte-code>channels<rte-code>, which are a way to send different updates to different builds of your application. There are more advanced concepts like <rte-code>branches<rte-code>, which enable bespoke deployment workflows inspired by those used by some of the largest mobile development teams in the world.
EAS Update is very handy when you need to deploy your changes to production, and it’s also very handy during development. It’s a very convenient and fast way to share your work with your teammates.
Benefits of shipping critical fixes and some content instantly to the users with OTA updates
With OTA updates integrated into your application, you can send your JavaScript updates to all your users in a matter of minutes. This possibility may be crucial for fixing significant bugs or sending instant patches.
For example, it may happen that your backend will stop working and will cause a crash at the startup. It may be a mishandled error - you never had a backend failure during the development and forgot to handle such edge cases. You can fix the problem by displaying a fallback message and informing users about the problem. While the development will take you around one hour, the actual update and review process can take hours if not days.
With OTA updates set up, you can react to this in minutes without risking that bad UX will affect the majority of users.