Walmart Labs open sources its tool for bringing React Native to existing mobile apps

Walmart is placing a big bet on React Native. With Electrode, the company’s Walmart Labs division open sourced the React-based framework that powers Walmart.com’s frontend and today the same group is also launching Electrode Native, its tool for bringing React Native to existing native apps on iOS and Android.

The basics idea here is that Electrode Native allows large companies like Walmart to take their existing apps and slowly migrate parts of their code to React Native, Facebook’s open source framework for building native apps in JavaScript. The tool aims to make the integration between React Native and other native apps as straightforward as possible. React Native simply becomes a third-party library that’s used in the native app and the React Native code then lives in what Walmart Labs calls an “Electrode Native MiniApp.”

Typically, developers who want to move their apps to React Native would have to either rewrite their app from the ground, build a quick and dirty integration that’ll cost them later, or build a new platform and tooling for integrating React Native into their apps. Walmart went with the last option.

This approach also means developers can write their code for iOS and Android once (Walmart currently develops an iOS and Android app for all of its main brands) and maybe most importantly, that React Native code inside the app can be updated over the air without forcing users to download a new version of the native app.

Walmart’s developers first used Electrode Native to update the shopping cart section of the Walmart mobile app. Originally, these were actually responsive web apps that were served in an embedded browser. The team also converted the Thank You page that appears when you complete your purchase and is now working on the checkout page.

Alexander Grigoryan, the senior director for software engineering, application platform and online grocery for Walmart Global eCommerce, tells me that his team looked at various options for building its cross-platform apps. “Solutions in the open source world similar to what we accomplished are ‘PhoneGap’ or ‘Cordova.’ Going down this route led to a noticeable difference in performance compared to other parts of our native app,” he told me. “This was validated when we re-wrote those parts in React Native or mobile app technologies and saw metrics which showcased more engagement from our customers.” The team also looked at Microsoft’s Xamarin tools, but decided that it wouldn’t give it benefits like reusable UI components , shared JavaScript modules and over-the-air updates as React Native. “Our front-end for web is also React, so it all just made sense for us to invest in React Native as the solution,” said Grigoryan.

Grigoryan also stressed that Walmart Labs is no stranger to open source at this point. The company features 151 projects on its GitHub page. “We strongly believe that the return on our open source investment benefits the company and the community,” he said. Grigoryan also added that this helps to motive engineers inside the company who want to make their contributions public and participate in the community, as well as engineers outside of the company who want to understand Walmart’s cultural and technical directions, “which leads to much more interesting conversations during hiring.”

If you’re interested in checking out Electrode Native, you can find the documentation and code here.

Featured Image: JIM WATSON / Staff/Getty Images