In this episode, Jamon, Robin, and Mazen are joined by Colin Gray, Principle Engineer at Shopify. We'll be diving into Shopify's journey with React Native, examining the challenges they faced, and also the successes that have come along with adopting React Native.
In this episode, Jamon, Robin, and Mazen are joined by Colin Gray, Principle Engineer at Shopify. We'll be diving into Shopify's journey with React Native, examining the challenges they faced, and also the successes that have come along with adopting React Native.
This episode is brought to you by Infinite Red! Infinite Red is a premier React Native design and development agency located in the USA. With five years of React Native experience and deep roots in the React Native community (hosts of Chain React and the React Native Newsletter), Infinite Red is the best choice for your next React Native app.
Helpful Links:
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast. Brought to you by the AI Council of Fear Mongers, who remind you, oh my God, we're all going to die. Episode 263. Shopify Goes React Native with Colin Gray.
Jamon Holmgren:
Mazen, you grew up in Nigeria, right?
Mazen Chami:
Yep.
Jamon Holmgren:
And so I've never been to Nigeria, but I have the impression that it's probably kind of a hot climate, or at least very warm.
Mazen Chami:
Yeah. Yeah. We only have... Only had, well have, had, have, I guess because my-
Jamon Holmgren:
I can see the conflict already, because you're like, "Is it my country? Is it the previous country?"
Mazen Chami:
It's been a while.
Jamon Holmgren:
Yeah.
Mazen Chami:
Last time I actually lived there, I was 18.
Jamon Holmgren:
Okay.
Mazen Chami:
It's been a while. I've lived actually... Whoa, what another realization! I'm almost at the point where I've lived in the US as long as I lived in Nigeria. Wow.
Jamon Holmgren:
That is... Yeah. That is weird.
Mazen Chami:
Thank you, Jamon.
Robin Heinze:
I'm doing a math on how old you are.
Mazen Chami:
No, I'm not 36. Right? Yeah. No, I'm now 33, 34.
Jamon Holmgren:
But you're getting there. You're getting there.
Mazen Chami:
Yes, I am. So we had two climates growing up. We had what was called Harmattan, which is the dusty season. Nigeria is just... The northern part of Nigeria is still in the Sahara Desert, and because we're close to that, we would get this dusty season of the winds changing in the Sahara, blowing dust to our area. Very cold in the morning. Think of desert weather, cold in the morning, very hot during the day. So, you wear a sweater, and sweatpants to school in the morning, and then you're in shorts and a T-shirt by noon.
Jamon Holmgren:
Okay. Yeah.
Mazen Chami:
And then rainy season, very muggy, raining 24/7, almost like a rainforest.
Jamon Holmgren:
But it's still warm during the rainy season.
Mazen Chami:
Yeah. Yeah.
Robin Heinze:
Yeah. Not like the Pacific Northwest rainy season, which is really cold, not humid.
Jamon Holmgren:
Rainy season as opposed to construction season.
Robin Heinze:
Yeah.
Mazen Chami:
Right. Yeah.
Jamon Holmgren:
So I ask you that because, when was the first time you saw snow?
Mazen Chami:
Technically when I was 18, when I first moved to the US.
Jamon Holmgren:
When you were 18. Yeah.
Robin Heinze:
Did you just think Snow was a mythical...
Mazen Chami:
No, I had seen it, like mountain caps.
Jamon Holmgren:
Sure.
Mazen Chami:
Like when we flew to Europe and stuff, and from the plane, that is, and then in movies and stuff like that. But that was my only relation to snow.
Jamon Holmgren:
What were your thoughts when you saw snow for the first time as an adult?
Mazen Chami:
It's funny you asked that, because I remember the first time seeing snow in my room. I was like, "Hey, you've never seen snow. Look outside." It's like I sat up in my bed and opened up the window, and just sat there and watched it fall.
Jamon Holmgren:
Wow.
Mazen Chami:
Because that was the first time I had seen it.
Jamon Holmgren:
Like a kid. Yeah.
Robin Heinze:
It's a very unique sensory experience. Visually, if you go out and play around in it, there's nothing quite like your first snow.
Mazen Chami:
Yeah.
Jamon Holmgren:
You know how just everything... It's super quiet.
Robin Heinze:
It's so quiet. I love it.
Mazen Chami:
Yeah.
Robin Heinze:
Everything's just really muffled, and it's very peaceful.
Jamon Holmgren:
Super peaceful. I love it. Yeah, it's really fantastic.
Robin Heinze:
I love it. Until I have to drive somewhere.
Jamon Holmgren:
Yeah. Then it's not so fun.
Mazen Chami:
Or walk through it. Living in New York, that was not fun.
Jamon Holmgren:
So you got plenty of snow there.
Mazen Chami:
Yeah. Yeah.
Jamon Holmgren:
Well, very cool. I'm going to go ahead and introduce everybody. I'm Jamon Holmgren, your host and friendly CTO of Infinite Red. I live in the beautiful, snowy, actually today, my kids actually had a two-hour late start to school, Pacific Northwest, with my wife, and four kids. I play hockey, and I drive my tractor whenever I get an excuse to, which is not very much during the winter, but I am joined today by my entertaining co-hosts, Robin, and Mazen, and our guest, Collin Gray. Robin is a lead... Is the... Why does it say a here? Robin, we need to fix that.
Robin Heinze:
You changed it.
Jamon Holmgren:
I changed it?
Mazen Chami:
Changed it. Sorry.
Robin Heinze:
Oh, Mazen. Uh-oh.
Mazen Chami:
I just changed senior to lead. I didn't even go through the rest. I didn't read it out loud.
Jamon Holmgren:
Well, that's what I get for reading this instead of just saying it off the top of my head. Robin is the lead software engineer at Infinite Red. She's located west of Portland, Oregon, with her husband and two kids. Mazen Chami lives in Durham, North Carolina with his wife and baby boy. He's a former pro soccer player and coach, and is a Senior React Native engineer, also here at Infinite Red.
I'm really happy to have Colin Gray on here as well. He's a principal engineer at Shopify. He does React Native, and a lot of other things. I've known Colin for a very long time, almost 10 years now, maybe even 10 years. It's been a long time, which is very exciting. It goes way back to our Ruby days. We've been to conferences together. It's been great, and it's awesome that we're working in the same field, same tech stuff, still to this day.
Robin Heinze:
It's the Ruby to React Native Pipeline.
Jamon Holmgren:
It really is.
Colin Gray:
Right.
Jamon Holmgren:
It really is.
Colin Gray:
I wouldn't call it a well-oiled pipeline, but it is one.
Jamon Holmgren:
I would agree with that. So, Colin, well, let's see here. You've done all kinds of things, so why don't you go ahead and give a little intro of... A little bio.
Colin Gray:
Sure. Well, I will share that joy in being here with my old friend Jamon, and new comrades. Yeah. Let's see. Like you say, I've worn a lot of hats in my career. I started Full Stack... Well, started on the TI-81 calculator, jamming TI-BASIC into that thing.
Jamon Holmgren:
Oh, yeah.
Colin Gray:
And then made my way to Objective-C, as one does, classic pipeline, again, story as old as time. Yeah. I got my first Apple computer in like 2003, and dove right into Objective-C. I had known Java and C++ by then and was like, "Oh, those are stupid. Those languages are dumb. Objective-C is cool because Mac is cool."
Jamon Holmgren:
Yeah.
Colin Gray:
So yeah, when iPhone came out, I was ready to stop working at an agency doing PHP, though it was a great experience, but goodbye PHP and jQuery. Hello, Objective-C and iPhone apps. And then Ruby Motion came out, jumped right into that. I thought that was very cool. I guess I was sick of Objective-C by then, which I have a love hate with Objective-C these days.
Jamon Holmgren:
Yeah.
Colin Gray:
It's like, do I want to wait for Swift to compile? Or do I want to be done in Objective-C?
Jamon Holmgren:
Right.
Colin Gray:
Neither you can write in React Native, and have your cake and eat it too. Yeah. And then, let's see, after Ruby Motion days, I was writing a lot of Swift code for this startup, Ello, based out of Denver. That's where I was at the time. And gosh, a huge long story there. Became CTO, went from mobile to CTO, and like I say, I'm jumping through a lot of details, but I wore every hat in that company, and kind of took that experience of leaving Swift, going to React Native, owning many different domains, doing more kind of engineering leadership.
Brought that to Shopify, and they said, "Yep, we want that experience," specifically because they were working through the migration to React Native. We were well into it when I joined. That was July, 2020. But there was still, I think, some chagrin from native developers who missed Kotlin, and missed Swift. And I had taken that journey of... Mine was very different. I opted into React Native, actually by way of React. I had been working in a React code base for long enough that I was like, "This is good." And Typescript had come along enough for me to say, "Okay, JavaScript is palatable now."
Jamon Holmgren:
It is interesting to hear your path, because we've interacted all the way through when you were working at Ello, and obviously moving to Shopify and stuff, but it wasn't identical to what I did. It was different, but we ended up in the same places, probably because we value similar things. But yeah, it is kind of fun to see a similar career arc happening there. I should mention that this episode is sponsored by Chain React, Chain React is back, better than ever, and Colin will actually be speaking at Chain React.
Robin Heinze:
What? Yay.
Jamon Holmgren:
So, yay. So, come to Portland in May, 17th through 19th. The actual conference is the 18th and 19th. We also have workshops. And so come to Portland, Oregon, and listen to Colin and other really great speakers there at the Best React Native Focus conference in the us. Check it out, chainreactconf.com. Get your tickets.
Mazen Chami:
How funny would it be if this episode came out after the conference, and then it's like, "Yay. Too late. You Ms. Collins talk."
Robin Heinze:
I have a little more faith in Jed than that.
Mazen Chami:
Sorry, Jed.
Robin Heinze:
That it won't take three months. Right, Mark?
Jamon Holmgren:
Yes.
Robin Heinze:
Yeah, three months.
Jamon Holmgren:
Hopefully. All right. All right. Let's get into our topic for today, and our topic is Shopify goes React Native. We've talked with people from Shopify on this podcast in the past, but it's usually been kind of about parts and pieces, which is why I'm excited to have Colin on here, because we're going to get a little more of an overview of how this all happened. We talked with Haris Mahmood from the Shop app about Restyle, and we also talked to Talha Naqvi, who had worked on Flash List, which is a really, really cool... One of the biggest kind of innovations that's happened with the front end components in React Native in a long time, also from Shopify. So, we've talked about those two. That was in React Native Radio 210, and 245. Check those out if you haven't seen them. Very good episodes. Very, very interesting. Shopify's chock-full of great engineers.
Colin Gray:
Well, I could jump in with... Because I was curious if you had talked to someone else in Point of Sale.
Jamon Holmgren:
Yeah.
Colin Gray:
It's Ryan Christiani.
Jamon Holmgren:
Okay.
Colin Gray:
Do you recall that name? Episode... And I had to look this up, because I was like, "Oh yeah, other people than me have been on." Episode one 160 with Ryan Christiani.
Jamon Holmgren:
That was actually prior-
Robin Heinze:
Oh, that's pre. That's why I don't remember. It was pre takeover.
Jamon Holmgren:
That's prior to us taking over.
Robin Heinze:
But we can still mention it.
Jamon Holmgren:
But they have been on the podcast. Yeah. Yeah, absolutely.
Colin Gray:
Yeah. Yeah. Episode 160, Ryan Christiani, and episode 164, with Farhan Thawar.
Jamon Holmgren:
Okay, perfect. Yeah, so those were pre Infinite Red taking over the React Native Radio podcast, but it's still this podcast, and still interviews. So yeah, check those out.
Colin Gray:
Today I learned.
Jamon Holmgren:
Yeah, we took over around I think 179, was when we took over the podcast, and Robin and I... Mazen joined a little later as hosts, so very cool. And one of the things I want to mention is that Shopify Engineering published a blog post, Migrating Our Largest Mobile App to React Native. And this was actually only a couple months ago, or not even, six weeks ago, depending on, I guess when this episode comes out, or when people are listening to it.
Robin Heinze:
It was the end of 2022.
Jamon Holmgren:
2022. Yeah. And it is a fascinating article. There's a lot in it. And we're going to be asking you a lot about this, Colin, because you experienced this transition firsthand. So, the very first thing I want to ask you is, it said in the article that at first you folks were going to try maybe doing a brownfield thing. You were going to just incrementally bring React Native into the code base. So, first off, why did React Native even come up? And then secondly, what was sort of the thought process behind trying the brownfield thing? Spoiler, I don't think it worked. I think you went a different direction, but...
Colin Gray:
Huh. Spoiler, that is what we did. No, we did do the brownfield approach. I'll tell you about the other approaches that we considered, and crossed off the list. I would say pretty quickly... I'm not, as any good developer should be, asterisk, no developer is, I'm not a fan of rewrites. Of course, the reality is everyone loves a rewrite. You get to do it the right way. But, of course you never do. You just uncover the same bugs.
Jamon Holmgren:
That's true.
Colin Gray:
So rewrite was on the table, and I was very vocal against it. There are reasons to do it, but they're not very good reasons, in my opinion. I'm very opinionated on this. We also considered a, we called it the parallel, where we would write... We would not stop development on the Native code, we would create this new app, and then create them in parallel. The idea being that we would kind of take bugs, and learnings, and be incorporating them into the... But that just seemed like you would need two teams or something.
Mazen Chami:
Real quick. That parallel, was it Native also? So, were you doing a rewrite in Native parallel to new features in Native?
Colin Gray:
Good question. So, the Shopify Mobile... It's called the Shopify Mobile App. I often refer to it as Mobile Admin because Shopify Mobile sounds like all of mobile at Shopify. So the Mobile Admin is still very much a Native app, but was fully Native up until we started this migration. So even a year ago, yeah, a year ago, we hadn't shipped a React Native feature yet. So, a Swift app, a Kotlin app, separate repos, classic Native app development.
Robin Heinze:
Right, right.
Jamon Holmgren:
Shopify admin is for shop owners, right? These are people that are listing products on their own websites.
Colin Gray:
That's right. Yeah. This is for store owners, for merchants to make changes on the go.
Jamon Holmgren:
Perfect.
Colin Gray:
Yeah. So with the main constellation, so you've had Haris from Shop App long ago, Ryan Christiani from the Point of Sale app. Another big app that we have is Inbox, that's for merchant to buyer communication. And then we've got Mobile Admin for merchants to manage their store. All of those at one point had a Native app. All of those except Mobile Admin did a greenfield, new app approach. All of those, except Mobile Admin, didn't have an Android app when they started out.
Robin Heinze:
Oh, really?
Jamon Holmgren:
Wow.
Colin Gray:
Yeah. So in those cases... And I was very... Pointing that out. "Hold on. That's a different story. If you need an Android version, you might as well."
Robin Heinze:
Right, because then you get the rewrite, and then another app for almost free.
Mazen Chami:
Two for one.
Robin Heinze:
Yeah.
Colin Gray:
Exactly. Right. Almost free. Yeah. Point of Sale is-
Robin Heinze:
Almost. We all know it's not quite free,
Colin Gray:
It's not quite for free. Yeah. Point of Sale was the weirdest one because there was a Point of Sale classic that was a native iOS app, and then Point of Sale Classic Android, and then Point of Sale next for iOS, and there wasn't an Android version. So there you go. So, brownfield approach, yes, there's parallel. There was greenfield, and there's actually a third, or in this case, fourth approach, and I'm trying to remember it.
There was some sort of hybrid that we came up with. We were trying to explore all the possible solutions, and ultimately said, "Brownfield's the way to go." Oh, I remember it. We had this... We called it Bottom Swap, and actually that is where we're at now. It's more a step along the way of brownfield. So brownfield, everything's Native, your navigators, all your screens, everything. And what we were doing was saying, "Okay, we're going to take each, screen by screen, and allow for that specific feature to be written in React Native." And we knew this was reasonable because actually Facebook does this thing.
Jamon Holmgren:
Yeah, that's what it's designed for. Yeah.
Colin Gray:
Right. I don't know how they do, because it's not very enjoyable, it is quite painful.
Jamon Holmgren:
Yeah.
Colin Gray:
They must do a very good job of it.
Jamon Holmgren:
They have a lot of tooling.
Colin Gray:
Maybe we're not. I think we do a great job.
Jamon Holmgren:
Yeah. Their tooling apparently is quite amazing.
Robin Heinze:
They have entire teams whose entire job is to write tooling.
Jamon Holmgren:
Right, just those, yeah, that tooling. Yeah. Yeah. I can imagine that would be quite a complex thing to tackle.
Colin Gray:
For sure.
Jamon Holmgren:
And there's not really a roadmap. You can't just go to the docs and say, "Okay, I'm a big Native app now what do I do?"
Colin Gray:
Yeah. What's the hybrid.
Jamon Holmgren:
Right, exactly. Yeah.
Colin Gray:
Yeah. No, there is not a lot about it. I will do a hat tip to React Navigation for supporting this hybrid navigator. You can write custom navigators in React Navigation, and they are very well-supported. We have not had many issues there. And so, our hybrid navigator can go between Native screens, React Native screens, and we can make that determination, kind of register which one is which, and off they go. And that really impressed me. I thought that was going to be a major sticking point.
Mazen Chami:
So, you mentioned some of the teams were going greenfield, some of them were still sticking to the brownfield approach. What was the decision like? What was the major selling point for you to then go and use React Native for all your new features while you were porting things over?
Colin Gray:
The Mobile Admin has the advantage that most of the features are already there. There's not a ton of new feature development. But yeah, basically what we did is we set up this rubric of, when do we migrate, and what do we migrate? Because actually what do we migrate is a whole other thing, where we want to minimize the amount of code that we rewrite. So, one way to do that is with web views, a whole other set of pain points we [inaudible 00:17:53] discuss.
But the order comes from, is this feature going to get rebuilt? Is it getting reevaluated by UX? Are we adding features to it? Great. That should be done in React Native, but asterisk there. If that screen involves many different existing screens, and we're kind of incorporating it into an existing flow, that can be quite difficult, though we still pretty much say, "Nope, has to be done."
We do support basically within one flow. Like if you're creating a new product, you might go from a React Native screen, to a Native implemented screen, back to React Native, back to Native, whatever, any combination thereof. We do allow that. The data handoff gets tricky there. So, there's always this kind of cost benefit of how much of it do you port to React Native? Do you do all at once? Do you do just that one screen for now? And it's very feature by feature that we make that determination. But, at this point, the goal is no net new features written with Native code.
Mazen Chami:
Okay. So it sounds like no new features, but then you also had a way of prioritizing current features, and how they get poured over. I'm going to do a little jumping around in the article a little bit, because I think it kind of pertains to this section. You mentioned the quote criteria was RICE for me, an athlete, rice means rest, ice, compressed, elevated. Now what do you use it for? Can you go in a little bit into that formula and how you used it to help you give you that criteria a little bit better, on how to go about making these decisions? Because it sounds like that's how the decisions were essentially made, using this formula.
Colin Gray:
Sure. Yeah. So, this is a rubric. We didn't invent it. RICE scoring, does stand for reach, impact, confidence and effort. So what we want to know is, if this is high effort, but low impact, we'll get a low score out of that. If it's high impact, high effort, we'll get a medium score. If it's high impact, low effort, we'll get a very high score, for example. Of course, all of those factor in, and we can balance on, so for instance, if confidence is... If we kind of don't care about that, we're like, "Well, we know that a lot of our developers are new to React Native, so we know that confidence is going to be low. We don't want that to drag scores down." So we'll weight that one a little less.
But if there's a feature, let's say it's like a barcode scanning, that's going to need device communication, and we want to use machine learning technology for that, so our confidence is right close to zero. Okay. Yeah. We do want that to be affected by that score. So, reach is real big, like how many users are going to see this? So we gathered information about that, of saying, "Is this a flow that people use?" Because if it's not, it doesn't matter if it's easy, and it doesn't matter if... Reach and impact to get a little blurry to me. But, yeah, if no one's using it, and it's an important issue, it's like, well, who cares? We want reach and impact to be kind of first among equals in that scoring.
Robin Heinze:
Who kind of determines what the impact is? Because it seems like a pretty subjective number.
Jamon Holmgren:
Yeah.
Colin Gray:
Yeah. Reach, we could measure, impact was more subjective, and that would be between manager and UX. We always have this trio of UX, engineering manager, and product manager. So, that's the trifecta that can get that done. So, get that decision made for that type of, that thing.
Jamon Holmgren:
Yeah, that makes sense.
Colin Gray:
And in this case, yeah, a lot of the managers were engineering managers, were taking that on.
Jamon Holmgren:
You mentioned not everybody was familiar with React Native going into this, and you had to teach everybody to be able to ship features in React Native. What I thought was really cool here, and this is something that I'm going to steal from you folks, because there are some of our clients who come to us and say, "Hey, we have the same problem. We're moving over to React Native. Our developers are React Web or they're Native mobile developers, or they're both."
You came up with this thing, not you, I don't think it was you, but someone internally at Shopify, or a team came up with the React Native Accelerator, which I think is amazing. It's such a cool idea. Can you talk about how you taught people to build things, ship things in React Native? How deep did you go? Was it just sort of surface level, and then let people kind of figure it out from there? Explain what's going on with that?
Colin Gray:
Yeah, so it... Let's see. I would say it went deeper on React methodology, and then on the React Native side, it would touch more on Native modules. "Here's how you write a Native module, and why."
Robin Heinze:
Why, because this is Native developers that you're teaching?
Colin Gray:
Right.
Robin Heinze:
Right. So they come in with this leg up already, because they know about Native development, and so you're having to teach them the React side more. Yeah, that makes sense.
Colin Gray:
Yep. Yep. Exactly. Though, I mean, there really is a third beast, which is React Native. I don't think any one group is served well, moving into React Native. It has its own gotchas.
Jamon Holmgren:
Yep.
Robin Heinze:
The bridge. The bridge is a beast.
Colin Gray:
[inaudible 00:23:24] A lot of what I'm thinking about.
Jamon Holmgren:
We built a company on it.
Colin Gray:
The bridge. Yeah.
Jamon Holmgren:
Yeah.
Colin Gray:
Right. Yeah. Yeah. There's just a lot of considerations. Yeah. So React developers don't know anything about this bridge, and nor do they necessarily know that it's expensive to make a div.
Jamon Holmgren:
Right.
Colin Gray:
I don't think that thought comes up in React Web. It never came up when I was working in it.
Jamon Holmgren:
Yeah.
Colin Gray:
HTML was cheap.
Jamon Holmgren:
Yeah.
Colin Gray:
You can let the DOM do this heavy lifting. That's not what you're doing in React Native. You're making real heavy view objects, and every book on classic mobile development is, "Don't make views. Flatten your hierarchy, reuse cells." And cell reuse, what even is cell reuse and React Web without reaching for some kind of esoteric library?
Jamon Holmgren:
Right, like Virtualized List, and stuff like that.
Colin Gray:
Twitter streams have to figure that out.
Jamon Holmgren:
Yeah. Yeah.
Colin Gray:
But yeah, you don't do virtualization. And meanwhile, mobile devs know everything about virtualization.
Jamon Holmgren:
Oh yeah.
Colin Gray:
They know all about recycler view, and [inaudible 00:24:24] table view.
Jamon Holmgren:
Absolutely. When we talked with Talha, it was like this was an innovative thing within the React Native community. But as native developers, I'm looking at-
Robin Heinze:
It was old hat. It was like, "Well, of course this is what you do."
Jamon Holmgren:
Yeah, it was like, you finally got cell reuse? Okay. We had that a decade ago.
Robin Heinze:
This is why we love when more Native developers get up to speed on React Native and come into the community, because they bring things like this, that people coming from the other side don't even know to think about.
Jamon Holmgren:
I found that Native developers are way more skeptical, and harder to get to move into React Native, but often bring a lot of value.
Robin Heinze:
Absolutely.
Jamon Holmgren:
Where the web developers embrace it, and they dive in, but they often have to go up a steeper learning curve to get over the Native parts of it. It's a trade off. It's like you said, Colin, not everybody's served exactly the same, or super well.
Robin Heinze:
Yeah. I think that's a really accurate assessment, Jamon, but that that's what I've seen, is that the Native developers, like you said, are a lot harder to convince. But the ones that I've seen really adopt it, and genuinely start to see what React Native can do, and believe in it, are absolute powerhouses, and make amazing, performant, beautiful apps.
Jamon Holmgren:
Yep. So, has that changed your team culturally, making this switch? I'm always super interested to see how technology changes the internal culture of a team.
Colin Gray:
Sure, certainly... And I would say, let's see, how should I put this? Yes, it certainly did have an effect. There were short term fallout from especially senior people who weren't maybe part of the decision to use React Native. This was a strategic kind of company-wide decision to really lean into React. And I think people felt like this was something that was imposed on them, because was, I should say, because it was.
But also if the core team at Shopify is... Sorry, I should call it what it is, the core team, meaning most of the developers at Shopify are Ruby on Rails, or at this point React developers. Mobile is third place. Most of the company... And that makes sense historically, it makes sense for our merchants. Most of them are using a desktop computer to manage their store.
So, we're going to meet them where they are and say, "Okay, they're using a browser on a full screen computer. That's what we're going to optimize for." So you've got all these React devs, they're kind of setting the pace of the company, setting the engineering tone. And then you got mobile devs, they're getting none of that. So, choosing React Native brings everyone to the same table, or the same trough.
We can now share more tooling, share more methodologies, and I'm thinking of the word mind share here of, this is how apps get made, and they don't get left behind. So I think there's actually a huge benefit that people were discarding, because they said, "I don't want to write JavaScript, Typescript, React, whatever. I want to write Swift or Kotlin. I don't care that the compiler takes half a day."
Jamon Holmgren:
No bitterness there.
Colin Gray:
Required JavaScript. And this was a big part of me coming on board, was to kind of try and gather, rally the troops around, yes I... Because I understood. No, I wrote a lot of Swift, and Kotlin. I do understand the appeal, and there's some good stuff here as well, in React Native Land.
Mazen Chami:
You've mentioned a lot of Native developers. Do you still hire Native developers, and then bring them up to speed on React, and React Native? Or do you hire React Native developers, or does it depend on where your needs are?
Colin Gray:
Actually, I would say it doesn't depend. We hire both. Yep. We are happy to hire a good mobile dev for all the reasons that Robin, I think you put it best, what they bring to the table. I think we've all kind of touched on it. We want people who are thinking about the mobile experience, and how you write for mobile, and React Native is just the tool that we do that with, and you can learn the tool.
Similarly, if someone is a React dev and they come in, and they're saying, "Hey, I want to make the switch. I've been writing React for years. I want to switch to being a mobile dev, and you're using React Native." We're like, "Great, come on in." And we're going to teach you on our tooling, and our way of doing it. But yeah, yeah, I'd say we take all comers.
Robin Heinze:
So, you've put all this effort into rewriting, reforming your apps in React Native. You had a huge growth period where you were adding a lot of new React Native developers, training up your Native developers. Are you still in that growth period, or would you say that there's a lot left to do in terms of transforming your business to React Native? Or have you kind of reached a stability point?
Colin Gray:
I wouldn't say we're at a stability point. We're at an inflection point, if I could sound hoity-toity, because we are no longer actively training developers on React Native, but we're still teaching them React Native. So, everyone is writing features, it's full steam ahead. Our velocity is quite good. I think there's room for more, because we do have to go back to some features and say, "Oh, this needs to be refactored a little bit."
And it comes down to these kind of classic React concepts. Stability is a big one. Does it matter that you are invoking this function as an argument to this hook, which means that that value that you're handing it is actually a new value every time? Or are you giving it an anonymous function, where you should be wrapping it and use callback for use focus effect, for example? There's just all these little nuances that still get dropped, because people are... They're operating at the level of, "I know to how to get from point A to point B, but I might take a wrong turn along the way."
And so, we got to backtrack a little bit, and repave that section of road, and then we're good to go. And we're the better for it, because then if someone copies and pastes that code later, they'll have the right pattern. So, that's where we're at, is we're doing a little bit of correction things, but these aren't broken features, or unimplemented features. We are shipping well. But, yeah, there are still lessons that are getting learned there. So, yep. Hopefully that answers your question.
Mazen Chami:
So I really like a lot of the stuff you guys are doing at Shopify, specifically some of the open source initiatives that you have. So, we mentioned Flash List a couple times. React Native [inaudible 00:31:24] is one big one, and then React Native Performance is another one. I honestly didn't realize at first that React Native Performance was built by Shopify, though, until I was preparing for this podcast. So, that's pretty cool.
So, we have the business of maintaining all these apps, and I totally get it, and thank you guys for putting the time and effort into the open source initiatives, because it helps make you guys better, and us better in the community too. What's the roadmap look for that? Do you plan to continue to do open source? Or is it just one of those things where you stumble on a problem in React Native and you're like, "Okay, we need to solve this, so let's spin a team off to handle this situation?"
Colin Gray:
Yeah. Our strategy with open source is certainly focused on unsolved problems, and I think the space is pretty well mapped out. Skia was a real big one that I was calling out here and there saying, "We don't really have a low level 2D drawing thing, and it'd be nice if we did." I wrote a lot of core graphics code, not so much Android graphics, but a lot of core graphics code, that seemed like a reasonable thing to reach for when someone handed me... Showed me an image of something, I was like, "Oh, that's not out of the box UI kit."
Jamon Holmgren:
Right.
Mazen Chami:
Yeah.
Colin Gray:
"Okay, I'll draw it."
Mazen Chami:
Yeah.
Robin Heinze:
Yeah.
Colin Gray:
Here's a thing that does great vector drawing. And with React Native, you just didn't... There was nothing. There was React Native SVG, sure. It never felt the same to me. And maybe I'm not giving enough credit. It certainly deserves a lot of credit. It's a great library, but I wouldn't reach for SVGs for doing frame by frame animation, interactive drawings. I wouldn't use it to power a drawing app, and I absolutely would use Skia. That's where it shines. So, you could ask, what are the other parts of mobile development that aren't well served in React, by React Native libraries? And I'd kind of shrug, and say, "I don't know, not a ton at this point." And so, where would Shopify need to step in? I'd have to give that some thought.
Mazen Chami:
Yeah. It almost sounds like you guys are always open to jumping in and help open source fix, or plug a hole that's there and React Native.
Colin Gray:
Yeah, right, right.
Robin Heinze:
Well, it really goes back to what we've talked about with people who come from Native have this perspective of... That's really powerful, because the community that comes from more of the React, the website, may not even see what holes there are, because they don't have that perspective, that context. And so, what you guys are able to do is really important, and really powerful, and we are grateful that you use your power for good.
Jamon Holmgren:
Yeah. I agree. Because Shopify is sort of a heavyweight within the React Native community, but it's also things like Shopify, I know, has been very generous financially, supporting open source libraries within it, devoting engineering time. And then, I think even more importantly... Well, I wouldn't know if it's more importantly, but very importantly, sharing internal perspective on how you do things, and how you... I mean, even just coming on this podcast as an example of this, being able to go out there, and talk about it. Not every company does, and there's some big companies that do React Native, who don't really publish blog posts about it, who don't really talk about it, and it's really nice that you folks do. It just helps all of us make better software.
Robin Heinze:
Well, it helps you, ultimately, it helps you too. The stronger the community is, the more support there's going to be for things, the more likely it is that React Native is going to be around a long time, and be a successful platform. Which obviously benefits you, because you just spent a lot of time, and energy, and money converting your platform to it, so ultimately, mutually beneficial.
Colin Gray:
Yes. Yes, it is exactly that. Yeah, we want to stay ahead of that. I'd say there's nothing to us that Facebook, or anyone is saying that's like, "Oh, this isn't really going anywhere." I think, gosh, even early in the React Native project, I'm thinking back to 2014, 2015, it was kind of proof of concept. There was a time in there where I thought, "Is Facebook really going to continue with this?" But that was a while ago. That's almost 10 years ago. So yeah.
Robin Heinze:
They're still going.
Jamon Holmgren:
Yep.
Colin Gray:
They're still going strong, and yeah, and we chat with them. Jamon and I are in the meetings with Facebook, and they are... Actually, they're in a great place now, where they're really reaching out to us for feedback and ideas.
Jamon Holmgren:
They really are.
Colin Gray:
Yeah.
Robin Heinze:
They're doing great. Love to see it.
Colin Gray:
Yeah. Yep. I think they're doing a great job there, as well.
Jamon Holmgren:
Colin, let me ask you just to wrap things up, as we're kind of coming up against time here. From your perspective, what do you see the future of React Native at Shopify looking like, and what are your next goals for this year?
Colin Gray:
Yeah, great question. And actually, a great lead then Jamon, and you didn't know this, but this is a lot with what I would like to talk about at Chain React.
Jamon Holmgren:
Ooh, ooh.
Colin Gray:
Is this kind of default way of writing React Native apps. There is... I don't like to have to chase our tail in terms of things like stability and performance. I think you should, no matter what feature it is, you should write it in a way that is maintainable, performant, stable, and by stable, I would say easily tested. So, what are those patterns? What are those tools? Flash List is huge for performance. Having good patterns in place, great for maintainability. And if those patterns can lend toward stability, great, or not even great, required. That's the tools that you should be writing.
And this was one where in the early days of adopting React Native, it was, "Let's move fast and break things. Let's figure this out. Let's get our legs under us." But it was the... It's almost like we learned to run before we learned how to walk, and now it's, "Let's learn how to walk." That's a better pace for software development. Move slow, so you can move fast.
Jamon Holmgren:
Yeah.
Colin Gray:
Hashtag Charles Anderson for that one.
Jamon Holmgren:
I love that.
Colin Gray:
He says it, and I'm stealing it.
Jamon Holmgren:
Yeah.
Robin Heinze:
Move slow and make things.
Colin Gray:
That's right. Move slow and make things. Yeah. Yeah. Maintainability is a huge one for me. So, yeah, the Shopify mobile app is... It's interesting, because it kind of came last, we were able to take this very opinionated approach of how a feature gets made, leveraging Flash List as a default, something we're working towards.
We've got a couple hooks that lean into this. The phrase I use is default to performant. Put tools in place that kind of set aside considerations of, "Oh, do I need to wrap this in use callback, or do I need to wrap this into use a memo?" It's like, well, let's use tooling that just pushes those away, and you're always doing the right thing, and you don't get to write something that you later... I use the phrase, chasing the tail. You don't have to later come back and say, "Uh-oh, our performance is bad on this. Let's refactor it, and fix it."
It's, you're green across the board. Everything is performant. Even your silly little settings page, that is all static, and it's like three views. It's like, "Yeah, but it's great." And when you add something to that screen, and it does become complicated, you're not hurting, you're fine, because you've defaulted to this good behavior.
Mazen Chami:
I think I know when I'll be taking my break at Chain React, for your talk.
Jamon Holmgren:
What Mazen means is he'll be in the talk, because otherwise he's working.
Colin Gray:
It did sound the opposite. [inaudible 00:39:21].
Jamon Holmgren:
I don't want people to get the wrong impression.
Robin Heinze:
Not taking a break from the talk. Taking a break from working the conference, so he can watch the talk. Okay. Let's make sure that's clear.
Mazen Chami:
If you can't find me, I'll be listening to the talk.
Robin Heinze:
Definitely. Definitely sounded like... Yeah.
Colin Gray:
Right. I appreciate it.
Jamon Holmgren:
Yeah. Well, I'm really looking forward to seeing you there in May, Colin. It's been a while since we've seen each other in person, and obviously looking forward to your talk, and all the rest of the awesome talks that are lined up. But we've been... There's so much stuff going on behind the scenes. People don't realize how much work it is to put on a great conference, but it's happening. Gant Laborde and his team at Infinite Red are really pushing hard on that, and Robin's actually been working leading the mobile app rewrite for the conference. It's one of those things that normally we would just use some off the shelf, out of the box thing.
Robin Heinze:
Yeah. When you're a React Native consultancy hosting a React Native conference, you have to write an app from scratch.
Jamon Holmgren:
You have to write a app. Yeah. It's a lot of work. It is. Even if you're using Expo, and all the greatest tools, it doesn't matter. It's a lot of work.
Colin Gray:
Well, I look forward to it, as well. Yeah, that's going to be a ton of fun to see you all in person. My old friends Jamon and Gant, that'll be such a riot.
Jamon Holmgren:
It'll be great. Cool. Well let's wrap up. If you'd like to nerd out more about React Native, you can join our Slack community at community.infinite.red. We have over 2000 React Native developers in there. I recently asked everybody if they'd rather move to Discord, and actually a lot of people said... It was like 90% said, "Stay in Slack," which is surprised me. So, a lot of Slack fans there. So if you like Slack, that's the place to be. There are some other Discord communities out there as well. Where can people find you? I guess Colin, you're at everywhere, you're at C-O-L-I-N-T-A, Colinta... Well, actually that's your middle initials, right? Colin T. A.?
Colin Gray:
Those are my middle initials.
Robin Heinze:
Do you pronounce it?
Colin Gray:
Formerly my last names.
Robin Heinze:
Do you say it like phonetically?
Colin Gray:
In my head, so I used to be Colin Thomas-Arnold, hyphenated, and then I dropped the hyphenated gobbledygook when I got married, and my partner and I both took on the name Gray.
Jamon Holmgren:
Yeah.
Colin Gray:
So I was Colin T.A. growing up. And so in my head it's Colin T.A., but a lot of people Colinta, and I really like it.
Jamon Holmgren:
Yeah.
Colin Gray:
Yeah.
Jamon Holmgren:
It's funny.
Colin Gray:
Random aside, but I lived in Japan for a bit, and I had a host family, and my host mom called me Colinta consistently.
Jamon Holmgren:
That's funny.
Colin Gray:
Colinta, Colinta-kun.
Jamon Holmgren:
Yeah.
Colin Gray:
And I loved it, so that warms my heart, and apparently it also sounds really cute in Spanish.
Robin Heinze:
Colinta.
Mazen Chami:
Colinta.
Colin Gray:
Exactly. Yeah. So it's like, okay, cool.
Robin Heinze:
It works. It works.
Colin Gray:
So Colinta has...
Jamon Holmgren:
It stuck.
Colin Gray:
I've adopted that.
Jamon Holmgren:
Yeah. Right. And you can also find Colin on GitHub at that same username.
Colin Gray:
Yep.
Jamon Holmgren:
You can find Robin at Robin_Heinze with an E. You can find Mazen at Masen Chami. And I'm at Jamon Holmgren on Twitter and GitHub as well. React Native Radio is @ReactNativeRDIO. We ran out of characters, so we had to cut one. Thanks so much, Colin. Really appreciate you joining us today. As always, thanks to our producer and editor, Todd Werth, our assistant editor and episode release coordinator, Jed Bartausky, our designer, Justin Huskey, and our guest coordinator, Derek Greenberg. Thanks to our sponsor Chain React, make sure you go buy your tickets chainreactconf.com. Also, check out Infinite Red, infinite.red/reactnative. Special thanks to all of you for listening today. Appreciate it. Make sure to subscribe. Send this over to someone who might be interested. Robin, do you have a mom joke to take us out in style?
Robin Heinze:
It's really more of a dad joke, and you'll understand why in a second. But what do you call a very amiable person who can't stomach milk, and doesn't have any bread? Lack toast and tolerant. That's from Slack from the one and only Jamon Holmgren.
Jamon Holmgren:
Nice. So you used one of mine against me.
Robin Heinze:
Yep. So you can't say it's not funny.
Jamon Holmgren:
All right. We'll see you all. Next time.
Robin Heinze:
Bye.