For the last two years, Walmart engineers have been steadily integrating React Native into their mobile development tool chest. Instead of aiming for a pure React Native app, they chose to deliver a hybrid app leveraging the best of native and React.
There are several approaches to building a mobile app for iOS and Android. You can opt for two completely independent native implementations, sharing no code at all; you can go full cross-platform aiming to have just a single code base using Flutter, React Native, Ionic, or Xamarin; or, you could aim for an hybrid app, where part is native, part is built using a cross-platform development framework. Each approach strikes its own balance of costs and benefits, and no solution is best for all cases.
While the hybrid app approach could seem the most sensible, if you choose the wrong technology, building a hybrid app sharing a common code base may incur hidden costs that make it even more expensive than building two independent native apps. On the contrary, wisely mixing native with cross-platform technologies may help you strike the right balance and achieve great development performance.
This was exactly Walmart's case when adopting React Native to rewrite parts of their existing apps for Android and iOS. Thanks to their approach, Walmart engineers say they could double development velocity; share business logic not only across mobile apps but also with their React/Redux Web app; leverage their developers' experience with Web technologies to build mobile features; and take advantage of instant page reloads and Over the Air (OTA) code push to fix critical issues.
A key component in Walmart approach was its own Electrode platform, and its sibling Electrode Native.
To be successful in any software migration project, it’s important to have the three T’s: Team, Tools, and Tenacity. We already had a small team of React developers diving into the mobile app world and loving it. We needed a tool to help us integrate our RN pages into our native apps and give us a standard way of communicating between JavaScript and native.
Electrode Native enables the integration of MiniApp within an existing mobile app using AAR files or frameworks. MiniApps are just React Native apps that are able to communicate with the rest of the app through auto-generated JavaScript, Java, or Swift APIs. In addition, Electrode Native apps may use a centralized document database to share information about mobile application versions, native dependencies, and information about MiniApps.
Another advantageous design decision Walmart engineers took was using native navigation instead of React Native navigation system. This enabled integrating new pages one by one within the existing stack of views with native animations and speed.
In addition, embedding new pages with the existing navigation stack made it easier to use A/B testing to understand how customer reacted to new features and occasionally disable React Native pages to deal with any issues.
Currently, Walmart mobile apps are almost entirely powered by React Native, but both apps will remain hybrid and leverage the native platform for better integration. The original article contains additional details, such as the related organizational challenges and how Walmart overcame them.