After years of native mobile development, we’ve decided to build all of our new mobile apps using React Native. As I’ll explain, that decision doesn’t come lightly.
Overview
Shopify has transitioned to building all new mobile apps using React Native, a decision driven by the increasing mobile purchase rates and the need for a unified development approach. This article outlines the rationale behind this shift, the benefits of React Native, and the company's experiences with it.
What You'll Learn
1
How to leverage React Native for cross-platform mobile app development
2
Why Shopify decided to adopt React Native for new mobile apps
3
When to choose native development over React Native
4
How to achieve high code sharing between iOS and Android apps
Prerequisites & Requirements
- Familiarity with mobile app development concepts
- Basic understanding of JavaScript and React(optional)
Key Questions Answered
What are the main reasons Shopify switched to React Native for mobile apps?
Shopify switched to React Native to enhance productivity, leverage existing web development knowledge, and benefit from improved performance. The company recognized that React Native had matured significantly since its initial skepticism, especially after learning from their acquisition of Tictail, a mobile-first company focused on React Native.
When should Shopify not use React Native for mobile app development?
Shopify will not default to using React Native in scenarios requiring deployment on older hardware, extensive processing, ultra-high performance, or many background threads. In such cases, native development remains the preferred approach to meet specific performance needs.
How does React Native work for building mobile apps?
React Native allows developers to build native mobile apps using JavaScript by creating a virtual DOM that translates into mobile native views. This enables cross-platform development for iOS and Android while maintaining a single codebase, enhancing efficiency and consistency across applications.
What were the productivity gains observed by Shopify teams using React Native?
In rewriting the Arrive app in React Native, the team reported being twice as productive compared to using native development. They also achieved approximately 95% code sharing between iOS and Android, which significantly streamlined their development process.
Key Statistics & Figures
Percentage of mobile purchases during Black Friday and Cyber Monday
69%
This statistic highlights the importance of mobile in Shopify's sales strategy, indicating a strong market trend towards mobile commerce.
Estimated code sharing between iOS and Android apps
95%
Arrive
Productivity increase reported by the Arrive team
2x
The team felt they were twice as productive using React Native compared to native development, showcasing the framework's potential to streamline workflows.
Technologies & Tools
Some links below are affiliate links. We may earn a commission if you make a purchase.
Frontend
React Native
Used for building native mobile apps across iOS and Android platforms.
Programming Language
Javascript
The primary language used for developing applications in React Native.
API
Graphql
Utilized for data fetching in applications built with React Native.
Key Actionable Insights
1Adopting React Native can significantly enhance development productivity for mobile applications.Shopify's experience shows that teams reported up to twice the productivity when using React Native compared to native development, making it a compelling choice for new projects.
2Consider the performance requirements of your app before choosing React Native.Shopify identified specific scenarios where React Native may not be suitable, such as apps requiring high performance or those running on older hardware, which can guide your decision-making process.
3Utilizing a single codebase for both iOS and Android can lead to significant resource savings.Shopify's teams achieved up to 99% code sharing between platforms, which not only reduces development time but also simplifies maintenance and updates.
4Engage in thorough testing on various hardware configurations to set realistic performance expectations.Shopify's testing on low-power Android configurations allowed them to adjust their performance benchmarks, which is crucial for ensuring a smooth user experience across devices.
Common Pitfalls
1
Assuming React Native is suitable for all types of mobile applications can lead to performance issues.
Shopify identified specific scenarios where native development is necessary, such as apps requiring extensive processing or ultra-high performance. Understanding the limitations of React Native is crucial for making informed development choices.
Related Concepts
Mobile App Development
Cross-platform Frameworks
Performance Optimization In Mobile Apps