RNR 319 - Shopify goes full throttle on React Native with Mustafa Ali
Jan 22, 2025
auto_awesome
Mustafa Ali, Director of Engineering at Shopify, shares his insights on the company's full-scale migration to React Native. He discusses how this strategic move enhanced performance and streamlined development, transforming the mobile app experience. Mustafa dives into the challenges faced during integration with native teams, emphasizing collaboration and training. The conversation also highlights Shopify's commitment to open-source contributions, featuring innovations like the Top Hat tool and automated testing methods, setting a promising trajectory for future React Native projects.
Shopify's complete migration to React Native enhanced performance, improving screen load times by 59% and app launch times by 44%.
The strategic shift to React Native fostered a collaborative culture, allowing engineers to transition skills while minimizing resistance and maximizing experimentation.
Deep dives
Shopify's Transition to React Native
Shopify decided to rewrite its mobile app in React Native to streamline development and enhance team collaboration. The primary motivations included preventing redundant feature development for iOS and Android, enabling easier cross-platform work for engineers, and focusing more on delivering value to users rather than maintaining feature parity. By 2020, Shopify committed fully to React Native and began migrating all its applications, ensuring that the largest app, the Shopify mobile app, was ultimately transitioned last. This strategic decision allowed for a more manageable migration process, enabling teams to adopt React Native at their own pace.
Managing Cultural Shifts and Developer Transition
Transitioning to React Native necessitated addressing the varying levels of expertise and cultural differences within the engineering teams. To boost buy-in, Shopify encouraged engineers to experiment with React Native through prototyping, allowing them to explore its capabilities firsthand. While there was some initial resistance among native developers, many found opportunities to transition from web development to mobile, fostering a collaborative environment. This approach minimized friction and facilitated knowledge sharing, ultimately making the shift smoother for teams involved.
Performance Improvements Post-Migration
After migrating to React Native, Shopify achieved significant performance enhancements across their mobile app, setting ambitious goals for screen load and app launch times. They aimed for all critical screens to load in under 500 milliseconds and for the app to launch in less than two seconds, which are challenging metrics even for native apps. By prioritizing performance from the start of the migration, the company recorded a 59% improvement in screen loading times and a 44% faster app launch, proving that proper execution can yield impressive results with React Native. This shift challenges the common perception that native apps are inherently faster than those built with React Native.
Stability and Testing Strategies During Migration
Shopify maintained high stability throughout the migration, maintaining a crash-free session rate of 99.9% while overhauling their app. The team deployed features gradually, utilizing server-side feature flags to allow for quick rollbacks without requiring complete app updates. Emphasizing automated testing played a crucial role, as they developed rigorous strategies to monitor performance and stability. This approach not only ensured that new features were integrated effectively but also helped identify and rectify any potential issues in real time with automated alerts and extensive internal testing.
This week: Shopify’s Mustafa Ali joins Robin and Mazen to discuss Shopify’s React Native migration! Mustafa talks about how Shopify went all in on React Native, sharing how they improved performance, streamlined development, and boosted the open-source ecosystem!
Infinite Red is an expert React Native consultancy located in the USA. With nearly a decade of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter, core React Native contributors, creators of Ignite and Reactotron, and much, much more), Infinite Red is the best choice for helping you build and deploy your next React Native app.
Get the Snipd podcast app
Unlock the knowledge in podcasts with the podcast player of the future.
AI-powered podcast player
Listen to all your favourite podcasts with AI-powered features
Discover highlights
Listen to the best highlights from the podcasts you love and dive into the full episode
Save any moment
Hear something you like? Tap your headphones to save it with AI-generated key takeaways
Share & Export
Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more
AI-powered podcast player
Listen to all your favourite podcasts with AI-powered features
Discover highlights
Listen to the best highlights from the podcasts you love and dive into the full episode