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 🧵
👩💻 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.
📱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.
🏎️ 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 also improved stability of the app by eliminating ~500K crashes per app version to achieve >99.9% crash-free sessions.
🌟 Our users have noticed all these improvements. Our 28-day avg app store rating has increased from 4.4 to 4.8 on iOS and from 4.1 to 4.4 on Android.
📸 Apple and Google have noticed them as well. The app got featured 5 times while it was being migrated.
We ❤️ 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 Native
Our partnership with @wcandillon has resulted in the creation of React Native Skia. It brings the Skia Graphics Library to React Native, enabling high-quality 2D graphics and animations.
We are sponsoring @swmansion's work on Reanimated which enables high-quality animations with React Native
We built and open sourced Tophat 🎩 to enable 1-click installation of mobile builds
📝 Things we learned:
1/3 Native code and native devs are crucial. There is no replacing the experience and taste that comes from having built high-quality mobile apps.
2/3 100% React Native should be an anti-goal. Use native wherever it is the best tool for the job (widgets, Siri shortcuts, watch app and complications, etc), or in places where there are high performance requirements.
3/3 Achieving good performance takes work and should be a priority from the start. Measure everything and relentlessly optimize every layer. Add automated monitoring to catch regressions.
shopify.engineering/improving-shop…
Overall, React Native has given Shopify a step change in productivity while allowing us to keep leveraging native wherever it makes sense. We're stoked about the future of React Native and will continue to work with Meta and the community to make it better.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.