###SLIDE 0 Hi, my name is Ken Wheeler, I work at Formidable and I’m here to talk about building the Walmart IOS pharmacy in React. Before I get down to brass tacks, I’d like to speak briefly about how we got to this point.
###SLIDE 1 Walmart loves React. We have React in production right now, and we are in the middle of switching most tracks on Walmart.com to React. It has been working great for us.
###SLIDE 2 We developed an internal platform called Electrode, where we have all of the UI components on Walmart.com built as React components. Previously, we had seen developers building the same UI components over and over again, and React has given us the opportunity to only build these components once and reuse them all over the place.
So I was asked if I wanted to take a crack at converting a portion of the mobile application to React Native, and I was like what are you kidding me, of course I do. Me and a small team spent the next few months building the Pharmacy in react native and it has been downright lovely. We’re still buttoning a couple of things up but this should be inside the production app soon.
###SLIDE 3 Aside from being pumped about writing production grade React Native, I was excited about the benefits we gain from using React Native. First, we can push fixes right to the application, which is a no brainer. We can share code and have a single codebase for both platforms, and thats a beautiful thing. Also we have resource interoperability, meaning that our already large pool of engineers who are familiar with React can contribute fixes and features to our native applications pretty easily.
###SLIDE 4
So let’s talk a little about how we did it.
Our first challenge was embedding our React Native application inside of the main Walmart app. Turns out it wasn’t too bad.
###SLIDE 5 When you tap the Pharmacy button on the home screen, we push a container view onto the stack with our React Native app loaded inside of it, and the Navigator component pretty much takes it from there. We bridged a navigation manager through to our JS so that when we’ve reached the beginning of the navigation stack, we can pop back to the root navigation controller and get back to the main app.
###SLIDE 6 Next up we needed to manage our Application state. We decided to use Redux,and found that it translates really nicely for managing native application state. Looking at our app layout, we have 5 potential domains, as you can see highlighted here in green.
We use a smart/dumb component approach, and each one of these sections has a top level smart container for its state and data. We have a reducer for each one of these sections, as well as a top level application state reducer for things that we need globally.
###SLIDE 7 Our next challenge was determining what controls we needed to bridge, and how much should be React and how much should be Native. Walmart already had a rich, stable collection of shared controls across the application that it didn’t make a lot of sense to rewrite from scratch. As you can see here, there are a lot of form controls that have built in Walmart styling and validation and all kinds of goodies. So we decided to bridge them individually as React Native view components, so that we could use React Native to compose and control them. This approach worked out really well for our use case. By using tested and stable componentry, most bugs would likely arise from our business logic, which we can easily fix in React Native.
###SLIDE 8
The process was not entirely effortless. We hit a couple of things along the way that presented unique challenges. One of the biggest pain points was upgrading. We started the projects on 0.12 and we are now on 0.19. There wasnt a magic solution to upgrades for us, other than just rolling up our sleeves and fixing the issues one by one. Lately it hasn’t been as bad, but the jump from 0.12 to 0.16 was rough.
###SLIDE 9 One of our main requirements was feature parity with the current native application. The devil was indeed in the details. One snag we hit was were field navigation arrows. The current app brings the focused field into the viewport, so we wrote a higher order component to manage field focus as you can see in this video:
###SLIDE 10 Another interesting challenge was a requirement to implement a customized Search Display Controller. Band aiding a view controller into the current flow was so problematic that I decided to see if I could build this from scratch using views. It turns out, through the magic of Layout Animation, that it was indeed possible. Here you can see it in action:
###SLIDE 11 All in all, developing a non-trivial react native application was challenging and fun. Moving forward we will be expanding to rewriting additional portions of the application in React Native and open sourcing some of the tools we’ve written along the way. I’m super excited to be a part of it and I’d like to thank the React Native team for making my job fun and all of you for listening to me here today. Thanks so much everybody!