We've just finished migrating the @Shopify mobile app to @reactnative 🎉. This is our biggest app and was built over a decade. Here's how it went 🧵
Mustafa Ali
2,044 posts
Mustafa Ali
@mustafa01ali
Director of Engineering & Head of Mobile @shopify · Angel investor · I like fast bikes, fast cars, and fast software⚡️
Internet
Joined May 2010
- We've finished migrating @Shopify's largest mobile app to the @reactnative New Architecture. Should we share how we did it and the result? Would that be helpful?
- 👨🏻💻We needed a way to efficiently ship 100s of important, but non-critical screens in the @Shopify app. But Webviews are slow, janky, and have terrible UX. So, we made them fast, look native, and feel native. We first made them 6x faster by preloading, caching, and pooling 🏎️.
00:00 - Today we are releasing FlashList v2⚡️, a complete rewrite for New Arch that's faster, more precise and easier to use than ever. 🎨 No more size estimates needed 📱 Improved Masonry layout support for beautiful grids 💬 Chat-ready with maintainVisibleContentPosition and much more!
- Five years ago, we @Shopify decided to go all-in on @reactnative. Today, we're sharing how it went. Some highlights: 🔨 Building features just once has been a huge productivity boost 👩💻 Native devs and code are crucial for success 🏎️ RN apps are fast!
- We @ShopifyEng just open-sourced Tophat, our one-click mobile app testing tool 🎉 🖱️ Install a build on a simulator or device with a single click 📷 Skip building branches locally by leveraging your existing CI infrastructure ✨ Easily integrate with GitHub and custom tooling.
00:00 - 📣 We are bringing WebGPU to @reactnative! This update enables: 🚀 Modern GPU APIs (Vulkan & Metal) and enables general purpose GPU computation for AI/ML 🐎 Seamless Reanimated integration 🧊 Bringing stunning 3d experiences to React Native using ThreeJS and React Three Fiber
00:00 - We've migrated @Shopify's largest mobile app to @reactnative's New Architecture. The results: ~10% faster Android launch times, smoother screen loads, and a snappier UI. We documented the entire process—our strategy, wins, and key lessons. Read it in the reply 👇
- Replying to @mustafa01ali👩💻 We added 683k lines of code while deleting 2.5M lines. That's a net reduction of 1.8M lines. We migrated 586 screens to React Native and deleted 232 outdated screens.
- Replying to @mustafa01ali📱86% of our code is now shared between iOS and Android compared to just 5% previously. Maintaining feature parity between platforms is now a non-issue.
- Replying to @mustafa01aliWe ❤️ open source and wanted to give back to the community. We built and open sourced Flashlist ⚡️ which has become the defacto way of building high-performance lists in React NativeLists in React Native have been slow and janky for years, so we built FlashList⚡️. It's 2x faster and delivers up to 5x more frames per second than React Native FlatList!
00:00 - It’s been a while since we’ve done an update on @ShopifyEng + mobile + @reactnative, so let’s do it. shopify.engineering/react-native-f… A thread 🧵
- Replying to @mustafa01ali🏎️ Performance was a big area of focus for us. We improved screen load times by 59%, app launches are now 44% faster, and webviews are now 63% faster.👋 We've rolled out some more performance improvements to the @Shopify mobile app 📈 App launches on Android are now up to 44% faster ⚡️ Navigating between screens is up to 30% faster See it for yourself!
00:00
