Electrode Native: The Platform For Integrating React Native Into Your Apps
Developing mobile applications that are fast, bug free, and fully featured, while building upon advancing mobile technologies, is a core part of Walmart’s strategy. We want our customers to be able to shop anytime and anywhere!
Taking what we’ve learned and building upon the success of our open sourced internal web platform, Electrode, the platform powering Walmart.com, we’re enhancing our portfolio with Electrode Native, a streamlined mobile app development platform based on React Native. These two separate platforms share the same philosophy, but Electrode Native is a different platform altogether. It is written from scratch and has its own code base that is very distinct from Electrode (web).
Electrode Native offers a streamlined integration of React Native into existing mobile applications. 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. 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!
Unlocking the Potential of React Native
Ok, so you’re probably familiar with Walmart as a whole, but you may not know that Walmart is made of many different brands, such as Walmart Grocery, Sam’s Club, ASDA, Walmart.com, etc. — each with its own IT needs, requirements and dev teams. On the mobile side, things get even more complex. Each brand has two teams of mobile developers, building apps for each OS, that are similar in functionality, but different in execution. This was not by choice, but rather necessity as it is very difficult to find highly-skilled developers who are adept at writing native apps in both iOS/Android. For associate tools, we mostly wrap web apps using iconic or similar solutions. We felt that React Native could really change the paradigm.
The potential wins that made us really excited about React Native:
- Over the Air updates — OTA is another crucial win. The app store release process can be painful and once completed, you still need to wait until everyone updates their devices. And instant releases for incremental changes, bug fixes, and automatic updates is what it takes to guarantee happy customers.
Approaches and Challenges
Of course, there were going to be challenges integrating React Native into Walmart’s mobile app. Most mobile apps are usually Objective-C/Swift/Java mobile applications, or wrapped web apps, or React Native. React Native excels when building pure, React Native applications, but we’re in a more complex situation. We already have mobile apps in production that have lots of features powered by tons of code. Rewriting everything would be a massive investment of time, hiring, and training (translation: money). And a complete rewrite is prone to failure compared to an incremental migration approach.
When considering our approach on using React Native, we decided that building features into production applications incrementally would be the solution for the highest chances of success instead of a big bang rewrite.
If there is anything I learned in all my years of technology migrations it’s to migrate incrementally.
As we dove into development, we quickly learned that there are a number of steps involved to integrate a React Native app into a native application. This gets significantly more complicated when you start integrating multiple React Native applications into a native app. To successfully integrate these two technologies, you need a mobile developer who has a clear understanding of how React Native works and vice versa.
Even though we were building discrete screens and functionality, we still needed to leverage the code that was in the mobile application. We needed to pass authentication and other information to React Native from the native app. The React Native bridge does not offer strong typing and doesn’t work with native models though — another touch-point that did not feel seamless to us.
To summarize our multiple challenges:
- Repeatable and seamless integration between native and React Native that allows us 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.
- Simplified and consistent communication between strongly typed native and dynamically typed React Native.
Electrode Native Is Our Solution
Core of Electrode Native: the container
To scale React Native in a large organization, we needed to tackle those challenges and enable a more efficient way of working — that’s where Electrode Native comes in. Electrode Native is a new member of the Electrode family, sharing the same philosophies but still a completely different platform altogether, with no shared code.It allows seamless integration between mobile apps and React Native by packaging your React Native app into an AAR (Android) or framework (iOS), depending on the platform.
Engineer benefits using Electrode Native
Mobile App Engineers: No new tools need to be installed, and your workflow is completely the same — you don’t even have to install Electrode Native. From your perspective, you don’t need to deal with complex integrations — with Electrode Native, React Native acts as a versioned third-party library that is pulled into your mobile app. The React Native dependency in your app is our ‘container’ and inside that container is what we call Electrode Native MiniApp, and that has all the Electrode Native code (library and feature code). Electrode Native also has capabilities to enable simplified and consistent communication between native and Electrode Native.
React Native engineers: You work on your own React Native-based components. These are the Electrode Native MiniApps that live in their own repositories and have their own life cycle. You can publish new versions of these MiniApps as often as you need to, and release them over the air.
Electrode Native Capabilities
Development: To enable productive development in an environment similar to production, we have the ‘runner’ that launches your React Native app in an emulator or an actual device (if plugged in). It runs in much the same manner that it would in a production environment, by creating a local container and having the ‘runner’ application consume that container.
Independent Repositories: A simple concept, but I find it to be powerful in what it enables organizations to do. We can structure our teams around functional area of ownership, such as having the “Checkout” team own the React Native checkout area of the app that lives in its own repository. Then you can have the Item Page team with their own repo, allowing the teams to scale without too many cooks in any one kitchen. Independent Repositories also enable reusability, where you can now share the self contained Electrode Native Mini Apps with other teams. If each app had a mono-repo, it would make sharing pieces of an app with another team significantly more complex.
Where We Are
Our Shopping Cart and Checkout sections of the Walmart mobile application were actually responsive web apps served in a browser — within the app. They were relatively slow and cumbersome within the app and we used our own code for the bridge between native and this responsive web experience.
We first converted the responsive web Shopping Cart screen. This was relatively straightforward from a functionality perspective, as it was one page, but we learned a lot from the experience. That was our first full-fledged feature set that we launched to production. Check out the more in-depth article about our findings with React Native.
We quickly converted the ‘Thank You’ page that is displayed after you complete a purchase on Walmart. That same team is now working on converting the Walmart.com Checkout flow using Electrode Native, and they are ramping as we speak. Three additional teams have quickly implemented Electrode Native and they’re building new functionality into the Walmart.com app as well! And, we’re planning to use Electrode Native in apps outside of the Walmart.com purchase app in other Walmart entities.
We’re excited and motivated to continue supporting and improving our new Electrode Native platform — just as we have with Electrode Web. And we’re extremely excited to hear feedback from the open source community, which can only help to improve the platform.
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.