Electrode-Native

The platform of choice for developers who want easy and extensible integration of React Native into existing native iOS and Android applications.

Team:

Customer Technology

Published Date:

09.29.17

Locations:

Sunnyvale, CA

Electrode-Native

Overview


Within Walmart, our efforts are constant and committed in order to discover new advancements that allow Walmart to better serve the needs of their customers. With that goal in mind, in mid-2016, Walmart decided to launch an investigation into what could be done to replace hybrid views in the Walmart mobile application. Hybrid views are essentially a browser window inside of a mobile app, displaying the responsive version of a web app, and which were found to not be performing up to the standard that customers expect. In early 2017, Walmart launched a replacement for the existing hybrid cart section which was built using React Native. This experiment with the React Native Cart turned out to be wildly successful, and proved the merits of React Native within Walmart.

This signaled a potential paradigm shift in the way technology teams within various branches of the Walmart organization develop to meet the needs of customers. For mobile development, two separate teams of developers would be needed to build and maintain features for iOS and Android, but with React Native, one team can handle both platforms, and that team could perform quicker than their native-only counterparts. The prospect of cutting down on both time to market and development costs, with no hit to performance is certainly an attractive one.

It would not make sense, logistically, fiscally, or otherwise, to replace the entire existing mobile application with React Native wholesale, so the question then became: how can Walmart provide the tools necessary for their mobile teams to utilize React Native within the context of the larger native applications?

The Problem


While the React Native Cart experiment was successful, there was no existing way for further teams to be able to quickly leverage React Native for their needs. Adding a new React Native feature was time consuming, awkward, and inefficient. Additionally, since the majority of the Walmart app is native, and communication between the native and React Native worlds is a necessity for complex features, there being no easy way to facilitate said communication was another issue. There was an immediate need for a solution which would scale to meet future organizational needs.

The Solution


Electrode Native is a platform designed with the philosophies of scalability, reusability, and extensibility in mind. It provides an infrastructure for seamlessly integrating React Native inside of an existing native mobile app. Once Electrode Native is integrated into a native application, adding new React Native features or APIs is simple. Its guiding principle is similar to Java: “Write Once, Run Anywhere”, except in this case it’s “Integrate once, extend easily thereafter”.

All React Native apps, called “miniapps” in Electrode Native, along with the native dependencies supporting those miniapps, are logically organized in a “cauldron”, which manages dependency versions and helps ensure stability. This cauldron is simply a JSON document, stored in GitHub, and specifies which versions of miniapps and dependencies belong to the various native app versions and platforms.



A “container” is generated from the versions of the miniapps and dependencies stored in the cauldron, and included in the native application packaged as an AAR file for Android , or framework for iOS.



Once Electrode Native is included in the native application, basic integration of new React Native miniapps into the native application is as simple as running a few commands in the terminal to add the miniapp to the cauldron and generating a new container.

React Native includes a bridge for communication between native and React Native, but it’s functionality is limited. Electrode Native provides a wrapper around this bridge, greatly extending its usefulness. Electrode Native’s bridge wrapper allows for uniform communication between native and React Native, or between two React Native miniapps. It provides support for timeouts, UI thread dispatching, queuing, strong non-primitive types, and more. At a high level, what all this means is that Electrode Native provides a robust solution for the communication requirements of a complex application.

Building on top of the bridge wrapper detailed above, Electrode Native provides an API generation tool which abstracts away the complexity of creating two-way native to React Native APIs. The Electrode Native API generation tool uses a user-provided Swagger schema to create the native and Javascript boilerplate files for the API. While still necessary to write the actual implementation details, i.e. what to do with the messages received, Electrode Native negates the difficult task of figuring out how to send and receive said messages, speeding up development time.

These are only some of the features of the Electrode Native solution, but which are key architectural and utility components that allow React Native to be scaled easily and efficiently within Walmart.

Additional details can be found regarding the various features of Electrode Native here:
https://electrode.gitbooks.io/electrode-native/content/

The Result


With the React Native Cart experiment, we saw ~20% increases to conversion and GMV on iOS, and ~5% and ~8% to those figures on Android over the prior hybrid implantation. In addition, we saw 40-80% improvements to page speed. Given this success, it’s no wonder that Walmart desired to utilize React Native on other sections of the app. Electrode Native has done its job magnificently and it has addressed the issues Walmart had with scalability and extensibility, allowing us to do just that.

Since the introduction of Electrode Native, the number of React Native apps within the Walmart app has grown from one to six. Integration of new React Native applications into the Walmart app used to take weeks, but now can potentially be done in days. Developer productivity enhancements and utilities have improved the efficiency of React Native development teams. New channels of communication have been established between the native and React Native worlds, creating the possibility for more complex features. Other entities within the Walmart organization, and even some companies outside of Walmart are considering making the switch to Electrode Native to take advantage of time and the money-saving benefits of React Native. Overall, Electrode Native has not only proven to be a useful tool within Walmart but also a great demonstration of the technical capabilities of our engineers.

Any reference in this Electrode Native case study to any specific commercial product, process, or service, or the use of any trade, firm or corporation name is for information and convenience purposes only, and does not constitute an endorsement or recommendation by Wal-Mart Stores, Inc.

Recently viewed jobs