Migrating our Largest Mobile App to React Native

In 2020, we announced that React Native is the future of mobile at Shopify. As part of that journey, we’ve been migrating Shopify Mobile (our largest app at 300 screens per platform) from native to React Native. Here’s how it’s going.

Shopify logo
Shopify
•
Mauricio de Meirelles
•14 min read•advanced•
--
•View Original
GolangGraphQLKotlinReactSwift

Overview

The article discusses Shopify's migration of its largest mobile app to React Native, detailing the challenges faced, strategies employed, and the benefits realized from this transition. It emphasizes the importance of a gradual migration approach and the training provided to engineers to facilitate this shift.

What You'll Learn

1

How to gradually migrate a mobile app to React Native without a full rewrite

2

Why training and upskilling engineers is crucial for successful technology transitions

3

How to prioritize features for migration using the RICE scoring model

Prerequisites & Requirements

  • Extensive experience building mobile apps using Kotlin and Swift
  • Basic understanding of React and JavaScript(optional)

Key Questions Answered

What approach did Shopify take to migrate their mobile app to React Native?
Shopify adopted an 'Iterative Porting' approach, where all new features were built in React Native while existing features were migrated in parallel. This strategy allowed for continuous development without halting new feature releases.
What were the main challenges faced during the migration process?
The migration faced several challenges including slow progress, the need to maintain three different architectures, and interoperability issues with existing native code. These challenges prompted a reevaluation of their migration strategy.
How did Shopify ensure engineers were prepared for React Native development?
Shopify created an internal training program called RN Accelerator, which included five milestones covering JavaScript, React, and React Native. This program helped engineers transition smoothly to the new tech stack.
What criteria did Shopify use to prioritize features for migration?
Shopify used the RICE scoring model to prioritize features based on Reach, Impact, Confidence, and Effort. This systematic approach helped ensure that the most valuable features were migrated first.

Key Statistics & Figures

Number of screens in Shopify Mobile
300 screens per platform
Shopify Mobile is the largest app and took over six years to build.
Time to port root screens
Four months
This timeframe included preparing the necessary infrastructure for the migration.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

Frontend
React Native
Used for migrating existing features and building new features in Shopify Mobile.
Programming Language
Javascript
Fundamental language for developing in React Native.
Programming Language
Typescript
Used alongside JavaScript in the development process.

Key Actionable Insights

1
Adopt a gradual migration strategy to minimize disruption during technology transitions.
By implementing features in React Native while migrating existing ones, Shopify maintained continuous development and avoided halting new feature releases.
2
Invest in training programs for engineers to ensure successful adoption of new technologies.
Shopify's RN Accelerator program equipped engineers with the necessary skills to work with React Native, facilitating a smoother transition and reducing the learning curve.
3
Utilize a prioritization framework like RICE to effectively manage migration efforts.
This framework helped Shopify systematically assess and prioritize features based on their potential impact, ensuring that resources were allocated efficiently.

Common Pitfalls

1
Failing to adequately prepare engineers for a new technology can slow down the migration process.
Without proper training, teams may struggle to adopt new tools effectively, leading to delays and increased technical debt.
2
Neglecting to prioritize features for migration can result in wasted resources and missed opportunities.
A lack of structured prioritization can lead to teams working on less impactful features while more critical ones remain unaddressed.

Related Concepts

Mobile App Development
React Native Migration Strategies
Feature Prioritization Frameworks
Training And Development In Tech Transitions