Mastering Mobile DevOps: Leveraging React Native for High Performance

Rate this content
Bookmark
Slides

In the dynamic realm of software development, successful industry leaders share a common proficiency in four pivotal metrics: Deployment Frequency, Lead Time for Changes, Time to Restore Service, and Change Failure Rate. Yet, achieving high performance in these areas within the mobile world presents unique challenges. This talk delves into the depth of best practices and innovative technologies within React Native and mobile DevOps ecosystems, all aimed at our ultimate goal: the continuous delivery of value to our users.

8 min
12 Dec, 2023

AI Generated Video Summary

Today's Talk explores mobile DevOps and how React Native simplifies mobile releases. Key metrics for DevOps performance include deployment frequency, lead time for changes, time to restore service, and change failure rate. React Native allows over-the-air updates, eliminating the need for resubmission. Overdue updates offer advantages like bypassing app store validations and quick updates, but have limitations. Other options to consider are in-app models for forced upgrades, EAS Build and Submit, Repack for micro-frontends, and upcoming server components in React Native.

1. Introduction to Mobile DevOps

Short description:

Today, we'll dive into mobile DevOps and see how React Native can simplify mobile releases. Let's clarify what DevOps means. It's the art of producing top-tier software seamlessly and effectively. We'll focus on continuous delivery and its unique aspects in mobile development. Let's delve into four key metrics: deployment frequency, lead time for changes, time to restore service, and change failure rate. These metrics highlight our DevOps performance. The elite performers can make deployments on demand and changes in production under a day. Now, let's explore the unique realm of mobile challenges, starting with device fragmentation.

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.

2. React Native and Over-the-Air Updates

Short description:

Think about the challenges of mobile development, from device compatibility to app upgrades and store reviews. React Native offers a solution by allowing over-the-air updates, eliminating the need for resubmission. With Expo Updates, developers can modify the JavaScript bundle and push it to the cloud, seamlessly delivering the latest app version to users.

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.

3. Advantages and Impact of Overdue Updates

Short description:

Overdue updates provide advantages such as bypassing app store validations, quick updates, and easy rollbacks. However, they only work for JavaScript-only updates and have limitations in terms of bandwidth consumption and app stability. Despite these limitations, they can enhance deployment frequency and reduce change lead time. Other options to consider are in-app models for forced upgrades, EAS Build and Submit, Repack for micro-frontends, and upcoming server components in React Native.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
React Advanced Conference 2023React Advanced Conference 2023
29 min
Raising the Bar: Our Journey Making React Native a Preferred Choice
At Microsoft, we're committed to providing our teams with the best tools and technologies to build high-quality mobile applications. React Native has long been a preferred choice for its high performance and great user experience, but getting stakeholders on board can be a challenge. In this talk, we will share our journey of making React Native a preferred choice for stakeholders who prioritize ease of integration and developer experience. We'll discuss the specific strategies we used to achieve our goal and the results we achieved.

Workshops on related topic

React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
WorkshopFree
In this workshop you’ll learn why we created FlashList at Shopify and how you can use it in your code today. We will show you how to take a list that is not performant in FlatList and make it performant using FlashList with minimum effort. We will use tools like Flipper, our own benchmarking code, and teach you how the FlashList API can cover more complex use cases and still keep a top-notch performance.You will know:- Quick presentation about what FlashList, why we built, etc.- Migrating from FlatList to FlashList- Teaching how to write a performant list- Utilizing the tools provided by FlashList library (mainly the useBenchmark hook)- Using the Flipper plugins (flame graph, our lists profiler, UI & JS FPS profiler, etc.)- Optimizing performance of FlashList by using more advanced props like `getType`- 5-6 sample tasks where we’ll uncover and fix issues together- Q&A with Shopify team
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Workshop
- Intro - Cleo & our mission- What we want to build, how it fits into our product & purpose, run through designs- Getting started with environment set up & “hello world”- Intro to React Native Animation- Step 1: Spinning the wheel on a button press- Step 2: Dragging the wheel to give it velocity- Step 3: Adding friction to the wheel to slow it down- Step 4 (stretch): Adding haptics for an immersive feel
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.