Supporting React Native at Pinterest
Vivian Qu | Pinterest engineer, Growth
Early last year, a small group of engineers started investigating the possibility of adopting React Native at Pinterest. We’ve been following the ecosystem with interest since it was first open-sourced in 2015. Since then, a robust community has developed around it, and it’s been integrated by companies across the industry. We decided to take a serious look at what the business case is for using this technology at Pinterest.
We learned a lot from the journey itself. In the next two sections we’ll share the evaluation process we developed, both from a technical and organizational perspective, and we’ll discuss the benefits we found for Pinterest specifically. Read on for the final verdict on supporting React Native.
Technical evaluation process
The technical evaluation was split into two phases:
- Internal assessment
- Gathering real-world data
The first phase was an internal assessment where we planned to prototype a small surface on both platforms. We ran extensive performance tests and worked on mitigating critical metrics impact like app startup time.
We prototyped a small-scope but high-impact surface — the Topic Picker view. This view is shown to Pinners after they sign up and is a critical screen in their onboarding process. The screen also has high iteration needs, with the team often testing UI optimizations.
The internal prototype gave us an early indication that shared code did pay huge dividends for developer velocity. Typically we’ve found native implementation takes the same time on each platform since no code can be reused and client engineers need to spend time sharing context on technical details and edge cases. Using React Native, the initial implementation on iOS took about 10 days, including bootstrapping all the integrations into our existing infrastructure. We were then able to port the screen over to Android in two days with 100 percent shared UI code between the platforms, saving more than a week of implementation time. Moving forward, we expect additional features can be built even more quickly, because the infrastructure groundwork will already be in place.
After analyzing the feature as much as possible internally, it was time to test it in the wild. We first did a carefully monitored release on each platform with just the framework (no feature code) to assess the impact on binary size and install rates. After determining the impact to installs was minimal, we ran an A/B experiment on each platform with the exact same UI design and functionality, only comparing the underlying native and React Native implementations. We tracked performance and engagement data to understand if the new framework had an impact on user behavior.
Despite being warned about performance issues on Android, our internal tests showed that React Native performed as well as native. The experimental results also supported this finding, with no regressions in performance and critical metrics. Engagement on the Topic Picker feature was flat to slightly positive, giving us the confidence to continue exploring React Native’s capabilities at Pinterest.
Organizational evaluation process
One of our core principles at Pinterest is “knitting.” We believe that the best products are built when individuals from different teams and disciplines collaborate together. From the beginning, the evaluation team was made up of engineers representing growth, core product and platform teams. In addition, we gathered internal feedback on React Native throughout the technical evaluation process by meeting with team leads and senior mobile engineers to discuss their concerns and gather valuable insights.
During a company hackathon, we onboarded engineers interested in working with React Native to give us actual feedback on the developer experience and platform support needs. We specifically solicited feedback from web engineers who wanted to try building mobile features. Here’s just one of the many useful data points we gathered:
“I would love to see React Native grow here at Pinterest and get some more functionality. It has a lot of potential to iterate on some prototypes. Working on the web side of things, it was pretty easy to pick up.” — Pinterest web engineer
Based on the internal feedback, we saw an opportunity to further bring our platforms closer together. The Pinterest web app uses Gestalt, our open-sourced set of React UI components that conform to the Pinterest design language. Because React Native shares the same React paradigm, we could make it easier for web engineers to implement mobile features by building React Native components that share the same Gestalt APIs. We also made sure to use the same tooling and testing frameworks we use for the Pinterest web app, so that we can build on our already existing knowledge at the company.
Lastly, we took advantage of the robust community by reaching out to engineers working on React Native at other companies. Their experiences were great case studies for how we should approach the adoption process and helped us understand how we could grow and support the React Native community within Pinterest.
Benefits of React Native
Throughout the evaluation we developed a clear understanding of how React Native would work at Pinterest. The ability to write JavaScript and React on native mobile platforms had a host of theoretical positives, but did these perform better than our existing engineering capabilities?
For us, the biggest potential benefit is the increase in developer velocity. React Native enables us to share code between platforms. Code sharing not only means implementation time can be saved, it also reduces the cognitive overhead of sharing context when you need multiple platform-specific engineers working on the same feature. In other words, less time is required for standups and meetings, as well as fewer inconsistencies between the platforms.
We were excited about the potential velocity gains, because React Native allows us to create a UI that feels completely native, so there would be no tradeoff on user experience for the sake of iteration speed. Additionally, since the velocity benefits of code sharing was the main motivation, we concluded we wouldn’t adopt React Native if we couldn’t integrate the technology on both iOS and Android.
If the technology at all regressed performance on either platform, it would be a blocker to adoption. We knew that React Native was not specifically built for high performance on scroll views. This was especially concerning since performance is critical for Pinterest, especially for our iconic image grids. In 2016, we rearchitected our iOS app to use asynchronous UI rendering in order to achieve high responsiveness and scroll smoothness. It was unlikely that React Native would beat our existing well-tuned system. Building in React Native makes the most sense for us on screens that don’t have highly-optimized performance requirements.
Some adopters of React Native have found great velocity improvements from code push, the ability to dynamically update UI code from the server, but we determined it wasn’t necessary for our initial adoption. Our Android team has already been releasing new app versions every week, and we’ve recently switched to the same one-week release cycle on iOS. We might ultimately speed up deploy times by using code push, but didn’t consider it to be the main driver for a step-function improvement in engineering capabilities.
Decision: Support React Native
Based on the benefits we found for Pinterest, we explicitly made it a goal to view React Native as an additional tool in our engineering toolbox alongside our existing native code capabilities on iOS and Android. A conversion into a fully React Native app was never the end goal. Instead, we focused on identifying specific use cases for feature teams and practical costs that would be incurred by adopting React Native.
At the end of last year, we successfully completed our evaluation stage and now support React Native within our iOS and Android apps. The React Native version of the Topic Picker view is shipped to 100 percent.
We also recently built our Business Signup flow in React Native. Moving forward, we’ll be exploring more surfaces to use React Native as well as evolving and scaling our React Native foundation here at Pinterest.
In a future blog post, we’ll outline specific technical challenges we faced during the initial adoption and how we addressed those problems. If you’re excited about the work we’re doing, join us!
Acknowledgements: React Native evaluation and integration was a collaboration between Vivian Qu, Michael Schneider and Thorben Primke. Business signup was built by Tian Li, Shahrouz Tavakoli, Ryan Shih and Tiffany Black. Special thanks to Shana Hu, Zachary Westlake, Chris Lloyd, Garrett Moon, Rahul Malik, Brandon Kase, Dom Bhuphaibool, Lin Wang, Jon Parise and Bill Kunz.
