A new beginning for React Native at WalmartLabs Online Grocery

Almost two years ago we launched our first React Native (RN) page. Now close to 90% of our Walmart Grocery App is powered by RN. The majority of our Online Grocery customers use our mobile iOS and Android apps for their weekly purchases so migrating these apps to React Native was a vision that took some convincing and time to achieve. Of course, the process had its share of bumps in the road. This is the story about this journey.

anders462
anders462
Nov 13, 2019 · 16 min read
Online Grocery Pickup

Our Approach and Advantages of React Native

In the end, we chose a hybrid approach where the existing native code still played a big part. We also took in key learnings from other companies’ successes and failures when they were trying to migrate to the technology. As a result of moving to RN we:

  • Enabled sharing a codebase between iOS and Android
  • Drastically improved unit code testability, coverage, and unified automation framework *
  • Helped transform our developers to general mobile developers who can build UI in RN as well as iOS and Android
  • Enabled flexibility in using Web developers for mobile feature work and vice versa
  • Improved the developer experience via instant page reloads.
  • Leveraged React and JavaScript programming skills/resources across the organization to build mobile applications
  • Shared business logic with our React/Redux Web App when possible
  • Began using Over the Air (OTA) Code Push for critical issues

How it all started

At Walmart Online Grocery we have been using React for almost 4 years, so it was natural for us to look at React Native as a potential candidate to use in our mobile apps. Our director at the time was a big believer in React Native and he pushed for doing our first proof of concept for RN at Online Grocery. It should be noted that Walmart.com mobile app already had several pages in RN at the time when we started this new journey in January 2018. We talked to their teams to understand their pain points to make sure we don’t repeat them.

First Proof of Concept

To start our first POC, we focused on a simple page to build the trust we needed with the rest of the organization. Several pages were considered, including a universal login page which was deemed too complex as a starting point. We ended up picking the last page in our checkout experience, the Order Confirmation Page, or as we call it, the Thank You Page.

RN Order Confirmation page for iOS
  • EN Container Generation: EN has a concept of MiniApps, and a MiniApp is one RN App (with one or more pages). The EN platform’s container generator creates an AAR file for Android and a Framework for iOS for any number of discrete MiniApps
  • EN Cauldron: A Cauldron is a centralized document database that is used to store information about mobile application versions, native dependencies, and information about MiniApps
Electrode Native Open Source: http://www.electrode.io/site/native.html

What happened after the POC?

The first POC had been a brownfield project to test the feasibility and advantages of React Native pages as part of our native iOS and Android apps. The project was a success, and the POC was followed quickly by 2 greenfield projects for post-transaction apps, a Grocery Delivery Location Tracker and a Grocery Delivery Experience Feedback app.

Delivery Location Tracker RN MiniApp

The BIG migration, and the rise of the Grocery RN Platform

In early June 2018, due to the success of the 3 launched MiniApps, it was decided that we should migrate all native views to React Native, as we saw many advantages during the three projects we already completed.

Matterhorn, Switzerland
  • Implement a uniform way of handling state synchronization between the native model and RN Redux state
  • Run the new RN app standalone for this initial phase using our mock server, as integration to actual Android and iOS would take a while and the navigation and state synchronization needed to be solved first
  • Same network API’s are used in many different pages, all pages need session/bootstrap data for example
  • DRY the code and minimize bundle size as we could do extensive component and business logic reuse
  • Have only one place to handle all state synchronizations between the RN and native apps
  • Would work very well with our plans to use new dynamic EN navigation architecture

Our New EN Navigation Architecture

In the RN world, the most likely choice would be to use the react-navigation library. We decided early on, in close cooperation with our EN team, that our navigation architecture should remain native and that we should use a new approach based on ideas from our EN team. This approach gave us some real advantages.

Pros

  • No need for RN to maintain its own back stack. Leverage all that native gives for managing the stack
  • Better performance in page transition, native animations and keep the native feel across the app
  • A/B testing will become much easier as we could replace a single native page with RN page to benchmark and make sure we didn’t have negative business metric impacts
  • Fail-safe to be able to turn off RN pages during migration (what could possibly go wrong)
  • Made deep linking much easier to individual RN pages

Cons

  • Some initial issues with page view analytics events, but this was later solved
  • Requires some initial extra native integration work

State Synchronization

As we decided to migrate page by page instead of all at once and as we used the hybrid approach, we needed to synchronize a number of user interactions and the native model state with Redux. We identified the intersection points that we needed for the apps to work seamlessly. All synchronization needed to work on both iOS and Android naturally.

Initial Bootstrap and configurations

  • Read feature flags from native app to enable turning on and off features for developers, used in VQA, and most importantly in dynamic A/B testing using our WalmartLabs Expo framework
  • Read Environment settings from a native app, for example, Production, Staging, Mock server environments
  • Read other device-specific data from native apps

Model Synchronization

  • Cart state, cart changes on RN page should update the native model with RN Redux cart state and vice versa
  • Favorite item state and favorite item changes on the RN page should update the native model with RN Redux favorite state and vice versa

Other Type Synchronization Scenarios

Honestly, not all this came to us from day one, but they now are all handled by the same handle-native-event.js that we use for all native events. It’s also powered by the same general EN Notification we created. Examples of some use cases handled by this pattern:

  • Store changes and delivery address changes
  • Business logic state changes in native pages not yet migrated
  • 3rd party SDK notifications that should change call to action components on certain pages
  • Page change events to be used for analytics
Simplified diagram of how our Grocery React Native Platform is integrated into our native apps

How We Launched the Grocery RN Platform Pages

After numerous failed attempts at passing A/B tests with all our initial Grocery RN Platform pages (we had way too many pages in one test and so many business analytics benchmarks to pass), we realized that the strategy was to do them one by one instead. This worked out really well. As I mentioned before, our navigation architecture makes it very easy for us to do this gradual rollout.

Workflow and Native Releases and the EN CI for React Native

Today we have a fully automated CI at WalmartLabs that includes building EN containers for all the MiniApps.

  • At regular CodeFreeze day, native CI is triggered which cuts a native Release/7.10.0 branch, for example, thereafter it kicks off the EN CI that cut’s corresponding Release/7.10.0 on all our 8 MiniApps. A new release container version 7100.0.0, in this case, is then generated and integrated to the native releases branches.
  • Integration tests are run after any new container is updated in a native app. We use Magellan/Nightwatch/Appium/Saucelabs for this and our mock server of course.

Crash Monitoring

We’re currently using Fabric but are moving to a new tool that uses source maps. To facilitate the process of creating source maps, we got a new tool from our EN team that auto-creates them for every container build. This makes the triage of RN related crashes much easier.

What We Did to Make it Easier for Developers

Early on we decided to create a detailed GitHub Wiki for everything related to how to get started with RN and our EN support platform. All processes, build flows, setups, PR processes, and best practices were continuously updated. The philosophy was to add any question asked multiple times to the Wiki right away and provide a link as an answer. This saved us a bunch of time when onboarding new developers. And we are always looking to automate more processes as we did with the CI.

Organizational challenges

Let’s face it, React Native is very polarizing for engineers. It was no different for us, and we initially didn’t have that many native engineers believing this was a viable path forward. Things have changed though, after a year we transformed from a small team of 8 developers to over 50 developers contributing to our RN repos. What changed to make this happen?

  • Adding a mix of native and RN engineers to each new feature project. This will lead to cross-training plus ownership

Where Are We Today, and What Does the Future Hold for RN at Grocery?

We’re moving full speed ahead and are currently involved in new projects that use RN front, back, and center. Our goal is to have all pages in RN very soon and we plan on migrating some of the MiniApps that are not part of the Grocery RN Platform back into it. We constantly keep up to date with the latest RN version and work with performance enhancements. We also will create more NativeModule UI components for existing complex native UI where it makes sense.

Other WalmartLabs React Native Medium Articles

Credits

This article was written as a collaborative effort by the engineers at WalmartLabs Online Grocery mobile team — Anders Bengtsson and Daver Muzaffer.

Walmart Global Tech Blog

We’re powering the next great retail disruption.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store