Mastering Mobile DevOps: Leveraging React Native for High Performance

Hi, there. I'm Cyril, staff engineer at BAM. Today, we'll dive into mobile DevOps and see how React Native can simplify mobile releases. Let's get started.

First, let's clarify what DevOps really means. Its definition remains consistent, whether for mobile or other platforms. I define DevOps around four key pillars, continuous integration, continuous delivery, continuous feedback, and lastly, collaboration. In any DevOps journey, unity is key. It is art of producing top-tier software seamlessly and effectively.

Today, we'll focus on continuous delivery and its unique aspects in the context of mobile development, as this is where it diverges significantly from web development. But first, remember that we can only enhance what we can measure. In DevOps, this is the cornerstone for making the right choices.

Let's delve into four key metrics that can help us identify release processes, trends, and areas for growth. The first one is deployment frequency. It's a measure of your team's agility and ability to deliver new features, updates, or fixes. Next, we have lead time for changes. It measures the speed from code commit to code deployment. The third one is time to restore service. This metric is crucial for assessing your team's responsiveness and capability in handling incidents. The shorter time to restore service is indicative of robust incident management and quick problem solving abilities. Lastly, we have the change failure rate. A lower rate indicates robust testing and quality checks. Together, these four key metrics paint a clear picture of our DevOps performance, highlighting both our strengths and areas to enhance.

The 2023 state of DevOps report compares thousands of companies across these four key metrics. The elite performers can make deployments on demand and changes in production under a day. They have just a 5% failure rate and can recover within an hour. And 18% of participants achieved this. While these stats are eye-catching, the true worth is in the journey, the learnings and the constant refining of your DevOps practices.

Now that we set up our goal, let's delve into the unique realm of mobile challenges. The first one is device fragmentation.

Think about it, we have so many device models out there and making sure our apps works well on all of them is tough. The second one is app upgrades. Think about releasing an app version and discovering crashes for all your users and like websites you can't easily roll back and you can't force users to update their apps. Your only path is to fix the issue, roll forward and hope your users upgrade.

Finally, store reviews is another pivotal aspect of mobile development. Most of the time, they take between 24 to 48 hours, but they can last until one week. Once we submit, we are on the store's clock. And remember, given the elite standards, mobile development is challenging. Hitting these benchmarks feels like impossible.

But here comes React Native, perhaps an answer to some of our issues. To truly grasp how React Native can be our ally, we first need to understand its inner workings. It all starts with Metro bundling up a JavaScript bundle. This bundle gets interpreted by a JavaScript engine at runtime, either JS Core or Hermes. From there, our JavaScript is on its own. It interacts with native modules that provide native features. Both the native code and the JavaScript bundle find their home together inside the final app archive, whether that's an APK for Android or an APK for iOS.

One of the game changers with React Native is its ability to push over-the-air updates. It lets us seamlessly update the JavaScript bundle of our app without needing to resubmit to the app stores. Let's see how this can take shape with Expo Updates. For those of you who don't know Expo, it's a framework and platform for building React Native apps with ease and speed.

Here's a simple roadmap. Developers make an announcement to our app. These are not changes to the native code, only modifications within the JavaScript bundle. Then they push the updated JavaScript bundle to the cloud. Think of this as a storage house where our latest app version sits waiting to be dispatched. Expo acts as a bridge between our cloud and the user's device. When a user opens the app, Expo checks if there is a fresh bundle available in the cloud. If it's true, it fetches and replaces the older version, all behind the scene. Et voilà. Your end user, without lifting a finger, experiences the latest version of OHAP.

One clear advantage of overdue updates is the ability to bypass app store validations, which allows for quicker updates. And these updates can be easily rolled back, offering a safety net. However, the mechanism focuses on JavaScript-only updates, meaning native changes still require traditional app store releases. This approach also increases bandwidth consumption and app instability.

If you release a JavaScript bundle that doesn't align with the native runtime, your app can crash. Finally, you can only use overdue updates for small feature improvements and bug fixes. Otherwise, you'll go against target lines and your app may be removed from the stores.

Let's see the impact of overdue updates on the 4-key metrics. The latest quickly pushed small fixes and improvements, enhancing deployment frequency and cutting down change lead time. And since most of our bugs live in the JavaScript bundle, overdue updates can help us bounce back faster from failed deployments.

We're nearing the conclusion. If you're hungry for more, you can consider checking out for example in-app models for forced upgrades. They are invaluable, especially when addressing critical security issues. You can also check EAS Build and Submit. It's user-friendly, making app releases a breeze even if you're not a seasoned mobile developer. For a fresh perspective on micro-frontends in React Native, you can explore Repack and its integration with Webpack and Module Federation. And finally, keep an eye out for server components, as they are coming in React Native too.