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:
- Reuse — We know it’s important but why? So that I don’t re-write what’s already been written … check out my earlier blog: How to Achieve Reusability with React Components. React Native gives us the power to reuse not only the UI components between iOS and Android — but any JavaScript code, for example an isolated module that orchestrates some micro services. React Native also gives us the capability to reuse test suites between the two platforms. And add to that, the potential to reuse code between our mobile and web applications.
- 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.
- React — As an added bonus, we are aligned with our web strategy using the Electrode web app development platform. It just makes sense for us to build our native mobile apps using JavaScript and React.
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.
Most of the existing solutions we investigated used mono-repos where the mobile app and the JavaScript are all kept in the same repository, and require changes to the mobile application. The mono-repo approach makes reusability difficult since we can’t share discrete components or modules as easily. This approach was a no-go for us since we didn’t want to modify the current mobile app workflow which was working great for us. We felt that keeping the different code bases independent and isolated from each other was the way to go. The integration had to have a minimum amount of impact and complexity to the existing mobile application code base and infrastructure.
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.
- Streamlined workflow that enables reusability of JavaScript code.
- 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.
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. 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.
Additional Electrode Native modules really help to streamline app development; from the development lifecycle process to the communication between JavaScript and native and to managing your releases.
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
Native to React Native Communication: We wanted mobile developers to be able to communicate with JavaScript while leveraging their compile-time checks and adopt the natural constructs they used when they were interacting with mobile libraries on Android or iOS. To standardize and make it easy to communicate between the two technologies, all you need to do is write the Swagger specs and Electrode Native will take care of the communication between the technologies.
Versioning: Multiple teams building multiple React Native applications and then releasing multiple over the air updates simultaneously can lead to distributing incompatible versions of the JavaScript bundle and mobile app code. Electrode Native ensures that you are not releasing bundles that can potentially crash your customer’s application with something we call ‘Cauldron’ and ‘Manifest’.
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.
All of the functionality built using Electrode Native has so far been migrations of responsive web inside the mobile app, or brand new screens that weren’t there before. All of the functionality is also built relatively encapsulated within their own screens, and we will soon leverage more Electrode Native features, such as making API calls with JavaScript, and handing that off to regular native views.
What’s Next
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.
