Walmart React Native Pharmacy

Improved Performance, Speed and User Experience on Mobile Apps with React Native
Background

Walmart had an iOS app built as a hybrid of native and webviews. The performance of the app was less than satisfactory - it was slow to load and the hybrid setup kept it from feeling like a true app. Walmart was happy with the performance of the native components of the app, but the webviews needed to go. Walmart worked with Formidable previously to update portions of their website in React, so they called us back in to help get their app up to speed.


Challenge
  • Improve the speed, performance, and user experience of the Pharmacy portion of the Walmart iOS app by converting webviews to React Native
  • Train the Walmart Mobile team on best practices for React Native
Solution
  • Prototype the Pharmacy app in React Native to show Walmart its capabilities
  • Begin each section build with UI planning so common components could be shared
  • Expose Native functionality (like barcode scanners)
  • Hook up real data to real services to ensure the app worked correctly
  • Embed the new React Native Pharmacy app into the Walmart iOS app
  • Work closely with the Walmart JavaScript team to train them in React Native
Results
  • Successfully rebuilt and reintegrated the Pharmacy portion of the Walmart app with React Native
  • The new Pharmacy app runs faster, performs better, and has improved overall user experience
  • Brought the Walmart Mobile team up to speed on best practices for React Native
Benefits
  • Fewer specialists are needed to maintain and update the Pharmacy app since Walmart has a robust JavaScript team that is now comfortable working in React Native. Specialized iOS and Android teams were needed for the Pharmacy app previously.
  • Because JavaScript is easily transferable, one code base can be used for multiple platforms.
  • With React Native, Walmart can push updates to the Pharmacy app without the long review process that comes with traditional iOS development. This means things like templating, layout, and certain bugs can be addressed in real time.
  • React Native proved itself as an integral part of the Walmart stack and set the tone for future mobile architecture.
Challenge

Since Formidable didn’t need to reconstruct the entire Walmart app - just the webview portions - the Pharmacy app was selected as a starting point for the long term project. Formidable needed to rebuild the Pharmacy App using React Native and reintegrate it into the existing iOS app to achieve better loading times, performance, and user experience. While React Native is great for mobile apps, it’s commonly used to build standalone apps, which meant Formidable needed to figure out the process of shoehorning a React Native app into an iOS app to get it properly embedded. Formidable also needed to train the Walmart team on best practices for React Native for mantainability.

Solution

Formidable began the process of rebuilding the Pharmacy app by creating a prototype with React Native to show Walmart its capabilities. Once Walmart approved, Formidable set out to build the app, dividing and conquering to build the different sections. Since there would undoubtedly be many common components within the app, the build for each section began with planning the UI so the common components could be shared. Once the main components of the app were created, the Formidable team needed to expose native functionalities like barcode scanners, hook up the real data to the real services to ensure the app was functioning correctly, and finally embed the new React Native Pharmacy app into the Walmart iOS app. During the process, Formidable worked closely with the Walmart Mobile team to train them on best practices for React Native.

Results

Formidable was able to successfully rebuild the Pharmacy app with React Native and reintegrate it into the existing Walmart iOS app, training the Walmart Mobile team in the process. The new Pharmacy app runs faster, performs better, and has improved overall user experience and their developers are prepared to maintain the app going forward.

Benefits

Previously, separate iOS and Android teams were needed to maintain and update the Pharmacy app. Now, because React Native is usable for both, any developer well-versed in JavaScript can make updates to the Pharmacy app and fewer specialists are needed to maintain it. Additionally, since JavaScript is easily transferable, the Pharmacy app only needs one code base that can be used for multiple platforms. With React Native, Walmart can also now push updates to the Pharmacy app without the long review process that comes with traditional iOS development. This means things like templating, layout, and certain bugs can be addressed in real time, without having to wait for people to update their apps. React Native has proved itself as an integral part of the Walmart stack and will set the tone for future mobile architecture.

Conclusion

Using React Native to update the Pharmacy portion of the Walmart app led to faster load times, improved performance, and better user experience.


We Are Formidable

Formidable is a Seattle-based consultancy and open source shop, with an emphasis on Node.js and React.js. We deploy a mixture of consulting, staff augmentation, and training to level up teams and solve engineering problems. Whether it’s transitioning walmart.com to React, moving speedtest.net off Flash, or helping a startup build and scale an MVP, we’re ready to help teams of any size.

Interested in hiring or working for us? Get in touch or view our careers page.