This week: We're joined by Naoya Makino from the popular marketplace app, Mercari. He joins us to talk about what it was like to rebuild the company's native mobile app in React Native – all in 18 months!
This week: We're joined by Naoya Makino from the popular marketplace app, Mercari. He joins us to talk about what it was like to rebuild the company's native mobile app in React Native – all in 18 months!
This episode 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 Record High Temperatures. Enjoying this year's? Don't worry, next year we'll have new records. Episode 246 Mercari from Native to React Native in 18 months.
Jamon Holmgren:
I'm surprised I made it to the recording this morning because I got a new toy and it's a new computer. It's a gaming computer and I was setting it up last night until the wee hours. So you may or may not have all of me.
Robin Heinze:
Are you telling me your Mac Studio isn't good enough to be a gaming rig?
Jamon Holmgren:
I would love for it to be and it has an incredible processor and there's so many cool things. But you know how many games don't work with Mac?
Mazen Chami:
Yeah.
Robin Heinze:
There's a lot of games that don't work.
Jamon Holmgren:
Or if they do, they work with Intel Max and not M1 Max.
Robin Heinze:
It's true. It's an issue.
Naoya Makino:
That Is true.
Jamon Holmgren:
So instead I got a laptop. Electronics is the brand. Actually, that's my previous gaming laptop as well. It is Windows 11. I've never used Windows 11 before, so that's interesting and got it all set up. The weirdest thing about it though is that it's liquid cool.
Mazen Chami:
That's pretty cool.
Jamon Holmgren:
It's actually liquid cooled.
Robin Heinze:
That's so counterintuitive. Hey, let's take a bunch of electronics and then run a bunch of liquid through it.
Mazen Chami:
Or water.
Jamon Holmgren:
It actually has an external cooling tower.
Robin Heinze:
Oh wow.
Naoya Makino:
I've seen that to one of those-
Mazen Chami:
And then some Hoses.
Robin Heinze:
So it runs the liquid through and it absorbs the heat and then it comes out and then it goes through the cooling tower and then runs back-
Jamon Holmgren:
Which is basically like a radiator.
Mazen Chami:
More or less.
Naoya Makino:
Does it have a light in it so far?
Mazen Chami:
That's pretty cool.
Jamon Holmgren:
Yeah, it actually does have a little LED and you can change the color-
Robin Heinze:
RGB.
Jamon Holmgren:
And things like that. Obviously you may be wondering why have a laptop if you're tied to a cooling tower. Well the interesting thing is you can decouple it, remove the hoses and it all just quickly seals and you don't get water everywhere. Not even a drop. It just pops out and then you can use it just air cold as well.
Robin Heinze:
Interesting.
Jamon Holmgren:
There's like both things built in but then when it's air cooled you probably don't want to run it on the most performance. Anyway, this is all really nerdy stuff but of course I'm going to be using the latest and greatest games.
Robin Heinze:
You mean Rocket League?
Jamon Holmgren:
Maybe.
Robin Heinze:
Minecraft?
Jamon Holmgren:
Maybe Rocket League, which is not the latest ingredient.
Mazen Chami:
So, is your Twitch stream changing? Are you rebranding?
Jamon Holmgren:
Should yeah, I should change from React Native Live to like Jamon plays games very badly.
Mazen Chami:
Live.
Robin Heinze:
Live.
Jamon Holmgren:
Live.
Got to keep that branding.
Mazen Chami:
Yeah.
Jamon Holmgren:
I'm excited though. So, I'm going to go as quickly as I can so I can get back to gaming. I guess I do have a job to do as well. I don't know, maybe.
Robin Heinze:
Yeah, CTO of something I think.
Jamon Holmgren:
Something, I don't know. Let me go read the copy just to figure out what that is. So I'm Jamon Holmgren your host and friendly CTO of Oh it's Infinite Red. That's who it is. Who I work for. I live in the beautiful Pacific Northwest with my wife and four kids. I play recreational hockey. I just added that to my bio by the way because I want to make it let people know. Yeah, it's in the template though so you're going to hear it more. And I drive my tractor whenever I get an excuse to. I'm joined today by my spiffy co-hosts Robin and Mazen as well as our guest, Naoya Makino, which I'm going to introduce in just a bit. But you all are spiffy today. You do look spiffy today. People who are listening can't see but...
Mazen Chami:
We're like moving in a spiffy way right now.
Robin Heinze:
Yeah.
Jamon Holmgren:
I don't know if that's how Spiffy works, but we will-
Robin Heinze:
We'll say then that's how it works.
Mazen Chami:
Go with him. Robin Heinze is a Senior Software Engineer at Infinite Red. She's located west of Portland, Oregon with her husband and two kids and has specialized in React native for the past five years. It doesn't say that you are into any sports here, Robin. That's going to be an outlier of these bios.
Robin Heinze:
You don't want to see me try and play sports.
Jamon Holmgren:
Okay. Might be hilarious.
Robin Heinze:
It would be hilarious. I just asked Gyan who was my partner during the water balloon toss.
Jamon Holmgren:
Yes.
Robin Heinze:
At our retreat. There's not a lot of natural athletic talent there.
Jamon Holmgren:
Also joined by and Mazen Chami who does have a lot of natural athletic talent. He lives in Durham, North Carolina with his wife and baby boy. He's a former pro soccer player and coach and he is a senior React native engineer also here at Infinite Red. Mazen played goalie and I play goalie as well and Mazen still plays goalie recreationally. The reason I bring this up is because now I'm going to introduce Naoya. So, Naoya Makino is a senior engineering manager at Mercari. You've been there, it says here six years. Is that right?
Naoya Makino:
Yeah, that's right. It's been a while.
Jamon Holmgren:
Six years. Yeah. That's awesome.
Robin Heinze:
It's a long time.
Jamon Holmgren:
You're located in San Francisco, California. You like to BMX mountain bike, You play competitive soccer also as a goalie, which means-
Robin Heinze:
Three goalies.
Jamon Holmgren:
There are three goalies.
Naoya Makino:
It's pretty there-
Mazen Chami:
Robin did they let you play in goalie?
Robin Heinze:
See, I was the kid who I couldn't play goalie because I got glasses when I was seven years old and I was always afraid I would get hit in the face and break my glasses. If that gives you a picture of Robin as a child.
Jamon Holmgren:
So when I play, obviously I have a cage in a full helmet and I can't really wear my glasses underneath it. Som I just don't wear my glasses when I'm playing goalie it seems to work okay. There have been a few situations where I've lost the puck. And-
Robin Heinze:
How blind are you when you don't wear your glasses?
Jamon Holmgren:
Not too bad. I just have somewhat of an Astigmatism. I can't-
Robin Heinze:
And I'm not-
Jamon Holmgren:
Astigmatism.
Robin Heinze:
I'm not allowed to drive or operate machinery without my glasses.
Jamon Holmgren:
My driver's license says the same thing. I'm supposed to be wearing my glasses but it's not that bad. I can read signs.
Robin Heinze:
I'm pretty blind without my glasses.
Mazen Chami:
Do you ever ride your tractor or drive your tractor without your glasses?
Jamon Holmgren:
Oh yeah, all the time. Yeah.
Naoya Makino:
Oh.
Jamon Holmgren:
Yeah.
Mazen Chami:
Is that why the hydraulics was messed up the other day?
Jamon Holmgren:
Let's not go there. That was also operator error.
Robin Heinze:
Oh man.
Jamon Holmgren:
But we do have Naoya and I'm really happy to have you Naoya yet on the program today joining us. How long have you been playing soccer?
Naoya Makino:
Since junior high. So, it's been more than 10 years. More than that. Yeah, I've been 11.
Jamon Holmgren:
Fantastic. So now yeah. You are a senior engineering manager at Mercari. Tell us what is Mercari? What exactly is Mercari?
Naoya Makino:
Mercari is a marketplace app where you can buy and sell almost anything. We take care of the transactions in shipping so that in ordinarily let's say marketplace, you have to meet in person to exchanging cash. So, we take care all of that in the app. So, people like you who have extra stuff in closet or cell phones they want to get rid of, we make it extremely simple and easy. Our user base is now over 4.8 million MAU and we paid over 1 billion to set our community in the US on this year alone. So, I'm definitely growing.
Jamon Holmgren:
Wow.
Robin Heinze:
Mazen.
Mazen Chami:
I can definitely say one of the things as a developer that I really enjoyed about this project was actually using it. Buying and selling.
Robin Heinze:
Same. I've bought-
Mazen Chami:
I've bought bunch of Christmas gifts, birthday gifts, so easy.
Robin Heinze:
I bought baby stuff.
Jamon Holmgren:
The other side of it?
Mazen Chami:
Yeah. The other side, my wife has a pile right next to my desk and she calls it the Mercari pile. She just throws stuff there and then I just need to take pictures and sell it and so-
Robin Heinze:
is so easy.
Jamon Holmgren:
That's pretty huge when you can actually use the app that you're working on. That's really important. Mercari obviously very well known in Japan but also becoming more and more important in the US. I actually remember I was driving around one time and I heard a Mercari ad on the radio.
Naoya Makino:
Nice.
Jamon Holmgren:
And I was like, Oh that's cool.
Robin Heinze:
I was seeing them on YouTube.
Jamon Holmgren:
Because we were starting the project.
Robin Heinze:
I was like, Hey.
Mazen Chami:
It's on TV.
Jamon Holmgren:
Yeah, it's pretty cool. This episode is sponsored by Infinite Red. Infinite Red is a premier React native design and development agency located fully remote in the US and Canada. Fun fact, we have been around for about seven years. If you're looking for React native expertise for your next React native project, hit us up at infinite.red/react native. And don't forget to mention that you heard about us through the React Native Radio podcast, specifically the Mercari one because we want to know.
All right, let's get into our topic for today. The title is If We Don't Change It Between Now and then from Native to React native in 18 months. So, this is going to be about Mercari's journey from mostly Native, although there were React native elements in there and we'll talk about that. Another fun fact, Robin and Mazen both worked on this project with Naoya.
Robin Heinze:
True.
Jamon Holmgren:
So I'm the only one who here who did not work on it. So, I'm going to be asking the questions.
Mazen Chami:
You did help me that one time. So, technically you did.
Jamon Holmgren:
See that almost makes it sound worse Mazen. You did help me that one time.
Mazen Chami:
I was really stuck on it, I had-
Robin Heinze:
Just the ones.
Jamon Holmgren:
Yeah. and then I figured it out.
Robin Heinze:
Just the ones.
Jamon Holmgren:
I appreciate you bringing that up. Here's the thing, I trust my team, they're really great. They're better than me and so-
Robin Heinze:
And Jamon has a lot of other CTO things that he does every day to make this company run.
Jamon Holmgren:
Like play on my gaming computer.
Robin Heinze:
Like playing Rocket League. Yes.
Jamon Holmgren:
Got to make fun of the boss that's just-
Robin Heinze:
Punching up.
Jamon Holmgren:
Exactly. Robin started out as the primary developer. We worked very closely with Naoya all the way throughout the project. Naoya was essentially our primary contact there at Mercari and there was a team on the back end. We'll talk a little bit more about that in a bit. The primary did transition to Mazen when Robin was out on maternity leave and then back to Robin when Mazen was out on paternity leave.
Robin Heinze:
We literally did a hot swap.
Jamon Holmgren:
Yeah it was like a relay race.
Robin Heinze:
Here's the baton.
Jamon Holmgren:
You hand the baton.
Robin Heinze:
AKA the new born.
Mazen Chami:
Exactly.
Naoya Makino:
It was long enough that we had a couple of babies born and life changed and all that stuff.
Robin Heinze:
There should be like-
Jamon Holmgren:
18 months is just long enough for two babies.
Robin Heinze:
You know how if you ever watched to the end of the movie credits at the very end, there's like a list of all the babies that were born during the movie production. Yeah, we should have a Mercari credits where...
Jamon Holmgren:
Put that in the actual app. Naoya. I think you should. That would be amazing. For you Naoya, I'd love for you to tell us a bit more about yourself and how'd get to where you are now at Mercari?
Naoya Makino:
I started my career in Vancouver, Canada as a software engineer and that's when I started also developing for the mobile. I was in Android and about six years ago now I moved to California and State and this is where I got a job in Mercari. Back then we only had two well Android engineers including myself and a few other engineers in the office. It was pretty small. Around that time we decided to have our own app. Mercari is the company founded in Japan and we had the one shared call base for back then Japan, US and UK and in Mercari US, we decided to have it our own presence in the app.
So, we decided to light the app from ground up and that was a three months project and at that time we decided to introduce React native as a hybrid app for non-critical feature page like my profile settings and whatnot that are needed essential for the app to be present. But we didn't have that much time for the native engineers to implement. So we decided to have the React native back then. Since then and we have the React native hybrid app approach, we sometimes increase our React native prisons and decrease the presence whatnot. We had our relationship with the hybrid.
Jamon Holmgren:
That was one of the interesting challenges that we're going to talk a lot more about. But the porting from a hybrid react native app to more of a full react native app. So, you have a lot of different challenges that come in there and obviously the number one as a consultant, the integration of the two teams is a common challenge is something that we run into with pretty much every project. The integration of two different cultures, two different teams, two different styles of working maybe...
Robin Heinze:
Time zones.
Jamon Holmgren:
Time zones.
Mazen Chami:
Yeah.
Jamon Holmgren:
Yeah. All those things. Who wants to take on talking about that? Because I'm going to be really more as the person who was less involved with the project, I'm going to be more the interviewer here.
Mazen Chami:
The time zone thing was very interesting to tackle because there were a couple engineers based out of Japan.
Robin Heinze:
Quite a few actually.
Mazen Chami:
Yeah, mainly the back end team if I remember right. And that was interesting as we got deeper into the project and then for me being on the East Coast, there's also the West Coast folks too, but it worked out where sometimes when I'd get up and start my day, the Japan team was wrapping up their day so it'd be a quick handoff. I'd hop on a call with a couple of them and just see how far they got along with maybe wrapping up the back end stuff and then be able to start my morning off of that work and then eventually West Coast folks would come online and then keep rolling in that sense. The one thing that I really like about time zones and how spread out we are is it almost felt like this app was being worked on 24/7.
Robin Heinze:
It's true.
Mazen Chami:
I think if you look at the time difference, because for me I think Tokyo was 13 or so hours ahead so it worked out perfectly where 24/7, someone was on the app working during business hours.
Robin Heinze:
It actually really helped keep things moving because someone on the back end team would basically be working on something overnight in Japan and then we would come back to work the next day and have the end points we needed or something. So, it was like this handoff.
Jamon Holmgren:
How was it like. Because you had this existing native code with React native, one of the first things you have to do is actually just read through the native code, find out what's going on in there. I don't know how. Now do you know how old the code base was?
Naoya Makino:
It was about six years around that time when I joined. So it's about six years. Yeah.
Jamon Holmgren:
Okay. Six years old. So have to go through and learn the history of everything that has been done to it in those six years. So, how was it reading through that existing code as we were doing the porting?
Robin Heinze:
It was definitely an interesting experience. I mean for one thing you're reading through Kotlin and Swift, which is different for a lot of reacting unit developers. They may not be as familiar. So, parsing through all that was really interesting and a challenge. But also there's a level of business knowledge and context that you have to have, to know what you're looking at or why something is the way it is or okay so why was this rule put in place or why did you need this logic or something. It's hard to get from maybe just reading. And so we definitely relied a lot on pairing and working with a lot of the existing Mercari team because their native developers, even though they may have been new to React native, they had all of this context and knowledge of how the business worked, which was really valuable.
Mazen Chami:
Yeah I think Naoya implemented the buddy system at the beginning when we first came on and that was very helpful actually you and I were paired up and it was very valuable. I remember working on a task and getting stuck because I'm looking at the native code but not the business use case. I wasn't really sure what was necessarily expected to happen. So, we would hop on a call and you'd explain it and you show me the native code and then we'd work through it that way and then eventually pair on the React native code and that was awesome. And then sometimes it was vice versa, you would have the business knowledge and then we would come pair and get to the React native side. So, I think that was a very cool bridging of gaps there.
Naoya Makino:
Yeah, definitely. I think the pairing worked out really well for also our engineers who are relatively new to React native. So infinitely you guys are able to teach us on a React native side while we are able to bring the business domain knowledge. But that worked out pretty well and I also wanted to have in order to, for you guys to start working on the app, start looking into from our React native code base. So it was easier for infinite that members to understand the code base beaten in the React native and then import it over to our new Reactnative code base.
Jamon Holmgren:
It is interesting to think about code as communication as communicating business needs business values because it seems like an extremely, I mean obviously it's for a different reason you're trying to actually build a machine but it is communication as well. Especially when you're porting, you're in there, you're trying to understand not only what code's there but why it's there. Why is this here? And there have been systems that I've built where it's very specific business logic in there. We really need to check for this because of this specific business need and it's a vote in favor of writing code that is readable, that is well documented. That is well commented.
Robin Heinze:
Absolutely.
Jamon Holmgren:
Just even if it works, if it doesn't communicate when someone inevitably sometimes rewrites it, they're not going to know what it's for and why it's there and they're going to have to rediscover that later. Conversely, when something's in code, it's harder to change. It's pouring concrete now. Now it's like, oh we don't want this building here, we want it over there. It's in the way. Okay well now we have to rip it out and we have to go pour concrete somewhere else.
Robin Heinze:
We have to re-route the plumbing you have to like-
Jamon Holmgren:
Exactly. Yeah. And make sure we don't cut off water to some other building. So that's where having good tests helps as well.
Robin Heinze:
I will say it was an interesting challenge because as React native developers, we have experience with native code but it's in a very specific way. You build native components and you send information over the bridge. It's very specific and one thing that was definitely challenging and we learned a lot from is learning just how an entire native app is structured and how to follow the path of data and logic and where to look for things. So as React native developers, I would highly recommend just learning about the basic structure of a native app. It was really eye-opening and we definitely learned a lot going through that process.
Jamon Holmgren:
I actually did an internal workshop not too long ago where I went through building a native app. I want to do another one, maybe an Android one because I think that was iOS. We were actually doing SwiftUI but I want to do that for my team as well. We have people on the team that have done native code. In fact, we did a lot of native apps prior to the merger before Robin or Mazen were at Infinite Red. We did a lot of native apps. So there are people that from back then that did native apps.
Robin Heinze:
Oh we definitely relied. Used a lot of the experience of our team,
Jamon Holmgren:
Those people. But at the same time it's like that's also changed over time. How you build native apps is Changed.
Robin Heinze:
Oh yeah, it looks entirely different.
Mazen Chami:
Yeah.
Jamon Holmgren:
Yeah.
Robin Heinze:
But it's just a nice skill to have because when you spin up a real data app, you have just created an entire iOS app and an entire Android app in your project and there's a lot of parts that we never really see or touch or understand because is there. It works.
Jamon Holmgren:
And that's one of my big things that I try to do for our team is give workshops that show different aspects of what we do at a deeper level just so that the whole team has understandings. They may have it to some degree or another but that's big. Especially when you're dealing with the hybrid App.
Mazen Chami:
Yeah, I remember stumbling on this YouTube series, I don't remember the name, it was like Android Fundamentals. It was run by Google, Google India I think it was. But they had a really good fundamental series on how to build Android apps and it was very detailed. So, it was really cool to see an end to end. I believe it was in Kotlin. I'm not 100% sure now it's been a while. I mean it was towards the beginning of this project where they just show you how to do everything. It even goes as deep. We just had an episode on Firebase. It goes as deep as how to integrate Firebase into your app also. So, I thought that was really cool to see. Relatively, it didn't take really that long to go through it but I came out of it with a better understanding and going to the pairing sessions. Now your background was Android so it was very helpful. So the language you were using to understand all that.
Naoya Makino:
Yeah, I see now that we transitioned to the React native, many of us coming from the native background, becoming a React Native engineer, having the native background is extremely strong asset and I think in my opinion it might be more difficult for React Web engineer try trying to understand the either iOS or Android native platform. So, I find that becoming React native engineer from Native App background will get you even a better position.
Robin Heinze:
Oh yeah. You have a huge advantage. I think.
Jamon Holmgren:
It's not so much an issue these days but back when we first started doing React Native, it was actually a lot harder to... So it was easy to convince a web developer to do it because it's like, "hey, you can use React over, but you can build a mobile app." The Native engineers were more resistant and what I would tell Native engineers was, "Hey, we need you in the React Native ecosystem. We need your experience, we need everything you bring to the table." This is not just a bunch of web developers coming in and trying to tell you how to do your job.
Well that may happen as well but that's not the intent. This is actually a collision between those two communities in a good way where you can get a lot of great ideas from both sides of this. I felt like we were lucky. Certainly I was lucky to have done Native mobile apps for essentially three years, four years before that. So, it was mostly iOS but I dabbled a little bit with Android as well. And so I understood the basics of it. I actually built a library for Android. I think that that was a big thing back then. Nowadays it doesn't seem to be as big of an issue. It seems like Native mobile engineers they understand the proposition, the value proposition of React Native a little better now.
Robin Heinze:
Unlike that other framework React-
Jamon Holmgren:
That other framework.
Robin Heinze:
That other framework, React Native isn't just like, oh you're building and React Native and native isn't even involved. They're highly coupled. All the major libraries that we use in every project have huge, they have native components everywhere. It's so important. And so you're right we need people with native experience as part of the community. And so yeah.
Jamon Holmgren:
There was a custom design system with Mercari. So tell me more about that, About the design system and how that impacted the project.
Naoya Makino:
So, prior to lighting the React native 100%, we already had design system in place but back then it was adoption of design system was harder to implement because essentially we had to implement in three core bases, iOS and Android and React Native. And another key, so puzzle is that we had to comply on the accessibility. We wanted to increase our accessibility adoption so that we can reach more audiences and we implemented accessibility in mind for design system and we now have more than 30 plus components in atoms in our design system definitions. And that building puzzle, building pieces of the UI implementation is something that we focus on the early stage of the React Native app. So for the first months or two we spend our time on defining and lighting the design system components in the A native. So that gave us a boost start getting into the application layer to build up the features.
Robin Heinze:
What you said is absolutely true that thinking about your design system first is absolutely critical. And I remember we came onto the project and the design system was designed, all the Figma was designed and everything already and it was incredibly detailed and thorough and complete, which made things so much easier. And all of the designers who were designing features were actively using and referencing the design system components, which is fabulous. And so-
Jamon Holmgren:
That's the second part of that, right? You have to use it.
Robin Heinze:
Exactly. And if the designs don't actually use it, then you just end up with custom code all over the place and it's worse.
Jamon Holmgren:
It's almost worse.
Robin Heinze:
Yeah.
Jamon Holmgren:
Yeah.
Robin Heinze:
But in their Figma designs, they would reference, like okay, this is the design system button or the design system divider or whatever.
Jamon Holmgren:
That's awesome.
Mazen Chami:
Yeah. I think you hit the nail in the head, Robin. Whenever I would ping a designer and be like, Hey, I'm working on this screen, is this a new component? And the quick response was, nope. This is X and Y and then you pull up the code and it was like, oh okay and that's it. And you just call it done.
Robin Heinze:
They were almost allergic to anything that wasn't in the design system. In a good way, in a very good way. There's very strict standards about anything that was custom.
Mazen Chami:
It made it so easy.
Jamon Holmgren:
Yeah.
Mazen Chami:
I don't think I remember adding any components as the project went on because it was so thorough from the beginning and that was very helpful. Other than your token modal and toast, those are just evolving stuff. As the project grows, you might need a different package, you might need something more custom.
Naoya Makino:
When we are scoping out the re-write project, the only new scope or new feature that we wanted to introduce as a part of the rewrite is a design system adoption. We didn't want to have any new functionality added to the new app but the only thing we wanted to make sure that we can adopt is the higher adoption of design systems. So, I think we have achieved, if not close to 100% of the design system adoption at this point. So, definitely make the remarkable progress on that.
Robin Heinze:
I would say it's the best I've ever seen for you.
Jamon Holmgren:
That's amazing.
Robin Heinze:
Yeah.
Jamon Holmgren:
You mentioned accessibility and this is not lip service, This is not like, oh we need to check a box.
Robin Heinze:
Oh no.
Jamon Holmgren:
For Mercari, this was absolutely a first class citizen. It was one of the first things that now he actually talked to me about in our initial Zoom call when he reached out to us, We need really good accessibility here. And I thought it was fantastic because there's too many times where it's like, well I guess we should probably have accessibility. That wasn't it. This was like, no, we're going to make this amazing. So, I hope that we have achieved that and I hope that anybody who uses accessibility tools, who uses the Mercari App, that they have a great experience when using Mercari. The other piece of this Naoya is the native apps had a great app store rating. I mean not just good, we're talking 4.8 stars with a lot of ratings. That feels risky to move away from native when you have such a great app store rating. So, tell me about the pros and cons of the business decision of moving to React Native.
Naoya Makino:
For sure. That was one of the hardest discussions that we hire in the company. Obviously we have a native app engineers as well as React Native engineers back then. But one of the constant struggles that we had with maintaining the hybrid app with Android, Code base, iOS and React Native is that needing to have application level update like design system and accessibility is much more difficult to update in three core bases. So that's one. And the other is that when we expand the surfaces of React Native, the data synchronization between native and the React Native is it's becoming more and more challenging.
So, essentially we have to ask engineers to know both native and React Native layer to implement any large scale feature development. So, it was also a burden to mobile app developers back then. Another piece is the hiring is always being a challenge for us and we had to basically hire iOS and Android engineers to fill our position. So, we wanted to make sure that we can scale our team while not needing to let's say double or triple our head count to do that. So, it was essentially about being able to scale our business without needing to hire, let's say a triple of engineers to do that.
Robin Heinze:
That makes total sense. I know Jamon's been pretty vocal about the business advantages of React Native.
Jamon Holmgren:
Yeah. And it's really validating though to hear it over and over. We hear the same story. It's about maintaining, it's about adding features with Velocity. It's about hiring, it's about having a reasonably sized team instead of triple the size as now he says. We hear these over and over but it's validating because it they're coming from people are not just repeating talking points they're coming to these decisions independently and it validates the decisions. And I think when I wrote that article that Flutter is better than React Native in all the ways that don't matter, in a lot of ways it wasn't really about Flutter, it was really more about React Native versus just about everything else. And Flutter actually is closer to React Native than just about everything else. So you get a lot of those business advantages. But yeah that is very validating. So after 18 months you've been working on this and you click that button to go live and you start rolling this out. What were the feelings like Naoya, I want to get inside your head a little bit there on that.
Naoya Makino:
Well it was definitely a stressful timing for my career for sure. But we definitely spent a lot of time prior to that EDDs making sure EDD things buttoned up correctly. We had the a Dock Fooding app for our internal employees over 10 months before the public release. So, we get to know in and out about our app performance on production using a Dock Fooding App. So that was a big one. Other pieces to make sure that we have a good release coming up is that we define what we call the disability.
So, we put together what we define once we pass the mark for example, number of open bugs number of a completion of the feature development and the QA feedback and all of that is defined prior to, we call it okay we can now release. So everybody in the team knows how we get to the release abilities stay. So that's another peace of mind that get us on the same page. Are we confident about that release. So building a confidence in the team is the major exercise that we did and making sure that everybody knows and everybody feels confident about that release is a big one.
Jamon Holmgren:
Yeah. You don't want a major feeling like something's going to go wrong when you hit that button. You want to have that confidence.
Mazen Chami:
I totally agree with you. I think as a developer working on different projects, I think the cycle of getting a feature in to it being released, you knew that once your PR was merged and it was going to go out as a new version and you were going to get that Dock Fooding alert that there's a new version available. You knew that so many eyes and hands had gone through that code even if it was something very simple. I remember when we were close to towards the end when we're starting to release, I believe Android was out the door at that point. I remember even if it was something simple like a typo or whatever, think of whatever the most minor co change you've ever done. It still went through the entire process as if it was something major and you knew with full confidence there was nothing missing, nothing wrong. It built in development and production and test and everyone went through it. There was a lot of regression testing and you knew with confidence you didn't have to worry about anything.
Naoya Makino:
Yeah. Like Mazenn mentioned, we decided to roll out Android App first. This is primarily because we are able to conduct, basically configure the low process more than the App Store. So we started with 1% release and every week we increase up to 50% and once we get to 50%, we post the rollout for about four weeks so that we get to measure the business impact that it might have from the React native app and then making sure that we are not degrading any business metric while adopting a React Native app, which was able to do that on a Playstore. So that gave us another confidence in a business in saying that hey, by adopting a React Native, we are not negatively impacting any business metric. In fact, we are able to see some significant improvement of some of our core business metrics. So that's another assurance in that by adopting the React Native, we are able to improve our business auto metrics.
Jamon Holmgren:
So, we've talked a lot about the benefits of React Native, but we also like to maybe be realistic about it too. What parts of this weren't as good with React native?
Naoya Makino:
Here right now, we are focusing on the performance. Performance is something that we've definitely focus a lot and trying to understand how the React Native on production works and be performant in the app. So that's something that we definitely focusing on these days is to understand and how we can light more end app.
Jamon Holmgren:
Yeah because I think while you can have performer React Native apps, you do have to understand the model of how it works and really be thinking that through from, because there's so many different places that performance bottlenecks can pop up
Robin Heinze:
And everyone is looking forward to the React Native new architecture, which should have a lot of impact on performance improvements. Does the Mercari team have that on their roadmap to transition to the new architecture?
Naoya Makino:
Yeah, we in fact already have working code that is enabling the new architecture. We haven't deployed that to production yet, but definitely something that we actively working on and then looking forward to seeing how that will changes the dynamics of our app.
Mazen Chami:
So what's next for the Mercuri App.
Naoya Makino:
Now, it's about using this newly gained velocity to go after the business side. It's more about now that we have 16 plus engineers writing in the React Native and deploying peoples iOS and Android, which is a massive gain in the velocity, that changes our business. So, definitely looking forward to seeing that in action and see how fast we can move and also being able to get more user feedback and iterate fast and being able to have engineer have more ownership and deliver the impact from their side. Back then it was more about consuming the feature development took majority of our time, so now we are able to spend more time on the engineering the initiatives, performance improvement over the update and whatnot that are something that we want to work on. So I'm excited to see those escalation of the feature deployment as well as the initiatives that are led by the engineer themselves.
Robin Heinze:
I can't wait to see all the new features come. It was really awesome to work with your team on this app, which is really fun. You can learn a lot more about the business decisions be behind this and the evolution. Moving to React Native, if you go read now, he has two articles. I will link to them in the show notes why we decided to rewrite our iOS And Android apps from Scratch and React Native and then our React Native evolution. But one of those is on Medium on the Mercari engineering medium publication and there's another one on the Mercari blog under engineering posts. So, we'll put a link to those in the show notes. If you'd like to nerd out more about React Native, check out my Twitch stream @rn.live. By the way, I'm probably going to be moving more to Mondays instead of Fridays for rn.live. There's just a lot going on Fridays so it works better for me.
You can also join our Slack community community.infinite.red. You can check out our new Twitter community rntwitter.infinite.red. We're actually, it's quite a few React Native developers on that community and they interact quite a bit. So it's been a lot of fun. You can find Robin @robin_heinze on Twitter. You can find Mazen @mazenchami. You can find me @jamonholmgren. You can find Naoya @naoyamacino. Just his first and last name. And you can find React Native Radio @ReactNativeRdio . Thanks so much Naoya for joining us. It was really fun to talk about this project and get some insight into all the decisions behind It.
Naoya Makino:
Yeah, thank you for having me and thanks for working with us and React Native. You guys brought a lot of the expertise and experience in the React Natve, so definitely appreciate how much you guys have worked with us on this.
Jamon Holmgren:
It was definitely our pleasure and a great partnership working on this project. 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, Infinite Red, check us out at infinite.red/react native. And a special thanks to you, the listener, really appreciate it. Go give us a rating on the App store or Google Play or Spotify or whatever you're listening on. That's always really cool when we can get a rating. We don't have as many as we probably should, so it'd be nice to get a few more. I know that there's thousands of you out there listening to these episodes. Robin, do you have a mom joke?
Robin Heinze:
I do.
Jamon Holmgren:
Oh, I was hoping you didn't.
Robin Heinze:
You're going to love it. What do you call a bug that won't die?
Jamon Holmgren:
I don't know what?
Robin Heinze:
A zombie.
Jamon Holmgren:
Okay.
Robin Heinze:
I got a million of them.
Jamon Holmgren:
Okay. See you all next time people. Oh geez.