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!
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!
Show Notes
Connect With Us!
This episode is brought to you by Infinite Red!
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.
Todd Werth (00:10):
Welcome back to React Native Radio podcast, brought to you by Idiocracy, an uplifting award submitted documentary Episode three 19. Shopify goes full throttle on [00:00:30] React native.
Robin Heinze (00:36):
Hello everybody. I am Robin and this is Mazen.
Mazen Chami (00:41):
Hello.
Robin Heinze (00:42):
Hello, Mazen.
Mazen Chami (00:43):
Hey Robin.
Robin Heinze (00:43):
How are you?
Mazen Chami (00:44):
Good, good. Can't complain.
Robin Heinze (00:45):
Good, good. Can't complain. You probably could, but you're just not going to.
Mazen Chami (00:49):
Yeah, not now. Maybe when we're done,
Robin Heinze (00:53):
We also have a guest with us, must Ali is here. Can you please introduce [00:01:00] yourself to our listeners?
Mustafa Ali (01:01):
Yeah. Hi Mustafa. I'm a director of engineering at Shopify and I lead the team that builds the Shopify mobile app and also mobile foundations and mobile application security for all of Shopify's mobile apps.
Robin Heinze (01:14):
Awesome. And if you live under a rock and you don't know what Shopify is,
Mustafa Ali (01:20):
Shopify is a commerce platform that allows people to sell online, in person, or anywhere in between. We allow merchants of all sizes to sell [00:01:30] their products both online, on social media or anywhere else for that matter. And yeah, a lot of merchants around the world use our platform,
Robin Heinze (01:38):
So most of the small businesses that you've bought something from that all seem to look and feel really familiar. That's probably because they're built on Shopify and
Mustafa Ali (01:49):
Big ones too and big one. Yeah, small and Steve Madam.
Robin Heinze (01:52):
Yeah, you probably used Shopify in the last couple days. I'm guessing
Mazen Chami (01:56):
As you're checking out, if you check out and you see that shop checkout [00:02:00] page, that's Shopify just a different, we spoke to, didn't we have Colin Gray on to speak about the shop side of things?
Robin Heinze (02:07):
We did, yeah,
Mazen Chami (02:08):
So this is full circle now. This is,
Robin Heinze (02:10):
We'll, we will link Collin's episode in the show notes,
(02:14):
But yeah, we're good friends with Shopify, so really excited to have you on before we launch into our topic, which I'm really excited about, we do have to hear from our sponsor. So Infinite Red is a Premier React [00:02:30] native consultancy located fully remote in the us. We're a team of 30 senior plus level React native developers and support staff and have been doing this for nearly a decade. If you're looking for React native expertise for your next project, hit us up at Infinite Red slash Radio and don't forget to mention that you heard about us through the React Native Radio podcast. As always, it makes our day. So let's get into [00:03:00] our topic, which is of course Shopify and their transition to React native. I think our official title is Shopify Goes full throttle on React Native, which I personally like as a motor racing fan, but yes, you guys recently rebuilt your app in React Native and you're going to tell us about it. To start off, the question I think everyone always wants to know is how did you come to the decision [00:03:30] to rewrite your entire app in React native, because that's a huge undertaking, so how did that decision come to be?
Mustafa Ali (03:39):
Yeah, so five years ago we decided to go all in on React native, that decision, there were three main reasons for that. First, we wanted to stop building the same features twice. We were spending a lot of time building the same thing on iOS and Android and it was a huge drag on our productivity, so we want to stop doing that. [00:04:00] The second one was we wanted to allow our engineers to work seamlessly across iOS, Android, and Web. It was very hard for Des, for instance, to contribute to mobile because the learning curve was very steep and finally we wanted to spend less time chasing feature parity and more time shipping value to our users. So anybody who's built an app knows that it's very hard, even though you might have two teams working in parallel building the same app on two platforms, [00:04:30] it's very difficult to keep them in sync.
(04:32):
A lot of times things get shipped first on iOS, then Android has to constantly play catch up, or even if you have the same feature, they're slightly different. So then you have to spend the time to catch those issues and fix them. We wanted to stop doing that, so in 2020 we made the announcement that we are going to go all in on React native and we started migrating all our apps from that point onwards. We also built some new apps in the last five years, so those were built [00:05:00] from scratch. Recently we finished migrating our biggest and the last remaining app, which is the Shopify mobile app to react native, and that app was very large, over 800 screens was built over a decade, so we kept the biggest app for the end.
Robin Heinze (05:17):
Did you find that the approach of saving your biggest app for last was effective? It
Mustafa Ali (05:22):
Did, but it wasn't the primary motivation to do it in this sequence. [00:05:30] When we decided to move to React native, we wanted all teams to decide when and how they migrated. So some apps were in the process of being rewritten because we were doing a massive UX overhaul. Some apps were, we were just starting to build them. Some apps were really small, so we were able to migrate them much faster. So some teams decided to do a full rewrite. In this particular case, we couldn't do a rewrite because it would've taken forever and we wouldn't have been able to ship any new features while [00:06:00] the rewrite was in progress. So that's why we decided to tackle in a slightly different way.
Robin Heinze (06:04):
Gotcha, gotcha. That makes sense. Back in the beginning when you first made the decision, was there any convincing that you had to do? Was there stakeholders that were skeptical? What sort of arguments did you have to make or was it pretty much a slam dunk with this is how much time We'll save building features?
Mustafa Ali (06:26):
The process started several years ago, so [00:06:30] we evaluated reactive several times over the years and we did a lot of prototyping and until 2020 we decided to not go ahead with React native because it had a bunch of rough edges. In 2020 when we did the prototyping again, we found that it was much, much more suitable for our use case and at our scale. And yes, it had a few rough edges, but we felt confident enough that those edges could be smoothened out by meta, by the [00:07:00] community, and also we can help fix them as well. So that's when we decided to go all in. Changes like these are difficult to do and a lot of people, especially native mobile, I've done native for a very long time and one of my favorite things about native development is that how passionate people are about Native I and Android, how everybody cares very deeply about their craft. People obsess over the details and the UX and [00:07:30] a lot of people have built very deep expertise in native technology. So to drop all that and shift to this completely new stack, new language, new framework, a lot of new things that you have to learn is difficult and we understand that. So the main thing that we did internally was encourage everybody to try React native about
(07:48):
A lot of people, especially when you talk about React Native or any other tool like this online, people have very strong opinions and a lot of those strong opinions that's true are not backed [00:08:00] by any real work that they themselves have done. It's mostly like they've heard somebody say that this is good or not good, and then you basically just make up their mind. So what we encourage everybody to do is just try it out, take it for a spin, see what works and what doesn't, and then we can figure out what we should do. So a lot of people did prototyping internally and then a lot of people liked it, some people needed a little more convincing, [00:08:30] so we have them do more prototyping and work with people who already knew how to do React native so that they could help them. Very few people decided to not do React native, but that was fine too and we found other roles for them at the company and they are doing different things. Some people move to the web, some people move to the backend, and that's working out well. A lot more people actually from the web wanted to do React native and mobile finally, [00:09:00] and it was finally possible for them, so they ended up switching over and are now working on our mobile apps.
Robin Heinze (09:07):
That's amazing. It's all over the map in our experience, whether you have a ton of pushback from native engineers who are being asked to switch or whether they kind of embrace it and it makes a huge difference what the culture is and what leadership is making the [00:09:30] culture basically. And I love that you sort of let them have ownership and get to know React native on their own and it wasn't this edict from above like you have to do this or else. Were there any challenges going forward with cultural differences between Native engineers and then your web or your JavaScript engineers? Were the native engineers more strict about type safety or things [00:10:00] like that? Did you have to sort of mesh these engineering cultures at all?
Mustafa Ali (10:03):
Not as drastic as you would imagine. At the end of the day, everybody wants to ship high quality code production
(10:11):
And it's just that you need to understand what does that mean for Native versus React native. One of the things that we've learned over the last five years is that in order to build a really good mobile app with React Native, you need a good mix of both Native and React native engineers. [00:10:30] You can do it without having a good mix. A lot of people think you can just have a bunch of web devs do react native and end up with a really good app. In our experience, that necessarily doesn't happen. You still have to do a lot of native development. You need native expertise, especially for tooling and also for all the cases where reactive might not be the best tool for the job. So that's where native expertise comes in and I think [00:11:00] it's really, really crucial to have good native expertise on your team, even if you're doing React native,
Robin Heinze (11:05):
It's a hundred percent true and I think it really helps get buy-in from native engineers too to really recognize that their expertise is extremely valuable and necessary.
Mazen Chami (11:17):
There's a reason it's called React native, right? The reactives bring in that React experience and help us with the React side of it and the native devs help us with the native part of React native and having [00:11:30] them on board and even just on your team is very crucial because like you said, if something needs to happen on the native side, they can easily jump in, get it done, and you can move forward with your feature. Now on that same sentiment with your migration, what did you all do as far as, because two year period is a long time, right? I doubt you froze production or sorry, development on your Shopify app. Were you developing side by side? Did you try and play catch up [00:12:00] in any situations? What was your migration timeline looking like for, because now essentially you're building three apps or maintaining three apps essentially.
Mustafa Ali (12:08):
So we did this in phases essentially. So step one was to introduce React native to the code base, the existing Shopify mobile code base and get all the tooling set up ci, make sure that we could start using React native inside the app. And then we started building some, we are building some new screens at [00:12:30] the time and we started building them with React native just to get a sense of how it would work in the code base. Also the intra between Native and React native, we want to make sure that it works well. So first step was that we also used that as a way for the team to start learning React native because this team was purely native. I don't think anybody had done React native at that point. So we started learning how to do it, but once we finished that, then we [00:13:00] started training everybody on React native.
(13:03):
We could put together a training program that allowed everybody to basically learn everything they needed to do, learn to ship high quality code and react native to production. And then we decided to migrate the home screen of the app to react native. So in the Shopify mobile app, the home screen has four main tabs and those screens get the maximum amount of traffic. So the idea was that if we [00:13:30] can do a good job of building these screens in React native and they work well, react native will work at our scale for this particular app. So we migrated those four screens every time you open the app, we are using React native screens. So that was a big win for the team and also gave us a lot of confidence that yes, we can build really good screens with the React native. Then we decided to migrate all the critical screens of the app to React native. So these are the screens that are used by [00:14:00] most of our users most of the time. So these are things that if something breaks in them, then it's an issue, it's an incident, you have to go fix them.
(14:09):
So we tackle one feature after another and migrate all of them to React native. The next stage was migrating all the noncritical screens to React native. So these are screens that are used by many of our users some of the time. So we migrate all the remaining screens. This was a much bigger number of screens, so we migrate all of them and [00:14:30] we could have stopped there, but we didn't because we did not want to end up with a Brownfield code base forever. So the last step was to move the foundational layer of the app to react native, so things like identity, state management, networking, all of that. We also moved to the React native and deleted a bunch of code along the way and then called the migration done.
Robin Heinze (14:50):
Wow, that's a really interesting approach.
Mazen Chami (14:53):
It almost sounds like, did you have specific training for your native developers in React Native or was it just, [00:15:00] hey, we're going to start migrating, like you said, almost feature by feature or phases, or was it just, hey, as we get to the first feature, let's build it out together. What did that training look like to get those native devs on? Because that sounds like a very interesting way of handling it, and of course it sounds like it was a success, but what did the training look like to get to that first phase?
Mustafa Ali (15:25):
So some people just started learning React native on their own and became [00:15:30] good at it, but when you have a large team, you can't really expect everybody to do that or
(15:36):
Expect that to finish in a reasonable amount of time. So we put together the self serve training program where it started off with JavaScript, TypeScript React, react Native, and how we use React native at Shopify. And it was basically a self of course that you could go through in 40 hours roughly. You don't have to do it all at the same time. You could just break it into pieces, [00:16:00] you can spend a few hours every day. And we had everybody go through that and the idea was that if you just go through this 40 hours of training, you will know everything you need to ship code. And then what we did after that was we brought in also some people who have done React native in the past and also some web devs for their web expertise on the team so that we had a good mix, like I was saying before we organized office hours where people could come in and ask questions, [00:16:30] share code, do pay programming and get unplugged. So that way we shared the knowledge and we spread the knowledge across the team and also the people who hadn't done Native learned a lot from the native devs as well. So that helped us fast track how people learn to react native.
Mazen Chami (16:48):
When you said the React native portion of the training, did it go all the way down to the native pieces, like how to build a native view, a native module?
Mustafa Ali (16:57):
Yes, but initially we [00:17:00] defaulted to building everything in React native and then pulling back because we are making this big shift. But at the end of the day, yes, we a hundred percent React native is an anti goal for us, so we encourage teams to use React native for what's best for and then native for other things.
Robin Heinze (17:23):
That's really cool. Is that anything you would ever sell as a course or make public in any way? [00:17:30] I always hear from the community how few react native training resources there are in the world and people are always desperate for really good react needed trading resources. Is that something you guys would ever sell or is it more like this is Shopify secret sauce?
Mustafa Ali (17:50):
I don't know. I think we could lemme think about it more, but a very small part of that is Shopify specific. Like I was mentioning, the
Mazen Chami (17:59):
Last
Mustafa Ali (18:00):
[00:18:00] Section of the course is Shopify specific, but it's nothing extraordinary. We basically took many of the things that are already available and just packaged them nicely and then made it available to everybody internally. That would be a good product. If you could
Robin Heinze (18:19):
Market
Mustafa Ali (18:19):
It,
Robin Heinze (18:19):
You would have a lot of interest in it. Yes, you'd have no idea how many people ask. A lot of times they'll ask us if we do training, which we do a little bit, but [00:18:30] our time is limited, but so many people are just desperate for really, really good reacting to training resources in one spot, YouTube videos here and then a blog over here and you can kind of piece it all together, but end to end react native training. It's hard to come by. So think about that.
Mustafa Ali (18:51):
Cool. Yeah, and if anybody listening is interested, yeah, let us know.
Mazen Chami (18:55):
Let's talk about performance. Performance is everyone's favorite topic and [00:19:00] this is a large application. You mentioned some, how many screens was it? 800 or 800.
Robin Heinze (19:07):
Oh, and it's everyone's favorite topic and it's also a lot of times what people point to say React native is not as good as native. Yes,
Mazen Chami (19:15):
Exactly. So over 800 screens, this is not a small to-do list app kind of thing. What was your, because I think in the article you mentioned there was some performance achievements you achieved post migration. [00:19:30] Can you elaborate on what those were and how did you measure those metrics?
Mustafa Ali (19:34):
Yeah, so performance was a big area of focus for us and also the reason why we did not adopt React Native sooner, react Native performance wasn't great in the past and we saw things getting better, especially we did a lot of prototyping early on to see what kind of performance we can get out of React native, and we anticipated it to get better back in 2020 and it did [00:20:00] in the Shopify mobile app in particular, when we started migrating, we set very clear goals for ourselves that we want to hit. Our goal was to load every critical screen in the app in 500 milliseconds or less, and you wanted the app launch to happen in less than two seconds. So this is time to interactive, and anybody who's done mobile knows that these are ambitious numbers. Even for native apps,
Robin Heinze (20:28):
That's a pretty high bar
Mustafa Ali (20:30):
[00:20:30] And we focused on it from day one. This is true for any technology or framework, but a lot of times teams ship a whole bunch of code and then realize that performance isn't great and then going back and fixing it is a lot of work and in some cases not even possible without a giant refactor or rewrite. So that's why we didn't want to do that. We wanted to just focus it from the start and yes, we were able to achieve these goals. So once we finished the rewrite, the screen loads [00:21:00] are about 59% faster now app launches are 44% faster. We also made our web view 63% faster, but the main takeaway here is that Native automatically doesn't mean fast React Native automatically doesn't mean slow. It is possible now to build really fast apps with React Native, and if you focus it around from the start, we shared pretty much all our learnings in the blog post that MA was talking about. It's [00:21:30] a great
Robin Heinze (21:30):
Article. Well, we'll make sure we link it in the show, not it's a really great
Mustafa Ali (21:34):
Article. If you build things the right way, you can achieve really good performance with reactive, and once you achieve that, you also have to hold onto it because it's very easy to regress. So we have a lot of automated tooling set up that will catch regressions.
Mazen Chami (21:49):
Mustafa, if you don't mind, I'm going to quote you on that. Native doesn't always mean fast. React native doesn't always mean slow. Thank you for saying that out loud and publicly. [00:22:00] I
Robin Heinze (22:00):
Think, did we have a chain React? Talk about that.
Mazen Chami (22:04):
Well, that sounds familiar.
Robin Heinze (22:04):
One of our Chain React speakers actually demoed how easy it is to build really slow janky native code.
Mazen Chami (22:13):
Yes. Yeah, I remember what we were talking about.
Robin Heinze (22:14):
Yeah,
Mazen Chami (22:16):
It's very true. If you focus on it from the beginning, you can get to those goals and the fact that you're able, I mean you were talking about 50 plus percent improvement using React native. If you were to tell anyone, any large organization [00:22:30] that has a React, sorry, any large organization that has a native app, Hey, let's go to React native. Their first thing is going to be like React native is slow. This is not going to cut it for our customers. But at the same time you're saying you're achieving 50 plus percent. We did the Merc rewrite and now he has blog article. You'll see similar numbers to TTI for Android and iOS. That just goes to show that yes, native does not always mean fast. React native does not always mean slow. Absolutely.
Robin Heinze (23:00):
[00:23:00] Yeah. Performance is so critical and I think a lot of React native engineers don't think about it the first time they build their out. I don't think there's enough information documentation and stuff about how to build a performing app from the start. A lot of times it's kind of an afterthought, so helping people learn how to do that performance from the start is so, so helpful.
Mustafa Ali (23:28):
There are some cultural [00:23:30] aspects to this as well. A lot of mobile desks use an iPhone, the latest and greatest, and
Mazen Chami (23:36):
Of course
Mustafa Ali (23:36):
The app works well on those devices. One of the things we did was we basically purchased Midden Android phones for the entire team and just made them test it or made make them,
Robin Heinze (23:51):
You have to make it mandatory too, so painful.
Mustafa Ali (23:55):
It wasn't difficult to get it adopted, it just people did not have [00:24:00] access to those devices. So it was a small price to pay in the grand scheme of things because that made our app so much better.
Robin Heinze (24:07):
Yeah, it's so true and it's so easy to not do that. But honestly, so much of the world is on Android and we forget that. And so yeah, having a slow Android test device, that should be your first, you build something and you test it on that device first, [00:24:30] and that can really help you. Let's talk about stability because, so for an app like Shopify, which is used by so many people, I'm sure it's really critical to have stability and have it not crash on users. Did you find that your stability changed with the migration? Were there any strategies that you used to either maintain app stability or improve it throughout your migration?
Mustafa Ali (24:59):
Yeah, [00:25:00] stability remained consistent throughout the migration. We have 99.9% crash free sessions in the app, and we basically completely overhauled the app and maintaining that at our scale was a challenge. So we did a lot of things to achieve this. First one was anytime we migrated a feature, we put it behind a server site feature flag
(25:28):
And then gradually rolled it out [00:25:30] so that in case we missed any issues, we could remotely switch back to the native version and then fix it without having to go do an app update and go through Apple and Google to be able to do that. That was a big one. We don't have a QA team at Shopify, so we rely very heavily on automated testing. So we spend a lot of time doing writing automated tests, and we do some manual testing as well. Anytime a new feature [00:26:00] was built or migrated to React native, it's first tested with internal users. A lot of Shopify employees also run their own businesses, so we have a lot of internal users as
Robin Heinze (26:10):
Well. Interesting. Okay, that's cool.
Mustafa Ali (26:14):
So yeah, we were able to test a bunch of changes with them, then gradually roll it out behind the server site feature flag. We also invested a lot in automated monitoring, so we measure how things are going in production and when anything goes wrong or [00:26:30] is about to go wrong, we get automated alerts so we can go in and investigate and fix
Robin Heinze (26:34):
Them. So it sounds like your strategy to do Brownfield and incrementally convert your app was really critical to that because in order to do the server side feature flagging, that only worked because you were able to just swap back and forth between the React native version and the native version because it was a Brownfield app. Is that right? Yeah, yeah.
Mazen Chami (26:59):
Out of curiosity, [00:27:00] you mentioned you don't have a QA team and you used automated testing. What did you use for automated testing?
Mustafa Ali (27:06):
We used J. Oh,
Robin Heinze (27:08):
Okay.
Mustafa Ali (27:09):
And we have our own framework to do screenshot testing. We call it testify, and it basically, we compares two versions of the ui, so we use that extensively as well. I see what you did with the name
Mazen Chami (27:25):
Shopify Testify
Robin Heinze (27:26):
Justify. I
Mazen Chami (27:27):
Love it.
Mazen Chami (27:27):
Yeah, I
Mustafa Ali (27:27):
Like
Robin Heinze (27:27):
That. So you didn't have anything like Detox [00:27:30] or
Mazen Chami (27:31):
Maestro
Robin Heinze (27:31):
Appium or Maestro or any of those end-to-end frameworks?
Mustafa Ali (27:37):
We do some amount of end-to-end testing as well. We currently use Appium and we are constantly looking at more tools.
Mazen Chami (27:46):
Can you tell us about any other open source tools that you ended up either developing for the community as part of this initiative? I know Flash List came out of
Robin Heinze (27:57):
Shopify
Mazen Chami (27:57):
Specifically.
Robin Heinze (27:58):
Yeah, we did a whole episode with Taha [00:28:00] about Flash List.
Mustafa Ali (28:02):
Yeah, so we are big fans of Open Source at Shopify. We don't want to just consume open source software. We also want to contribute back, we do a lot of open source work, especially on the backend side with Ruby and Rails. So we do like to do more things on mobile as well. When it comes to Open Source, the way that we approach it is if there are people who are already solving a problem that we've run into and they're doing it well, we want to help [00:28:30] them. So things like React Native Ski or Reanimated for instance. Those teams are doing really good work, so we support them for things that aren't being solved as well or nobody's solving them. We decide to help solve that. Flashes came about that way as well. List and React native were slow and janky for years, so we thought let's take a stab at fixing them.
(28:56):
And we built flash lists internally. We tested it in all [00:29:00] our apps. It worked well and then we made it available as open source project. Top Hat was similar. Top has nothing to do with React native to be honest. You can use it with N native apps as well. But we ran into a problem where it was very difficult for people to access internal bills, especially if you're a developer, you have to save your work, switch a branch, then compile, and it just takes forever. So we built it for internal use. People really liked it. I think somebody [00:29:30] mentioned it at a conference and then we got a lot of interest, so we then decided to open source it.
Mazen Chami (29:36):
For listeners that aren't familiar, can you just give us a quick elevator, TLDR on what is Top Hat?
Mustafa Ali (29:42):
So Top Hat is a Macs tool that allows you to install internal bills with one click. So it works with your existing CI infrastructure and it basically downloads and install bills on any emulator simulator or a real device [00:30:00] that's connected to your computer. So a common use case is you're working in your branch, but then you have to review somebody else's code on a different branch. Normally you'd have to pause your work, switch to a different branch, pull the changes, compile it, run it, and all that. With Top Hat, you just have to click a button and that particular bill, it's already exists in your ci, so we just put it from there and deploy it on
Robin Heinze (30:25):
Whatever
Mustafa Ali (30:26):
Target you want.
Robin Heinze (30:27):
So is it any particular service that you [00:30:30] use for those internal bills or is it just like IPA 80 A P Ks?
Mustafa Ali (30:35):
It works with your CI infrastructure, so if you're using GitHub or anything else, you can just connect it to that and just downloads the files and deploys it. That's cool.
Mazen Chami (30:43):
It's similar to Expo Orbit, I think is the one
Mustafa Ali (30:47):
They call it. Okay. Yeah,
Mazen Chami (30:48):
That one just pulls directly from your EAS infrastructure. Orbit was inspired by Top Hat actually. What? There you go.
Robin Heinze (30:56):
That's a fun fact
Mazen Chami (30:57):
Today I learned. Yeah,
Robin Heinze (30:59):
That's cool.
Mazen Chami (31:00):
[00:31:00] I think another topic that I kind of want to touch on real quick is state management from the article, you all built your own state management framework it sounds like. Can you tell us why you built your own state management framework instead of using something that's already existent out there, and what was the benefit from doing that?
Mustafa Ali (31:19):
Yeah, the main reason for that is because for the Shopify mobile app in particular, we had multiple React contexts and most libraries assume that application state can live in a top [00:31:30] level provider component, and that wasn't the case for the Shopify and mobile app. So we had something internally that supported that. So we extended that and made it available for the Shopify app. It works. It works really well and we like it. There's not a really strong reason for us to use anything else right now.
Robin Heinze (31:54):
Okay.
Mustafa Ali (31:55):
Will it be
Robin Heinze (31:55):
Open source so you won't be able to weigh in on the Redux versus everything else? [00:32:00] Statement,
Mustafa Ali (32:01):
Software, other apps use Redux, actually, and yeah, we constantly reevaluate what we are using in our tech stack and maybe it'll change in the future. I don't know. We'll have to see
Robin Heinze (32:14):
State management, it's so individual to every app and its needs. It's hard for there to be a one size fits all. So rolling your own, if you have the resources to do that is a really cool solution.
Mustafa Ali (32:27):
And also with, we have hundreds [00:32:30] and hundreds of screens, so what works for this admin work? Right? Exactly.
Robin Heinze (32:35):
Exactly. Unfortunately, we are pretty much out of time to end things. I have to ask what the future holds for React Native development at Shopify and what's next for the app? Do you have the new architecture turned on yet? What's the future look like?
Mustafa Ali (32:56):
Yeah, in general, we are very happy with React Native with Shopify. [00:33:00] I think it has given us a step change in productivity just by not building the same features twice. The huge unlock for us, we are very excited about the changes that are coming in React native, especially the new architecture. We are looking at adopting it on all our apps right now, and yeah, the community is thriving and we are looking forward to working with Meta and the community to make React native better.
Robin Heinze (33:26):
I love it. I love it. We are so happy that the React [00:33:30] native community has an advocate like Shopify. It makes such a huge difference having a big company that's put so much behind this technology and this framework, it helps it succeed for the whole community. We appreciate it and we really appreciated talking to you today. Where can people find you online if they want to hit you up?
Mustafa Ali (33:51):
I'm on X. I'm pretty active there. So Mustafa zero one, Ali on X on Twitter.
Robin Heinze (33:58):
Perfect. We'll put that in the [00:34:00] X Twitter. Everyone still calls it Twitter, let's be real. Of course. Masin is at Maja and I'm at Robin Hines with no underscore anymore. And then React Native Radio. The show is React native, RDIO on Twitter X and also Blue Sky, I believe.
Mazen Chami (34:23):
I believe so too. Yeah.
Robin Heinze (34:25):
Thank you so much. Must faff for joining us. It was a pleasure. I [00:34:30] will send you all out with a mom joke. I know you all have been missing it since I haven't been on the last few episodes. This is a really special one. This is from our editor, Jed Bartow's, five-year-old daughter Gemma, and it's amazing. What is a Snowman's favorite kind of frosting? Icing.
Mazen Chami (34:50):
That's a good one.
Robin Heinze (34:52):
It's so good. You should tell Gemma that her joke made it onto the podcast. Alright. [00:35:00] Thank you everyone for listening and we will see you next time.
Todd Werth (35:05):
Bye bye. Bye.
Jed Bartausky (35:17):
As always, thanks to our editor Todd Werth, our assistant editor, Jed Bartausky, our marketing and episode release coordinator, Justin Husky and our guest coordinator, Mazen Chami. Our producers and hosts are Jamon Holmgren, Robin Heinze and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at Infinite.Red/Radio. A special thanks to all of you listening today. Make sure to subscribe to React Native Radio on all the major podcasting platforms.