News

Walmart Labs Open Sources React Native Integration Tool

• By David Ramel
• October 2, 2017

Walmart Labs is continuing to open source homegrown tools it develops as part of its embrace of React Native, now offering a way to integrate the technology into existing mobile apps on a piecemeal basis.

React Native, originated by Facebook, lets JavaScript coders create fully native iOS and Android apps, providing a popular and growing alternative to traditional Java, Objective-C and Swift native programming.

Walmart Labs, the engineering arm of the retail giant, has been embracing React Native -- after transitioning to a React.js/Node.js stack (from Backbone/Java) -- and sharing the tools it creates along the way, such as a way to provide over-the-air updates to React Native apps that it donated a year ago.

Now it's out with an even more functional, streamlined, mobile app development platform called Electrode Native. While it shares the philosophy of Walmart Labs' Electrode platform that focuses on React.js (Web) and Node.js apps, it's a completely different and rewritten tool for incrementally integrating React Native components into existing native mobile apps.

"With Electrode Native, there will no longer be a need for an engineer who specializes in both mobile and React Native technology in order to put the two technologies together," said Walmart Labs' Alex Grigoryan in a blog post Friday. "For your existing mobile application, there is no heavy infrastructure, code, or development lifecycle changes. Electrode Native takes care of all that while providing quite a few more capabilities!"

While created for the unique needs of the Walmart Labs engineering team that has to support many different in-house customers in the sprawling retail conglomerate -- each of which requires separate iOS and Android apps -- the team believes it can be of use to the broader open source community.

Specifically, it can help organizations facing the same multiple challenges as Walmart Labs, which needed:

• Repeatable and seamless integration between native and React Native that allows the firm to maintain standard workflows for mobile and React Native engineers.
• Simplified integration that doesn't require an engineer with deep knowledge of both native and React Native.
• Streamlined workflow that enables reusability of JavaScript code.
• Simplified and consistent communication between strongly typed native and dynamically typed React Native.

Electrode Native meets those challenges by allowing for the step-by-step integration of React Native into existing native projects, letting engineers introduce new functionality as needed instead of undertaking massive rewrites. For example, Walmart Labs started out putting React Native to work on the mobile apps' Shopping Cart section, before turning to work on the Checkout section.

The key to this incremental integration involves borrowing from the Docker/container approach and using Electrode Native containers that package up Electrode Native MiniApps that act like other dependencies.

"With Electrode Native, we generate a container that can be added easily to the existing app and start using the React Native component right away," Grigoryan said. "The integration process is very smooth and simple, and can be accomplished by a native or React Native engineer. No infrastructural changes or heavy code base changes are required for existing mobile applications to add JavaScript features using React Native.

"Just add the container as a new native dependency to the mobile application, as any other native third-party dependency, and that's it! Such a streamlined result is possible since the container has done the heavy lifting of generating all the integration code for you."

With this approach, React Native engineers work on their own components, publish new versions and release them over the air, while mobile app engineers leverage the React Native containerized components as versioned third-party libraries -- without having to install new tools or even Electrode Native.

To help developers along, Electrode Native facilitates native-to-React-Native communication via Swagger APIs, and "runners" can launch React Native apps in an actual device or in a simulator that mimics a production environment.

Other tools take care of versioning and make sure no problems are introduced with incompatible versions or functionality.

So far, Walmart Labs has been using Electrode Native only for migrating internal mobile app functionality that previously relied upon responsive Web techniques (basically displaying webviews within mobile apps) to React Native components, or newly created screens that add new features.

Going forward, Grigoryan said, "One of our top priorities is to support UI component reusability and look at how we can possibly apply the Electrode Web component archetype concept to Electrode Native.

"Another challenge we want to tackle to improve developer workflow is for React Native developers to have the capability to easily launch their React Native app (that's stored in its own repository) inside the mobile host application (the Walmart app, for example), for development and debugging purposes. This challenge is not yet resolved, and it's still a manual approach as of now -- but we're working on it. And we have a technical approach in place and will execute on it soon."

Anyone wanting to take a stab at helping in such efforts or just poking around the source code can find the project on GitHub under an Apache 2.0 license (10 contributors, 148 stars).

Further guidance is provided in a "Getting Started" site and in the documentation.