We have two guests on the podcast this week! Max Metral from GasBuddy, and our very own Mark Rickert, who has joined us a few times before. In this episode the crew discusses the exciting adventure of rebuilding the popular GasBuddy app in React Native.
We have two guests on the podcast this week! Max Metral from GasBuddy, and our very own Mark Rickert, who has joined us a few times before. In this episode the crew discusses the exciting adventure of rebuilding the popular GasBuddy app in React Native.
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 toasters. How hard is it to make a toaster that actually works? Yay, toasters. Episode 244, GasBuddy React Native Rewrite.
Jamon Holmgren:
Well, it's nice to see you virtually, Robin and Mazen, I'm getting tired of seeing you in 3D.
Robin Heinze:
Yes, we got to see everyone in real life last week. IRL.
Jamon Holmgren:
Yeah, it was fun. It was how long since I last saw you, Robin?
Robin Heinze:
Almost three years.
Jamon Holmgren:
That's ridiculous.
Robin Heinze:
It is. And it doesn't feel like it either. I mean, we're talking to each other every single day, basically.
Jamon Holmgren:
Right. And yet-
Robin Heinze:
So it doesn't feel like it had been three years, but it had been three years.
Jamon Holmgren:
And you live in Beaverton and I live in Vancouver, we're not that far apart.
Robin Heinze:
Right, we're not that far apart.
Jamon Holmgren:
Yeah.
Robin Heinze:
I mean, it's far for Portland. It's-
Jamon Holmgren:
Right.
Robin Heinze:
We're on very opposite ends of the Metro area.
Mazen Chami:
And we are on opposite sides of the continent.
Robin Heinze:
The continent.
Mazen Chami:
And I saw you 10 months ago, Jamon, but Robin, that was the first time we met having worked on a project.
Robin Heinze:
Yeah. I had a baby, so I didn't get to go to the last retreat, so-
Jamon Holmgren:
That's true.
Robin Heinze:
... I missed out.
Mazen Chami:
Yeah.
Robin Heinze:
But it was really, really great to see everyone. It was a fantastic week. Gant revealed a little bit of the fun stuff we did on Twitter this week.
Jamon Holmgren:
Yeah.
Mazen Chami:
Yeah.
Robin Heinze:
We had an epic... it was like a puzzle... I don't even know what to call it, puzzle hunt?
Jamon Holmgren:
Yeah. Yeah, he put so much work into this and it was basically like we had to solve all these puzzles, work together as a team... So we split the team into two teams and we were just frantically working for three hours, trying to get to the end.
Robin Heinze:
Including an hour long power outage, where we lost internet.
Jamon Holmgren:
Right. We thought your team had something to do with, because it's Todd's team, and he would do something like that. All of a sudden the power goes out in the middle of this competition.
Mazen Chami:
We can skip over the winning team. That's fine. We can go into the next part.
Robin Heinze:
Yes.
Jamon Holmgren:
I'd be okay with talking about it. Anyway-
Robin Heinze:
We don't have to talk about who won.
Mazen Chami:
No.
Jamon Holmgren:
Anyway, it was a fantastic time. We had a lot of fun. I feel like, for a fully remote company, getting together once a year for a week, preferably not three years in between, is fantastic. It's so much fun and everybody comes away from it energized. And then of course we do still do a little bit of work. We kind of did some presentations, Todd did his State of the Union, which he called the State of the Onion this time.
Robin Heinze:
That's going to stick, I think.
Jamon Holmgren:
Yeah, I think it will. And then for me, I did my state of tech and a bunch of other things we talked about. It was a great time, got to see everybody. I think there were 22 there, we were only missing one, Simran. Hi, Simran. But next time she'll be there. But yeah, it was fantastic, I really enjoyed it. So I'm Jamon Holmgren, your host. Friendly CTO of Infinite Red. I'm located not very far from Robin, like just a hop, skip and a jump. Somehow we don't see each other. Live near Portland, Oregon with my wife and four kids on three acres. And I am joined today by my staunch cohosts... Staunch sounds like-
Robin Heinze:
That's one of those that I'm not sure that it sounds like a compliment.
Jamon Holmgren:
It doesn't sound like a compliment, but it is a compliment. I swear. Go look it up.
Mazen Chami:
Once you read the definition, you're like, "Okay."
Jamon Holmgren:
Right.
Robin Heinze:
It's a compliment.
Jamon Holmgren:
Robin and Mazen. And we do, today, actually have two guests. We have a guest host, Mark Rickert and Max Metral, which I will be introducing them in just a second. Robin is a senior software engineer at Infinite Red. She is located west of Portland, Oregon with her husband and two kids and has specialized in React Native for the past five years. Mazen Chami is a cohost as well, he lives in Durham, North Carolina, with his wife and newborn child. He's a former pro soccer player and coach and is a senior React Native engineer, also here at Infinite Red. Mark Rickert, who has been on the program before? Hey, Mark.
Mark Rickert:
Yeah. Hi, Jamon. Good to be back.
Jamon Holmgren:
Yeah, welcome back. Mark lives in Moab, Utah, and is an avid sky diver, base jumper, paraglider, and other extreme sports enthusiast. You're going to Burning Man, aren't you?
Mark Rickert:
Yeah, in a couple weeks, I'll be going to Burning Man. I'm going to be skydiving at Burning Man, so that'll be pretty fun.
Jamon Holmgren:
Ooh.
Mark Rickert:
Yeah.
Jamon Holmgren:
You've been a few times, right?
Mark Rickert:
I have. I've been to Burning Man three times. But this is going to be the first time I've ever been with a partner. So my partner Kristin is going to be joining me in my van.
Jamon Holmgren:
She going to be jumping?
Mark Rickert:
No, she's not a sky diver. But this will also be the first time I've ever been at Burning Man without my home there.
Jamon Holmgren:
Mmm.
Robin Heinze:
Oh.
Mark Rickert:
Because every time I've been to Burning Man, I've been in my van, which I was living in full time. So this year is going to be a lot more planning and packing and determining what we need to bring, instead of just, "I have everything I need to live in my home than I'm just bringing to Burning Man." So yeah, it'll be fun.
Jamon Holmgren:
You are still bringing the van though?
Mark Rickert:
We are bringing the van, yeah.
Robin Heinze:
I look forward to pictures.
Mazen Chami:
Same.
Mark Rickert:
Yeah, there will be a lot.
Robin Heinze:
Hopefully safe for work pictures.
Mark Rickert:
Safe for work pictures, yeah.
Jamon Holmgren:
No, they won't be, but they'll be in Mark's special channel.
Mazen Chami:
So I guess you have to change his lives in Moab, Utah to lives everywhere.
Jamon Holmgren:
I know, right? Yeah. Well, Mark is more settled down these days, it's kind of different.
Robin Heinze:
Ah.
Mark Rickert:
Yeah, I used to live everywhere.
Jamon Holmgren:
Yeah.
Robin Heinze:
Not so much a nomad.
Jamon Holmgren:
Mark is a principal software engineer at Infinite Red as well. And he's actually been working on the GasBuddy project, which is why he's in this call. It's going to be hopefully a really good one. Max Metral, finally getting to our guest here. Really excited to have you on, Max.
Max Metral:
Thank you.
Jamon Holmgren:
Max is a chief technology officer for GasBuddy, lives in Boston. Before that he was a chief engineer at PayPal retail. He has a master's in Media, Art and Sciences from MIT, as well as a CS degree from the same university. And he's also been a client of ours at Infinite Red for, I think, over two years now, is that right, Max?
Max Metral:
That does put rings around the tree that is the GasBuddy/React Native project, but yes.
Jamon Holmgren:
Exactly. We've been doing this for a while together and it's been a lot of fun. Really, really excited to have you on, Max. What did I miss? What do you do for fun? What's not in the bio?
Max Metral:
The professional soccer player bit I'm going to have to follow up on at some point, too, but I do go to the only adult soccer camp in the country in July, in Virginia, every year. I've been for about 16 years now, missed a few for kids' births and things, tore an ACL, that kind of thing. But that's four days of... we computed last time, 50 miles of soccer in four days. So it's a lot of fun.
Robin Heinze:
Wow.
Mazen Chami:
Wow.
Jamon Holmgren:
Oh, wow.
Mazen Chami:
You have to send me the link, I'll probably show up.
Max Metral:
I will do that. The first year I went, we had an 18-year-old who was trying out for Division I and a 75-year-old who had never played soccer before, and everything in between.
Robin Heinze:
Wow.
Mazen Chami:
Wow.
Max Metral:
It's gotten a little more homogenous, but not much.
Jamon Holmgren:
I love that. Yeah, I love talking soccer with Mazen and learning more about the sport. Mazen played overseas, he grew up in Nigeria, he played pro soccer there and played semi-pro in Europe, and coached the highest levels of the women's soccer league here in the US.
Max Metral:
The camp is run by Paul Ellis, who is Jill Ellis's brother, who was the head coach of the US Women's National team. She stopped by a few times. I'm sure we have connections in common as a result.
Robin Heinze:
Wow. You guys run in the same circles.
Jamon Holmgren:
Yeah.
Max Metral:
That's the summary of soccer, run in the same circles.
Jamon Holmgren:
That's fantastic. All right, just really quickly, do want to mention this episode is sponsored by Infinite Red. Infinite Red is a premier React Native design and development agency located fully remotely in the US and we have a few in Canada. If you're looking for React Native expertise for your next React Native project, hit us up. You can learn more on our website, infinite.red/reactnative. And don't forget to mention that you heard about us through the GasBuddy React Native Radio podcast. We should be more specific about that, because I think it'd be kind of interesting.
All let's get into our topic. So over the last two years plus, we have been helping GasBuddy rewrite their app in React Native. And GasBuddy has been around for a while. This is not a new app, this is something that I've seen in the app store since... I don't know, since I can remember. So let's talk about the history of GasBuddy as a product. Max, when did this even hit the app store?
Max Metral:
Well, I wasn't there, but I think it was probably in the app store when there was an app store. And it's one of the reasons why, as a company, it was so successful. GasBuddy existed from 2000 or so, in a time where people would jot down the prices that they drove by and come home to their desktop and type them in.
Jamon Holmgren:
Wow.
Max Metral:
Whenever we're out in of fundraising type situations, or were, we're not out in them anymore, I would say that if you approach a VC with this business model now, they would laugh you out of the building. It was the right place, the right time, and so it had a very strong community. At this point, we get about 2 million price submissions per day from end users.
Jamon Holmgren:
Wow.
Mark Rickert:
That's nuts.
Max Metral:
And I think a big piece of that was being there in mobile at the right time. In 2004, I had a company called Povo, which was Wikipedia meets Yelp. So every block in the city got a Wiki page, you could build your own search engine... It was super cool technologically. But we missed mobile. Even though I love the iPhone, wrote a bunch of code for it before you could really write code for it, but I just didn't see how crucial it would be to all of these local services, and GasBuddy did.
Mazen Chami:
I remember 2013 when I drove from North Carolina to California, that was when I was going out there to coach the pro team, I used GasBuddy and GasBuddy was integral to me getting there, efficiently. Because I remember just using it at night and just mapping out... I had a Dodge Charger, not very good with gas. So I would map out my route, kind of needed it to help me figure out gas and all that kind of stuff. And at that point I was on a tight budget, so it worked out. It was very helpful.
Max Metral:
It's funny. I used to work at PayPal and when I moved to GasBuddy, I thought, "Well, there goes the time of everybody knowing what the company I work at does." And so you go to parties when you work at PayPal and you get a horror story, nine out of 10 times. And I'm like, "I'm sorry, I can't help you." But at GasBuddy, it's usually a pleasant story. "Oh, you saved me in the hurricane," or, "Man, I did a cross country trip and it was great." So it is a-
Mazen Chami:
Yeah.
Robin Heinze:
That's a nice contrast.
Max Metral:
Yeah. At some point we were number one in the app store, happened a couple times over the past two years. PayPal was never number one in the app store.
Jamon Holmgren:
Yeah, right?
Max Metral:
It's very strange.
Jamon Holmgren:
No kidding. I mean, I remember recently on the East Coast... Was it last year?
Mazen Chami:
Last year.
Jamon Holmgren:
On the East Coast, where there was some gas shortages?
Max Metral:
The pipeline.
Mazen Chami:
Yeah.
Mark Rickert:
Yeah, I got caught up in that.
Mazen Chami:
Yeah, the pipeline issue.
Jamon Holmgren:
Oh yeah, the pipeline issue. Mark, you said you got caught up in it. You were living on the East Coast at the time, right?
Mark Rickert:
Yeah, I was living in North Carolina at the time when there was a gas shortage, and GasBuddy has a feature where it'll tell you if a station has gas or not, which is really great when 80% of the stations in your city don't have gas. You can just go straight to the ones that do.
Jamon Holmgren:
Let me ask you Mark, when you're using an app that you built and you look at a feature like that, are you envisioning, behind the scenes, the code that's running? Or are you just trying to do your job?
Mark Rickert:
Oh, absolutely. I look at the GasBuddy app and my brain just sees all the different component hierarchies and-
Robin Heinze:
Oh, yeah.
Mark Rickert:
React use effects and my brain just immediately sees what's happening behind the scenes without me even trying.
Robin Heinze:
Oh, yeah.
Mark Rickert:
So I've been ingrained in this project for awhile.
Jamon Holmgren:
It takes the magic away. Actually, last night I was using an app and it had a little, cool animation and sound effect, which I was kind of enjoying as I was tapping, and it was like, "Oh, this is kind of fun." And then I was like, "Oh, I wonder how they do that?" And I kind of work through that in my brain, and afterward I was like, "Yeah, this isn't as fun anymore."
I teach kids hour of code often, and I start with a Lego exercise, and the whole point of the exercise being there is no magic. That Minecraft you're playing, that game, there is no magic anywhere in the system. Now with AI, I might argue, it's harder to say there's no magic. For the most part, no magic.
Robin Heinze:
Yeah. Yeah.
Jamon Holmgren:
So Max, when did you join GasBuddy and what's been your role there? Have you been CTO the whole time or has that evolved?
Max Metral:
Yeah, so GasBuddy, as I said, was founded in 2000. About 2014, I think, they sold to the largest provider of retail fuel price data, a company called Opus. And that company went through some changes and it was basically a data play, right? They were concerned GasBuddy was a primary source now of retail price data, which was, I would argue, a threat to their product. And so that's primarily the reason why they bought it. They didn't buy it as a consumer property.
So through some other machinations, they spun it out, and hired a new executive team to build the consumer side and focus on the consumer side of GasBuddy. And that's when I joined in 2016 and I was CTO at the time. We hired a number of high-end mobile devs. There was a big team already and they were doing quite well, but we came in to build a payments product. And so I've been doing that since then. We sold the company to a larger company called PDI last April, and so my title has undoubtedly changed, but I haven't even bothered to learn it. But I'm still-
Jamon Holmgren:
Classic.
Max Metral:
Yeah, still primarily working on GasBuddy.
Robin Heinze:
When you actually decided to do the rewrite, what state was the app and what state was the business in when you made that decision? How was the app doing? What was the native team like and what sort of drove you into that decision?
Max Metral:
That's a great question because it was a huge piece of the puzzle for us. I had dabbled in React Native for a while. At PayPal, I built PayPal here, which was the sort of Square competitor, and for a host of reasons, it was crucial for us to share code. And so I had done basically my own version of React Native because React Native wasn't a real thing at the time. And the second time I tried it, in probably 2019, I also didn't feel like it was a real thing yet. It was great, but I didn't think I could actually ship an app with it. So I guess 2020, right before COVID, the October before COVID, we were contemplating selling the business, basically. We had a big team, at one point I think we were over 100 people. We had come down a lot since then, but we're still sort of not sure whether there was a big win available or we needed to batten down the hatches for the end of humanity. Luckily, it was not the end of humanity, but it felt like it at times.
And so what was unique to me about React Native was, in the disaster case, it is significantly more efficient to develop an application once than twice. And in the rosy outcome, which is essentially where we ended up, it is significantly more efficient to build features in React Native. And so I was making the case to the executive team, and boy, the executive team I think was on board from the beginning, but the developers, all of them wanted to believe, but thought, "There's no way we can pull this off. We can't rewrite an entire app." And so we just started. And it went well enough at the beginning. I think what you hear with React Native projects is always, "Oh yeah, I've rebuilt the app in two weeks," and we it's even worse than 80/20, it's more like 8/92 with React Native and with apps in general. And I think we didn't realize quite the size of the footprint, of the feature footprint, in the GasBuddy app at the beginning. But what made us decide is that, all future outcomes would benefit from this decision. If it worked.
Robin Heinze:
Yeah, it's like a huge... you're at the top of a roller coaster, and you're like, "I don't know how this is going to go." It's a huge risk to take on and it can feel really scary, but I hear way more stories of companies being so, so happy that they took the leap, than companies that regret it and went back.
Jamon Holmgren:
And I know that there are a lot of companies that would not do this because it is risky, but having worked with Max for a couple years, I now understand how he operates and it doesn't surprise me at all that he's like, "All right, we're doing this and let's go." Dive in head first. It's great. I agree, I think it was the right decision in hindsight, but it wasn't obvious at the time, for sure. We had those conversations early on, and even though I'm a huge believer in React Native, it was definitely a daunting task.
Max Metral:
Yeah, we tried to write about it from the beginning. I mean, I'm not a copious writer, but I wrote a few before we started, when we were about to start, and as we were starting to ship, articles, and I think even to this day, we're rolled out about 20% on Android and 100% on iOS. Android is just not as... I mean, I have people reporting bugs from Android 6. Sometimes I want to just reply and say, "I'm sorry, can I"-
Robin Heinze:
Why are you still using Android six? Can I get you a new phone? Can I go-
Max Metral:
And yes, I've tried that, too.
Robin Heinze:
I'll buy you a $75 phone.
Max Metral:
Yes. So there's that, but I still don't know that we will succeed. I'm pretty sure we won't fail, but I'm not sure whether we'll succeed. And when I first got here in 2016, we did a visual redesign of the app. It was sort of the old 2004 look. And so it was a big change and people hated it. We knew that it was great, or better, but people hated it. So I knew there was going to be a bit of that with our release here, that no matter what, people would hate it. And what does scare me still is a little bit that sort of Android long tail, and whether there's any way to make the performance acceptable for them. But on the majority, at this point, we don't get bugs about React Native anymore. We got them at the beginning. Now we get bugs about GasBuddy, and I can fix them significantly faster than I could fix them before. And that's been great.
Robin Heinze:
Yeah, that's how you're succeeding, is your bugs are about your product and not your stack.
Mazen Chami:
That said about React Native. Did you guys consider any other platforms? Maybe sticking with native going with something else?
Robin Heinze:
Flutter.
Max Metral:
Yeah, Flutter. I happen..
Mazen Chami:
I didn't want to say that.
Max Metral:
I happen to be a neighbor of Miguel de Icaza, of Xamarin fame, and so we always walk around, chatting about this general concept. And he's not a big fan of JavaScript, although I'm slowly converting him. And I think that everybody considers Flutter because, from a purity perspective, nobody's unhappy. And so we did the same, but not deeply. Because we were coming from, originally, it was a SQL server, .NET, there might even be some Visual Basic around, but we don't talk about it. And we made a big conversion to Node and to Kubernetes and AWS and all that sort of stuff when I got here.
So we already had significant React experience in house, so that was a huge piece of the win, is that now my web team and even the backend JavaScript teams could come in and do features in React Native if they wanted to. Other than me, I'm not sure that's totally panned out yet, but I'm still confident it helps. We aren't sharing a lot of code between web and mobile at the moment.
So for us, the realistic options were staying with the existing code base, which had been around for 12 years. We had a decent amount of turnover in COVID like most people, so there was a little less speaking for that. We were never going to rewrite it in native, because I don't think you could deliver any benefits. So it was either React Native, Flutter, or I don't know, mobile web, which is not really an option.
Mazen Chami:
Yeah, that's a good point. And we've mentioned a bunch of times on this podcast, Robin and I were part of a team that did a rebuild this year, and after checking with the lawyers, we can probably say that it's Mercari. And they did have an internal discussion about staying native versus rebuilding and redoing the architecture. And now we know they decided to go with React Native and seems to be going well. I'm no longer on that project, and I know Robin can speak a little bit more to that, but I kind of wanted to ask you, based on all that research and going through Flutter and Xamarin and all that and sticking with Native, did you see... and I guess this might be a leading question, but did you see this as a risk for the company as a whole, jumping both feet into React Native?
Max Metral:
Without a doubt. I mean, nobody gets fired for pick IBM, but lots of people might get fired for picking React Native. We did it right around the time that Airbnb had written the article, basically saying, "We're out of here."
Mazen Chami:
Oh, yeah.
Robin Heinze:
Ugh.
Jamon Holmgren:
Yeah.
Mazen Chami:
Yeah.
Robin Heinze:
It was a dark time. We've come a long way since that. And we've kind of put it... the React Native community, I feel like has put it behind us and have had so many more wins since then.
Jamon Holmgren:
I know Max has more to say there, but I want to interject that I've heard at least third-and, second-hand, that the person who wrote that article regrets it, that he didn't mean for it to land the way it did. And actually, he's written follow-up articles saying React Native's not that bad. That's kind of my impression at least, that's what someone told me. I need to actually back this up. But it did a lot more damage to React Native than I think was intended.
Max Metral:
And in fact, I read that article as an endorsement for what we wanted to use React Native for. We are not Angry Birds, this is GasBuddy, it's a information display app with a bunch of different ways to navigate amongst a fairly connected data set. It's made for React Native. And I think that has mostly panned out. The dev tool stuff in 2019, I felt like was frustrating. The releases were coming fast and furious, and when you needed to upgrade, God help you.
Robin Heinze:
Yeah.
Max Metral:
That's gotten a lot better over time.
Robin Heinze:
Yeah, it really has.
Max Metral:
The bigger risk there was the business overall, right? So I came here because I saw something about the way that people interacted with fuel, especially around payments, which was strange. I think people value a dollar's worth of free gas higher than a dollar's worth of hard cash. And so that was what was compelling about the business. But it's not, my opinion, not a glamorous business. And so of course I'm taking risk, what would I be here for otherwise? And that was a little bit of my premise going in. But also with the sort of financial situation being so uncertain, and as I said, the sweet spots of this decision are on both extremes of the financial outcomes for us, efficiency versus cost savings. It seemed like the right time to take the risk.
What was a little bit difficult, and the reason the project took two years is... I don't know, Mark, if you agree, I'm not even sure if you had joined the project by this point. But last year, when we were getting acquired, a little bit before we were getting acquired, it was in a state that I think would've been reasonable to launch. It wasn't complete, it was buggy as heck, but I've seen launches before it. But in the process, anybody who's been through an acquisition can tell you it's an often three to six month process, it was pretty long for us, too, the risk was way too high to release the app. It's sort of like the classic VC problem of selling the dream versus selling the reality. We were at the point, internally and externally, we were selling the dream of React Native faster feature delivery, smaller teams, all that sort of stuff. So if I deliver it and the bug counts were off the charts, or if we'd gotten the feedback we got when we did finally release it, which surely would've happened, it was just all downside. So we delayed, I think, probably six months, nine months. Cost us the acquisition process to delay the release of React Native.
Mazen Chami:
Think what you said, with the risks and then of bringing in that Airbnb article, sometimes React Native is not for everybody, but for you and your company... and I'm sure a lot of companies out there, React Native was a good fit and seem to be thriving with it now. Which is awesome.
Max Metral:
The thing that is most exciting, and I think that we'll slowly win over end users to the decision, even if they don't care about the technical underpinnings, is our ability to deliver features. We have a lot of things that are full-stack issues, and when you had to multiply by two for Android and iOS, and on top of that, the same developer has no chance, it means that feature takes 10 times as long. So one, every intern, every employee who joins GasBuddy, at some point says, "You know what we should do? We should let you take a picture of the gas station sign and report prices." And everyone falls on that sword, briefly. But we're going to really do it now. And Mark actually has been doing some work on the frame processor approach in React Native, which allows you to bring native to bear for the actual text recognition and stuff, but use React Native to deliver all those great features. When they start seeing those things happen, I think that we'll get an appreciation of why we did what we did.
Mazen Chami:
Totally.
Robin Heinze:
Nice. So we've already talked a lot about the efficiency gains that you get from React Native, not having to write the same things twice and being able to iterate really quickly. I want to talk about other specific wins from this conversion. And I think performance is probably one that we want to touch on. And I know, Mark, you probably have a lot to say about this, so I want to hear about what sort of performance wins you've seen with the React Native app since you converted?
Mark Rickert:
Yeah. So I was brought onto the GasBuddy team a little later into the rewrite, where a lot of people had been touching the code base for a very long time. And I was brought in specifically to work on performance things. And so the very first thing I did was I just started using the app. I built the app, I'm running it in my simulator, and I just used it. And I turned on the performance graph and made sure that I was looking for stutters, frame drops, slowness, main thread locks. And that's where I started to just start getting usability issues taken care of, where a screen takes too long to load... Once I determined those usability issues, I just figure out which component I needed to target. Sometimes it was easy to find the things in the code base, but other times I had to use a tool called Why Did You Render in order to find this stuff.
And Why Did You Render a really great dev tool that I integrated pretty soon after I started on the project so that I can just turn it on and it just starts telling me all the things that are rendering too many times. So I can go and actually target those things specifically. And so I first started on like, what's a user going to notice in this app? I don't care if I gain 100 milliseconds here or there if the user's not going to notice it. But if it's a noticeable usability issue, those were the things I tackled first.
Robin Heinze:
And these are specifically performance gains against the initial React Native implementation, correct?
Mark Rickert:
Yeah, exactly.
Max Metral:
The question about performance gains over the original GasBuddy app is a fascinating one. And it's a little bit of... I forget what they call those things when it looks like... it's a mirage, I guess. When you start the project, everything is blazing fast, the download is four megabytes, it looks awesome. I went the other day to look at it, it was 100 megabytes. It turns out it's mostly native code that's making the app so big. So we're going to figure out what we can do about that, and not our native code by the way, CocoaPods and all that other stuff. But from a performance perspective to me, on my iPhone... I don't know what I have 12 or something, 11, it feels blazing compared to the old app. Startup time is way slower. But what I do hear, especially people on older devices, struggling with some of the performance stuff. And I think that there's a lot of headroom left for us on improving performance, not to mention we're on React Native 0.67, or 0.67 instead of 0.69 because it's insane to do an app like ours on the bleeding edge of React Native
Robin Heinze:
0.67 is pretty bleeding edge for an app that big.
Max Metral:
Yeah. And we try to be very aggressive about updating dependencies. Mark can attest...
Mark Rickert:
Yeah. Sometimes it breaks things.
Max Metral:
Yeah. And I don't know exactly how we will manage that over time because 0.69, for example, is a huge, huge change, and I don't know if the dependency's really going to support it, I'm not entirely sure. I think we'll take the risk soon and try it, but I'm sure it's going to fail a few times.
Mark Rickert:
I've tried and failed to upgrade the GasBuddy project to React Native 0.69 twice now, I think.
Max Metral:
Yeah, so I think that performance-wise, we have a long way to go, but I still think we're probably better in most cases than the old app. And the latest Airbnb equivalent is this notion tweet storm, right? About they said their app wasn't React Native and it was actually just web views or something like that. And for me, the summary is the difference between good code and bad code is significantly bigger than the difference between React Native and Flutter and then native and all that sort of stuff. You can write bad code in any language. And with products these days that are typically server heavy products, that dynamic is 10 times more important than the paint speed on everything but long lists and stuff that traditionally give React Native trouble, and give native trouble, too, by the way, because lists are really hard.
Robin Heinze:
Have you started using FlashList? I know, Mark, you were looking into it.
Max Metral:
Mark has.
Mark Rickert:
Yeah, I've got a draft PR up there with the new Shopify FlashList integrated into one of the lists, and I'm still working on doing some testing to make sure that it is going to be faster. Because a lot of times with performance tuning, you can change something that you think is going to make it faster, but it actually makes it slower. So using things like the Profiler, Flipper performance tools, and stuff like that, the flame graph we talked about in episode 231, you can do the same action over again in your app, just to make sure that your optimizations are actually optimizing it and not making it slower. Because there are some instances when just a bare function is going to be faster than using a memo or a use effect, or excuse me, a use callback.
Mazen Chami:
Robin and I asked Mark, because he was in the middle of this GasBuddy performance improvements to kind help us on the Mercari project with performance, and Mark showed us the flame graph and all that kind of stuff. And people talk about adding use callback and use memos to help, but sometimes it would actually slow things down. That's not all for performance at the end of the day. So using the flame graph to kind help us dig in deeper to what it is that was causing the issue was awesome. And that sounds like it helped a lot with startup time, which seems to be the case with a lot of Android apps switching over to React Native, for sure.
Mark Rickert:
Yeah, definitely. We actually have a two part series on performance techniques for React Native, starring none other than me. You can actually go listen to those episodes in it's React Native Radio episodes 217 and 218, where we talk more about performance.
Robin Heinze:
He's our performance-
Mark Rickert:
Guru.
Robin Heinze:
... go-to. He's our guru, yeah.
Max Metral:
What a coincidence. Ours, too.
Jamon Holmgren:
Would you say, Max, this is kind of a weird question, but what do you miss about working on native versus React Native? Is there anything that you're like, "Okay, I preferred this in the native code base"?
Max Metral:
I really enjoy features that people use and ways to think about the problem space differently than before. So for example, I'll tease a feature I've wanted to build for years and I think we're going to finally, which is, I want to be able to message somebody by their license plate number. I live in a city and the car's about to get towed, the city's not going to message him. I'd like to just be able to type it in and say, "Hey, by the way, your car's about to get towed." This is a feature that, in my opinion, I've had it for many years, long before I came to GasBuddy. GasBuddy's the only company that has a shot. Not saying it's going to work, but it's the only company that has a shot.
Robin Heinze:
You have the ways to connect people.
Max Metral:
Yeah. Speaking of ways, Waze would also have a shot. So I don't mean to imply...
Jamon Holmgren:
Wait a minute here though, would this be a way to-
Robin Heinze:
So you're the ones.
Jamon Holmgren:
... bring road rage to digital or is that not a problem?
Max Metral:
Oh, I thought you were going dating service, which yes, certainly...
Jamon Holmgren:
Well, that too.
Robin Heinze:
I mean, that too, really. That too.
Mazen Chami:
"Hey, license plate 1,2,3 in my city, hit me up."
Max Metral:
I haven't quite figured out the dynamic of-
Robin Heinze:
Missed connections.
Max Metral:
Missed connections. Or preventing someone from taking your license plate, I haven't figured that out yet. Anyway, my point being, I don't miss Swift UI, or whatever, because that's not what interests me. What interests me is those feature deployments and those network dynamics, which a company like GasBuddy finds itself at the center of in a particular, somewhat boring, domain. And I can do those from top to bottom now. I can write the UI, I can write the backend services, I can write the database layer, in one day. And not because of the time of the task, what I'm saying, in any given day, I can span that whole spectrum and make changes significantly faster than I would've if I have to add another mobile platform. And I can already see that the way we think about projects we take on, has changed, because people don't have to calibrate for the coordination of two mobile teams, with two rollout schedules, and two response speeds between the app store in Android and Google Play. So I think I don't miss a dang thing about native.
Robin Heinze:
So yeah, you're saying you don't miss anything?
Max Metral:
No.
Robin Heinze:
That's good.
Jamon Holmgren:
Yeah, that's good to hear.
Robin Heinze:
That's what you want.
Jamon Holmgren:
Let's talk about it like this, speed of iteration, some of it has to do with the choices that I guess we made together in the architecture phase and tech stack and stuff. So really rapid fire, quick questions, what are you using for navigation?
Max Metral:
React Navigation.
Jamon Holmgren:
React Navigation, that's a pretty standard. State management?
Max Metral:
MST. MobX-State-Tree.
Jamon Holmgren:
MobX-State-Tree. I had nothing to do with that.
Max Metral:
Yeah, no, that was a huge one.
Robin Heinze:
I'm sure, yeah, Infinite Red did not influence him at all.
Mazen Chami:
Jamon was not consulting you on that one.
Max Metral:
Yeah. Although, what most people may think is that he consulted us away from Redux or something. It was the opposite. I wanted to use Unstated, which is the most bare bones state management, because I despise... And boy, PayPal was full of this in mostly Java world. I despise four layers and four files to change one thing. I just don't have time.
Robin Heinze:
Thank you.
Jamon Holmgren:
Thank you.
Max Metral:
Yeah.
Robin Heinze:
Thank you.
Max Metral:
And so MST-
Jamon Holmgren:
I'm sorry, Redux team, but...
Max Metral:
Yeah, I was skeptical that MST was going to give me one and a half instead of four, but it's not, it's actually been quite nice. I think one of the challenges we may be having performance-wise at this point, may be the amount of stuff we have in state. So in fact, the other day I did something with Pure React Context, I think Mark must not have seen it because he let it slip by.
Mark Rickert:
No, I was at the company retreat, so I didn't look at the full request.
Max Metral:
That's right. But I do like this idea of, "Hey, there are some things that need to be app-wide state and everything needs to be reactive and there's some things that are at the node of a tree. Don't put those up there."
Jamon Holmgren:
I've been playing a little bit more with just MobX as well, and I think there's a place for that as well. They can work seamlessly together. Anyway, that's a whole different episode that we can nerd out about.
Jamon Holmgren:
You all used TypeScript, pretty strictly throughout the project.
Max Metral:
We did. We didn't use it on the server renovation when we did the node change. And we had tried Flow for a while because I thought there's no way Microsoft is going to win a JavaScript war. Facebook's going to own that thing. And Flow was not good. And TypeScript, I think I've been impressed by two languages in my life, C#, which is a thing of beauty and the generics in C# were one of the best things ever done in computer science in my opinion, and TypeScript. The fact that there's this runtime layer in the typing system, is cooler than people give it credit for, I think.
Jamon Holmgren:
And I don't think that's a mistake. I think there's some influence by the same teams on both.
Robin Heinze:
I mean, you're talking about Microsoft and C#, it's not a coincidence.
Mazen Chami:
Is TypeScript strict mode? Like, strict true?
Max Metral:
That's a good question. I think it is. Yeah, when we-
Jamon Holmgren:
Yeah, it's pretty strict.
Max Metral:
It's strict.
Jamon Holmgren:
More strict than I tend to like, but I think with what you're doing on GasBuddy, it makes sense. Because there's a lot of people touching a lot of different pieces of it.
Robin Heinze:
Yeah.
Mark Rickert:
For sure. We've got really strict linting rules in effect. And if-
Robin Heinze:
Yeah, the bigger the team and the bigger the code base, the more important it gets to have strict mode.
Mark Rickert:
Yeah, just to make sure everyone's on the same page writing similar code.
Max Metral:
That's a thing you can't underestimate. Sorry. That we had eight or 10 mobile native developers coming and learning JavaScript for the first time-
Jamon Holmgren:
Right.
Max Metral:
... React for the first time, Visual Studio code for the first time, TypeScript for the first time. So it really saved us from many a bug.
Jamon Holmgren:
What about releases? So obviously, you can push to the app store, but we've also implemented CodePush. Has that been useful or has it just added more complexity to the project?
Max Metral:
I think it's been marginally useful so far, but I'm confident it is useful in general. And marginally useful now because things are changing so fast on the native side that I don't really get a chance to use CodePush as much as we will. But there have been times when we make some silly bug that I can fix with just JavaScript and we'll push it out. I think the overall release flow process has complicated our use of CodePush a bit. And one of the things I've noticed, is our bundle is fairly big now, I think it might be like 15 megs or something, and that initial code push to a native release includes the entire bundle. Future code pushes will include a diff and that's great. So we've backed off a little bit from using CodePush, because I still want that first run experience for the new install to be the best. So we submit a lot.
Robin Heinze:
So in the past six months, I guess, obviously stuff's been happening in the world, and gas prices have gone through the roof. How has that political inflationary climate affected you guys and how have you handled it? And what's that been like?
Max Metral:
It's been difficult, you somewhat argue terrible timing to release a brand new version of your app, but trial by fire, I suppose.
Robin Heinze:
Terrible or really good? I don't know.
Max Metral:
Well, the really good part being that it was a lot of new users, so they didn't have expectations or familiarities or whatever. So that, I think, all in all was a validation of our overall strategy. It was our second run at being number one in the app store, pipeline crisis was the first and then this was the second. The difference was it was sustained. And obviously, also, many times that we're number one, the world is suffering, so it's a strange thing for cheering, "We're number one." But our sustained average load is about a 10th of our peak load. It is very difficult to deal with that kind of spike ratio on the back end and also on the front end. We use the system or tool called Shakebugs, that allow people to report bugs much more easily than they had in the past, which is a double-edged sword.
Robin Heinze:
So that's like, you shake it to report a bug?
Max Metral:
Yes. In fact, we did that at PayPal on PayPal here, whatever it was, 10 years ago, and PayPal's a big company, they asked me to file a patent on it. So PayPal owns a patent in my name on shaking to get help in an app, so look out everybody.
Jamon Holmgren:
No way.
Robin Heinze:
No way.
Mazen Chami:
Whoa.
Jamon Holmgren:
Are you serious?
Mazen Chami:
That's really cool.
Mark Rickert:
Wow.
Jamon Holmgren:
That's awesome.
Max Metral:
PayPal is very good... in my opinion, good citizen of using patents defensively, so I don't think people should be scared, but yeah, silly patent. So anyway, we use that and it makes... basically, that goes into a Slack channel. So there is zero distance between 10, 15 million users at the peak of that crisis per day and the developers.
Jamon Holmgren:
I got to ask, what are some funny bug reports you've gotten?
Max Metral:
Oh my goodness, we've got some good ones. Yeah, Mark's got his hand-
Robin Heinze:
Sounds like Mark's got one.
Mark Rickert:
Well, I just want to say that it's really interesting as a developer to have direct feedback from users. Sometimes they tell us way more than what we need to do. And sometimes they're weird, sometimes they're threatening, it's really interesting what people type into that submission form.
Max Metral:
And we have some bugs that are really hard to find. We had one where Android was popping up location requests over and over again and we couldn't reproduce it. The language people referenced it, and the bug reports didn't exist in our app anywhere. And somebody made a two paragraph explanation, which gave us enough clues to figure it out in an hour. So it has been great overall, but-
Jamon Holmgren:
That's amazing.
Robin Heinze:
I really want to know what the answer was.
Max Metral:
The answer was that, when you... Android location permissions don't return denied, they return blocked. There's a nuance there. And so whenever you ask for location, even if the phone has location disabled, the OS will pop up and say, "Hey, would you like to turn on GPS for this app? Yes or no." And if, in our particular case, because of the way that whole dynamic worked, we would request location even though the phone couldn't support it and we would keep doing it. So it'd keep popping up, "Do you want to do this? Do you want to do..." There was no way for anyone to stop it.
Robin Heinze:
And it was a system dialogue, so you didn't have the X anywhere.
Max Metral:
Right. Oh, and the reason the loop was happening, is because when that system dialogue came up, it was considered putting our app in the background. And when our app came back in the foreground, guess what we did?
Jamon Holmgren:
It would try it again.
Robin Heinze:
Ask for location again.
Max Metral:
Yeah.
Robin Heinze:
Oh, that's awesome. That's our weird bug for the day.
Jamon Holmgren:
That was the weird bug for the day.
Mark Rickert:
Yeah, right.
Max Metral:
But I think the one that... to answer your question is, we have a feature in our payment product that allows you to offset the CO2 produced by your fuel purchase at our cost, basically, it's an opt-in feature, you don't have to have it. And somebody did a Shakebugs report with all sorts of not-safe-for-work language about how we were basically just part of the corporate stooges and this is all a sham-
Robin Heinze:
Oh, man.
Max Metral:
... and all sort of stuff. And I replied, you can reply in Shakebugs, and I was like, "That's why it's an opt-in feature, you don't have to use it if you don't want to." Don't feed the trolls.
Jamon Holmgren:
Yes.
Mark Rickert:
Yeah, accusing us of being part of the Illuminati and stuff like that.
Robin Heinze:
Oh my gosh.
Jamon Holmgren:
Oh, man.
Mazen Chami:
I didn't know you could reply in Shakebugs. For me, that elevates the feature and makes it really cool to have that quick feedback loop.
Robin Heinze:
It's customer service in addition to...
Mazen Chami:
Yes, yeah.
Jamon Holmgren:
Not to be a whole ad for Shakebugs, but I've been really impressed. And one of the big things there is it takes a screenshot when the shake the thing. So you can see a screenshot, and I know that's been super helpful.
Max Metral:
The screenshot's been useful. By the way, it was not useful for that crazy bug we talked about because it was a system dialogue, it wasn't in the screenshot.
Jamon Holmgren:
Right, right, yeah.
Robin Heinze:
Oh, wow.
Mazen Chami:
Oh, yeah. Yeah.
Max Metral:
But it's also incredibly useful because it gives you your logs. The last thousand log events that you fired, it keeps them and sends them up. So it has been great. We are going to do more work to integrate those replies, because what we do find is nobody goes to look at their bug, they need a notification. But it is this question of, is it Zendesk or is it a bug reporting tool? It's a little bit of both.
Jamon Holmgren:
By the way, you've not used it a lot on this project, for reasons that... it's just the complexity of the setup in the monorepo and stuff. But we have Reactotron, which is a really cool tool for debugging state and things like that. We've thought about making it so that you can take a snapshot of state and send it over with a bug, and actually just restore their state to your local device to look at where they were. There's some downsides to that. You obviously have to scrub it of any key information and then deal with that and things like that, like secret information. But I think that'd be a really cool service, honestly. Probably something we should monetize at some point if we were to build it. But I think that'd be an interesting one just to try to get it into the same state.
Max Metral:
We've tried a few versions of that even with just authentication and just so I can sort of be them for a second, and I always get scared off by exactly what you said. I don't want to be taking PII or whatever, bad stuff.
Jamon Holmgren:
Exactly. And then it's also hard because you don't have the state of the phone. You don't have the state of what is their permissions and whatnot.
Mark Rickert:
Yeah, and their battery level and all kinds of stuff, memory usage.
Mazen Chami:
So kind of closing the loop on this discussion, what's next for GasBuddy? What can you talk about coming up soon?
Max Metral:
Well, I talked about my GasBuddy becomes Facebook license plate idea already, but that...
Robin Heinze:
Missed connections, road rage live.
Mazen Chami:
GasBuddy Tinder.
Max Metral:
Yeah. But forgetting that, I think really, for us, it's about performance, I do think. And maybe we're chasing our tails and maybe it's good enough, but I don't get that sense from the bug reports now. I think we have work to do there. And a big piece of that may very well be the new architecture and fabric or whatever they're calling it.
Robin Heinze:
Yeah. I think it's going to make a big difference when that comes to be more mainstream.
Max Metral:
So there's that and then I think it now, thankfully, all of our new features are really about the business. The price reporting thing I talked about with the signs is one part cool, but the other part is... it's a different world than it was in 2004, the willingness of people to walk... drive around, not walk around, recording prices like they did before is lower. And so we're losing some price coverage. We need to do work to encourage more people to participate, not by reading prices, but by contributing them. And I think a big part of that is going to be in the app, and we have a payments product now, so in theory, we might be able to start to compensate people in some way, although-
Jamon Holmgren:
Incentivize it? Yeah.
Max Metral:
Incentivize it. So a lot of stuff around of going back to the roots of GasBuddy, what are we here for? It really is this crowdsourced gas price and outage information tracker. We got to make that rock solid.
Mazen Chami:
Awesome. Cool.
Jamon Holmgren:
It's been fantastic chatting with you about this, Max, we're unfortunately out of time here, and I know Mark's got a lot more to say on some of the performance stuff that he did. We'll probably have to come back and do a follow-up episode on some of that stuff. But really appreciate it, it's been fantastic working with you as well. And yeah, definitely looking forward to that. I'm actually really interested to see how the transition to React Native 0.69 goes, as well as any new architecture changes that we can make to maybe improve performance in the future.
For the audience, if you'd like to nerd out more about React Native, check out my Twitch stream, which I haven't been doing as much lately, but I am trying to do on Fridays at rn.live. You can also go to youtube.infinite.red and I livestream there as well. You can join our Slack community, community.infinite.red. We have almost... we have over, I need to change my copy here, we have over 2,000 React Native developers in there and there is a new Twitter community, rntwitter.infinite.red. You can find us on Twitter. Robin is @robin_heinze; I am @jamonholmgren; Mazen is @mazenchami; Mark is @markrickert, on Instagram and YouTube, he's not on Twitter. Max, where can people find you?
Max Metral:
Oh, I'm on Twitter @djMaxM but generally not much on social things.
Jamon Holmgren:
Not on there often, yeah. He's too busy working. You can find React Native Radio @ReactNativeRDIO. Thanks so much Max and Mark for joining us as guests. 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/ReactNative. Make sure you subscribe on your favorite podcasting platform. We are React Native Radio, we will see y'all next time.
Robin Heinze:
Bye.