Shopify wanted to stop building the same features separately for iOS and Android, improve collaboration across web and mobile teams, and reduce feature parity work. React Native fit the company’s existing JavaScript and TypeScript skills and infrastructure.
Lessons from Shopify's Migration to React Native with Mustafa Ali
Speakers
Mustafa Ali, director of engineering at Shopify, discusses the company’s React Native migration with host Mike on Callstack’s React Universe On Air podcast.
Engineers had mixed reactions, so Shopify encouraged them to try React Native before forming an opinion. Ali says native depth remains essential for high-quality apps: use React Native where it fits and native code for work such as device capabilities and performance-sensitive features.
Shopify began with prototypes, then used the Shop app and a rebuilt point-of-sale app to learn at scale. For the point-of-sale app, the team tackled the main card screen’s performance early, tested internally, and gradually expanded access. The main Shopify app migration took a little over two years, compared with an initial estimate of three, while the team continued shipping features.
Shopify introduced React Native into the existing app, then migrated its most-used screens before less-used screens and app foundations. Ali made deleting the old native code part of completing each migration; build times improved as code was removed, and the team deleted 1.8 million lines overall. Prototyping helped de-risk list performance, and Shopify contributed tools such as FlashList back to the community.
About 86% of the main app’s codebase is unified across platforms, while Shopify keeps native implementations for features such as widgets, Apple Watch, scanning, and on-device AI. The Inbox app shares about 75% of its business logic between mobile and web using React Native Web. Ali advises teams to prioritize performance early and keep native and React Native developers working together.
Takeaways
- Choose a cross-platform framework based on the problems it solves and the skills your teams already have.
- Keep native specialists involved for integrations, device features, upgrades, and performance-critical work.
- Test the hardest, highest-risk screens early, then expand through staged rollouts.
- Count a migration as complete only after removing the replaced code and migration scaffolding.
- Set performance goals early and keep measuring them to catch regressions.
Mentioned in this talk
Search inside this talk
What was claimed 18
- uses
Shopify uses React Nativemigrated from fully native toward React Native; still maintains native pieces where appropriate“we've been using React Native since 2020”
YouTube Verified3 sources· Talk
- role atMustafa Ali is director of engineering atShopify
“I'm a director of engineering at Shopify.”
YouTube Unverified2 sources· Talk
- uses
“We looked at things like Jetpack Compose and SwiftUI.”
YouTube Unverified1 source· Talk
- usesShopify uses Jetpack Compose
“We looked at things like Jetpack Compose and SwiftUI.”
YouTube Unverified1 source· Talk
- uses
“We looked at Flutter as well”
YouTube Unverified1 source· Talk
- usesShopify uses TypeScript
“we already had a ton of JavaScript and TypeScript expertise”
YouTube Unverified1 source· Talk
- usesShopify uses JavaScript
“we already had a ton of JavaScript and TypeScript expertise”
YouTube Unverified1 source· Talk
- usesShop app uses React Native
“The first big app we used React Native on was the Shop app.”
YouTube Unverified1 source· Talk
- uses
“The next big app we used React Native on was our point-of-sale app.”
YouTube Unverified1 source· Talk
- uses
Balance uses React Native“Those apps were built from scratch with React Native”
YouTube Unverified1 source· Talk
- uses
“we migrated the entire app to React Native”
YouTube Unverified1 source· Talk
- featureShopify: hot reloads that let developers see changes without waiting several minutes for native buildshot reloads that let developers see changes without waiting several minutes for native builds
“React Native doesn't have that problem, so it's much nicer.”
YouTube Unverified1 source· Talk
- uses
“We did the same thing with Ruby on Rails back in the day.”
YouTube Unverified1 source· Talk
- metricShopify: Completed migration of the main Shopify app in a little over two years, versus an original estimate of three years
“The original estimate ... was three years. We finished migrating it recently in a little over two years.”
YouTube Unverified1 source· Talk
- metricShopify: Migrated more than 500 screens in the main Shopify app
“We migrated more than 500 screens in total”
YouTube Unverified1 source· Talk
- metricShopify: Deleted 1.8 million lines of code across the migration
“On Twitter, you mentioned 1.8 million lines of code deleted.”
YouTube Unverified1 source· Talk
- metric
Inbox: Shares about 75% of its business logic between mobile and web“We share about 75% of the business logic between mobile and web”
YouTube Unverified1 source· Talk
- usesInbox uses React Native Web
“It uses React Native Web to build the web app and React Native to build the mobile app.”
YouTube Unverified1 source· Talk
