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.

 Cyril Bonaccini
Cyril Bonaccini
8 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

Available in Español

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.

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

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.
Automating All the Code & Testing Things with GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
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.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
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.
Why is CI so Damn Slow?
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.
The Zen of Yarn
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.
Raising the Bar: Our Journey Making React Native a Preferred Choice
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

Introducing FlashList: Let's build a performant React Native list all together
React Advanced Conference 2022React Advanced Conference 2022
81 min
Introducing FlashList: Let's build a performant React Native list all together
Top Content
WorkshopFree
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
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
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
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
How to Build an Interactive “Wheel of Fortune” Animation with React Native
React Summit Remote Edition 2021React Summit Remote Edition 2021
60 min
How to Build an Interactive “Wheel of Fortune” Animation with React Native
Top Content
Workshop
Oli Bates
Oli Bates
- 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
Effective Detox Testing
React Advanced Conference 2023React Advanced Conference 2023
159 min
Effective Detox Testing
Workshop
Josh Justice
Josh Justice
So you’ve gotten Detox set up to test your React Native application. Good work! But you aren’t done yet: there are still a lot of questions you need to answer. How many tests do you write? When and where do you run them? How do you ensure there is test data available? What do you do about parts of your app that use mobile APIs that are difficult to automate? You could sink a lot of effort into these things—is the payoff worth it?
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.