{"id":38067,"date":"2023-01-05T16:00:20","date_gmt":"2023-01-05T21:00:20","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=38067"},"modified":"2023-01-05T16:01:16","modified_gmt":"2023-01-05T21:01:16","slug":"shopify-migrating-to-react-native","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2023\/01\/05\/shopify-migrating-to-react-native\/","title":{"rendered":"Shopify Migrating to React Native"},"content":{"rendered":"

Farhan Thawar<\/a> (in January 2020):<\/p>\n

After years of native mobile development, we’ve decided to go full steam ahead building all of our new mobile apps using React Native.<\/p>

[…]<\/p>

At Shopify, the idea had its skeptics at the time (and still does), but many saw its promise. At the company’s next Hackdays<\/a> the entire company spent time on React Native. While the early team saw many benefits, they decided that we couldn’t ship an app we’d be proud of using React Native in 2015. For the most part, this had to do with performance and the absence of first-class Android support. What we did learn was that we liked the Reactive programming<\/a> model and GraphQL<\/a>. Also, we built and open-sourced a functional rendere<\/a>r for iOS after working with React Native. We adopted these technologies in 2015 for our native mobile stack, but not React Native for mobile development en masse. The Globe and Mail documented our aspirations<\/a> in a comprehensive story about the first version of our mobile apps.<\/p>

[…]<\/p>

we learned from our acquisition of Tictail (a mobile first company that focused 100% on React Native) in 2018 how far React Native has come and made 3 deep product investments in 2019<\/p>

[…]<\/p>

in rewriting the Arrive app in React Native, the team felt that they were twice as productive than using native development—even just on one mobile platform<\/p>

[…]<\/p>

As an aside, even though we’re making the decision to build all new apps using React Native, that doesn’t mean we’ll automatically start rewriting our old apps in React Native.<\/p><\/blockquote>\n\n

Mauricio de Meirelles<\/a> (via Ben Sandofsky<\/a>):<\/p>\n

After a thorough evaluation, it became clear that we couldn’t fix these issues [with Shopify Point of Sale] with incremental changes. Hence, we decided to do a full rewrite, which has been a big hit with our merchants.<\/p>

[…]<\/p>

Having all mobile teams use a single tech stack and tooling across the company gives you an incredible amount of leverage. We didn’t want Shopify Mobile to miss out on all the shared libraries, components, and tooling that other apps were benefiting from. So, we decided to gradually start adopting React Native in the app instead of doing a full rewrite.<\/p>

[…]<\/p>

After evaluating several options, we decided to go with an approach we like to call “Iterative Porting”. In this approach we started building all<\/strong> new features in React Native and<\/strong> migrating existing features in parallel.<\/p>

[…]<\/p>

Now that our root screens are ported and most of the necessary infrastructure is in place, I’m noticing that the ports are picking up speed! Most of our developers didn’t know React Native before this project, so each day they learn more, which further contributes to the fast pace.<\/p><\/blockquote>\n\n

Geoff Foster<\/a>:<\/p>\n

\n

I’m one of the original iOS developers on that app. Left about 6 months after the move to RN announcement having fought against that for years and no longer able to stop it from happening.<\/p>\n

We started with about 8 people doing the GraphQL backend, design, native iOS and Android and shipped good stuff fast. Scaled everything well over the years with a solid tech stack.<\/p>\n

I open the app now and again and can instantly tell where the RN screens are because of the weird glitches and bugs<\/p>\n<\/blockquote>\n\n

Miguel de Icaza<\/a>:<\/p>\n

\n

Rewrites never go as planned.<\/p>\n

Xamarin.Forms turning into Maui was supposed to be a quick change, fueled by hopium so strong it defied gravity.<\/p>\n

Instead, at best, it set it back 2-3 years.<\/p>\n<\/blockquote>\n\n

Previously:<\/p>\n