Overview
The article discusses Pinterest's evaluation and adoption of React Native, detailing both the technical and organizational processes involved. It highlights the benefits of increased developer velocity and shared code between platforms, ultimately leading to a decision to support React Native in their mobile applications.
What You'll Learn
1
How to evaluate the adoption of React Native in a mobile application
2
Why shared code between platforms can enhance developer velocity
3
When to consider React Native for specific features in mobile apps
Key Questions Answered
What was the internal assessment process for adopting React Native at Pinterest?
The internal assessment involved prototyping a small surface on both platforms, specifically the Topic Picker view, and conducting performance tests to mitigate critical metrics like app startup time. This phase demonstrated significant time savings in implementation across iOS and Android.
How did Pinterest ensure React Native's performance met their standards?
Pinterest conducted A/B testing comparing native and React Native implementations of the Topic Picker feature. The tests showed that React Native performed as well as native, with no regressions in performance, which gave them confidence to proceed with the technology.
What are the main benefits of using React Native for Pinterest?
The primary benefit identified was the increase in developer velocity due to code sharing between platforms, which reduces implementation time and cognitive overhead. This allows teams to work more efficiently without sacrificing user experience.
What concerns did Pinterest have regarding React Native's performance?
Pinterest was particularly concerned about React Native's performance on scroll views, as performance is critical for their image grids. They noted that React Native was not built for high performance in this area, which influenced their decision to limit its use to screens without stringent performance requirements.
Key Statistics & Figures
Implementation time for iOS Topic Picker view
10 days
This included bootstrapping all integrations into existing infrastructure.
Time to port Topic Picker view to Android
2 days
This was achieved with 100 percent shared UI code between platforms.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
React Native
Used for developing mobile applications at Pinterest.
Frontend
Gestalt
An open-sourced set of React UI components that conform to the Pinterest design language.
Key Actionable Insights
1Consider prototyping critical features using React Native to assess performance and developer velocity.By creating prototypes like the Topic Picker, teams can gather real-world data on performance and implementation time, which can inform broader adoption strategies.
2Engage with cross-functional teams to gather insights during the evaluation process.Involving engineers from different disciplines helps identify concerns and opportunities, fostering a collaborative environment that can lead to better decision-making.
3Use A/B testing to compare new frameworks against existing implementations.This approach allows teams to measure the impact of new technologies on user engagement and performance, providing data-driven insights for future development.
Common Pitfalls
1
Assuming that React Native will always outperform native implementations.
While React Native offers benefits in terms of code sharing and developer velocity, it may not be suitable for features requiring high performance, such as those involving complex scroll views.