Real Life React Native returns! Host Mazen Chami sits down with David Leuliette to explore the intricacies of building the Retail Shake Scanner app using React Native. They discuss the app's unique features, the challenges during development, and share insights for developers navigating similar projects.
Real Life React Native returns! Host Mazen Chami sits down with David Leuliette to explore the intricacies of building the Retail Shake Scanner app using React Native. They discuss the app's unique features, the challenges during development, and share insights for developers navigating similar projects.
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.
Episode Links
Connect With Us!
---
Quotes you can share on X!
Todd Werth:
Welcome back to React Native Radio podcast, brought to you by Pierre the Prizewinning pair. Pair with Pierre Anywhere. Episode 2 89, real Life React Native with David Louette.
Mazen Chami:
Hello listeners. I'm Mazen Chami and this is our series on React native radio called Real Life React Native. This is a series where we interview developers who work on real life react native apps. They're quick and rapid fire and fun. Let's get started. Today I'm sitting down with David Ette. David's been working on React Native since 2016. He's an award-winning front-end developer and speaker with over 50 talks. Thanks for coming on today, David.
David Leuliette:
Thanks. I'm happy to be there and talking to you on this awesome podcast.
Mazen Chami:
Thank you. We're happy to have you. Today we're going to talk to David about an app he's been working on called Retail Shake Scanner. What's your elevator pitch for this app, David?
David Leuliette:
I have two elevator pitch. I will start with a marketing one. It's a competitive intelligence application where you can scan products on the shelf and compare them with your competitors because you know it's inflation price are changing every day and that is power and people need to have more power than retailers these days. I like that. That's why you need retail shake for staying competitive and for the developer elevator pitch, it's just a boring scanner barcode application with expo and expo camera.
Mazen Chami:
That's awesome. Tell me a little bit about when you started using React Native and why you made that switch to React Native.
David Leuliette:
Personally, I started in 2016. I moved to London. I need to say thank you Sam Barton for your trust because he hired me to ship a React native application because at the time I had experience with Cordova, so I had experience on how to release an application to the Google Play and Apple Store. And it's not a trivial skill to have this particular project. Oh yes, I have a fun fact to say. I didn't even react at the time. So I choose to learn react the hard way by starting by learning reactive, doing it in
Mazen Chami:
Reverse basically.
David Leuliette:
Yeah, in reverse reverse engineering. And for this particular project, it was started in 2019 by the CEO with Expo 33 and React 16 and it was basically a class with thousands of line. So it was a big mess I would say, but I managed to work on it and I still is still on production now. It's recently I bumped to the expo SDK 50. So it's a good experience overall. That's pretty cool. And why I started to use Reactive because it's JavaScript and just like Jeff an wood said, any applications that can be written in JavaScript will evidently be written in JavaScript. What do you think about this quote?
Mazen Chami:
I like it. It makes sense. But I'd replaced JavaScript with TypeScript, but that's just me.
David Leuliette:
Yes. Good.
Mazen Chami:
Can you tell me a little bit about your architecture stack and how you ended up choosing it?
David Leuliette:
Architecture Stack, it's pretty basic. Started with Expo. I introduced React navigation. I think it was version three or four at the time. Don't really remember. After that obviously I added expo camera because there is a barcode scanner and recently I migrated to expo camera slash Next because the fun fact with the last expo SDK 50, it's using another hood data scanner view controller on devices running iOS 16 plus. So for the barcode detection is better. We have a map, it's using expo location and react native maps. And for the price store feature, I had just hacked the UI from Revolut, the ATM locator because UI is great and I have pro tip for the audience. If you don't have a designer, just go to mobile.com. It's the largest mobile and website web design library. Basically it's the opposite of dribble. Dribble is things that designer wants to do and mobile is actually applications that are on production.
So you can reverse engineering the design if you don't have ideas for, I dunno, profile screen or navigation stack or thing like that. Pretty convenient for the ui, I used Kitten UI because I don't have time to create components and it take forever and I use Shopify Restyle this now to have primitives for the design system like margin spacings, things like that. And it's type three based so you don't make mistakes with restyle. For the data layer, I used Tent Stack Query and I encounter the maintainer at React Submit Amsterdam in 2019. It was this basic small talk that you see 15 minutes and you go back home and you're like, this library is amazing and need to install it now. So thank you Tan, you changed my life. I already told you, but thanks again. And after that pretty basic form. Can you for the forms with the backend is a custom backend in PHPI have couple of Firebase for the database, the storage for the pictures and firebase email for the machine learning because there is a text detection feature like you scan, you take a picture of an invoice and auto automatically we have information about the prices and we can compare the price with other price we have in the database.
And for crash reporting, classic Sentry because it's working like a charm.
Mazen Chami:
Yeah, that's a cool stack. Can you describe some unique challenges you encountered while developing your app using React native?
David Leuliette:
Yes, because I was there Al, I was there a thousand years ago, so I started with Expo, basic Expo and when they changed to EIS, you need to get rid of the expo, CLI and migrate to es. So I needed to migrate to certificates by hand from Expo CLI to EIS. So it's not that it's a complicated task, it just take time and you need to contact the Google support and they give you instruction, but their instructions are for Android, not really reactive. So you follow your instructions and you're like, it doesn't work. But I succeeded to migrate. I use the forum expo forum, I got her some help from the car team and now the forum, they don't use it anymore. They use Discord for this kind of thing. So it was not really a challenge. It is just you don't know what to do.
You try and after that you need to stop three days because the support don't contact you. But still it's doable. I have done it. And the other challenge I encounter is shipping every day because for this client I just work one day per week. I need to design a system that allows me to ship fast. So how I do that, I just add awesome tools. I added Git Z and auto change log, so it allows me to have consistency in my commits and automatically generate change logs and I can copy and paste change log to charge G, PT and charge G PT output me a nice newsletter for marketing purpose. And on top of that I added tools to fix my mistakes. Like link stage, yes, Lin prettier and I use a con lin from William Kion because I don't have time to spend days in figuring out what the best Yes, configuration.
Mazen Chami:
Nice. Yeah. Tell us how do you handle testing in your application?
David Leuliette:
So for testing, I have two things put in place. I use a storybook because it's awesome, it's a small library you can, I encourage people to set up at the beginning because it takes forever to debug visually. So let's say you have an error on the profile only if you are signed in as a certain type of user, it's hard to debug things. So you just extract the logic to a storybook and you write down stories and you have basically all the different scenarios. So for example, for the pricing, I have many different scenarios. So the item is cheaper, the item is more expensive, the price is the same, the location is this, the last time the data was updated was a month ago thing like that. Many different versions and it's allows me to quickly debug and I am more visual guy, so I prefer to use storybook, but I put in place as well reactive testing library. And for this app I have a coverage of 62%, not 100, but it's not too bad, it's more than half. So not for everything but just for parts that needs to be unit tested.
Mazen Chami:
Totally, yeah. Can you share some ways in which you've optimized performance in your application?
David Leuliette:
For this one, not at all because I don't have time for this, but I have many advice that I can share because I read a lot of article, I go to some conference. I think last time I've been to Chain React, I don't know if you heard about it, it's a good conference, you should go there. You should. And I collect articles, so I have a mind map, I have a plan of all the optimization you can do. So when I do audits, because I work as a free and sometimes I do just audits, I know what needs to be done and I have a checklist basically of everything that you need to do. So for this client, no, because I don't really need, but for the clients I put in place some optimization. So one would be if you import libraries, take care of your bundle size, that will be my advice. I have a list of 10 different, maybe more 30 items. But if I will start with one item, maintain your dependencies up to date and be careful with your bundle, with your bundle size. Yeah,
Mazen Chami:
That's very good advice. I like that. Have you had to integrate any native modules or libraries and if so, how was your experience in doing
David Leuliette:
That? For this one, it's the same. No, I didn't add in any native module except the camera, but it's a simple one. But for another client, I need to work with Bluetooth and I added a library called Reactive Blue, PLX, and it's a nightmare to work with when you don't have a cutting edge documentation. The documentation from the library is great, but the documentation for the Bluetooth is just a chaos, like what I'm supposed to do with a manual versioning of A PDF that does not reflect the code naming conversions. So I don't understand why individuals like Gorman, you know, this guy is doing a fantastic library for bottom sheet. He have a know library and the documentation is nice. So when I was preparing this interview, I basically sent him 100 bucks, 150 bucks as a sponsor because I was like, no, this guy is too good. He deserve to have some support from the community. So
Mazen Chami:
Yeah. Yeah, that's awesome. I agree with you all. Gorum has some really good documentation around his stuff and I have worked with React native B-L-E-P-L-X and I feel your pain around that. Most of the time it felt like I was running blind for the most part and I had to pretty much speak to the Bluetooth manufacturer on what commands they were expecting and then retrace the steps to this library and then send it and trial and error.
David Leuliette:
Yeah, I feel like a hacker. Yeah, exactly.
Mazen Chami:
Next up, how have you dealt with cross-platform differences? So iOS versus Android versus web, if you even have it while building out this app.
David Leuliette:
I have many fun facts. I will start with the camera. Do you know what is use camera to API?
Mazen Chami:
That sounds like an Android specific thing to me. I think we spoke to Mark SAVI on the podcast while he was doing React Native Vision camera, and I remember him mentioning that underneath the hood, Android has camera and camera two implementation.
David Leuliette:
Yeah. So I discovered the hard way obviously because everything was working. I was testing with my iOS phone, I was testing with my Android phone and for this app, obviously my client, the CEO has an hundred read, I don't remember which one, but basically the screen was dark, like plain dark. And I was reading the documentation, I was no clue what is it about where is the problem? I don't understand. And one day I realized, whoa, wait a minute, what is this? Use camera to props. But it's 2024 and it's not available anymore with A SDK Expo 50 and expo camera slash next. Now under the hood it's using camera X, so I think it's the third one library. Yes. So yeah, Google is using now camera X and it's an answer to more to the legacy camera to API. But I don't want to manage with these things people from expo and people are doing a really, really good job about it. I just don't have the skills and I send me force because they are doing a really, really good job and handling all of this for us.
Mazen Chami:
Yeah, I love that. What advice would you give to companies considering making the switch to React native?
David Leuliette:
Start with one password please and have a good strong strategy for credentials and create just a simple onboarding playbook. Why do you have horror stories about we forgot how was our iOS developer account and now we can't sign anymore, but you need to deploy the app for today. So I created the NPO checklist, by the way, it's available on internet, you just type app checklist, release reactive checklist, XPO checklist, I will send you in the notes. But basically it's important to have, yes, security, not a security, but like an onboarding playbook on who own what. Because on many companies you can have really bad issues about it if for some reason you forgot what is your password or you lose your access to the account and after that you basically can do anything. So yes, it'll be my number one advice.
Mazen Chami:
Nice. Yeah. Now on the other side of it, what advice would you give to new React native developers?
David Leuliette:
Follow my bootcamp because I do a bootcamp, so it's a open source, you can go on internet to type reactive bootcamp, but it's basically the stack I described. But now the real advice would be ship an app to production no matter what. I mean the truth is when it's on production, because you can, it's really complicated and it's really a skill to have being able, it's not like deploying a website nowadays, it's easy to ship a website to production with many tools we have, but it's still a challenge. And if you don't have the money, you can start with a hundred. It's only $30 flat. So for iOS it's 100 bucks per year and a hundred it's $30 flat. So that will be my number one advice and learn how to be super productive with the GI and all DLS and put in place all the tools I described before, criteria, things like that.
Mazen Chami:
So last question here, would you still choose React native? If you could go back with the knowledge that you have today?
David Leuliette:
Of course, because it's JavaScript and as you mentioned, so learning reactive made me a better React developer and I was forced to learn TypeScript when they migrated to TypeScript years ago at the beginning I was like, oh no, it's coffee script again. I don't want to come on. And I changed my mind. TypeScript is good nowadays. I can't work with TypeScript without TypeScript, so, and I have a Rubian race background, so I know how to use a Gem file debugging Coco pods read Fast Lane Stack Trace. So when I drop in on EAS, I know exactly what's happening. Oh, okay. I have an and if for some reason the have crash, I can use Expo pre build, open the EXCO debugger and figure out what's happening because I used to it so I'm not lost. But yeah, I will start definitely again because I think it's more easy than ever to start React native.
Mazen Chami:
Yeah, that's good advice. So before we wrap up here, our listeners are itching to know, will you be at Chain React this year?
David Leuliette:
Ah, yeah. I don't know. I dunno. I dunno. It's
Mazen Chami:
Depending on, we ask your newborn child. Yeah,
David Leuliette:
Yeah, yeah, yeah, yeah. He's a boss now, so.
Mazen Chami:
Well, hopefully he can. He accepts and we get to see you again this year at Chain React. Thanks again to David Louette for joining us today and continuing our Real Life React native series. If you'd like to be on this new series and talk about your experience using React native in the real world, email us at RN Radio at Infinite Red and introduce yourself and your app. See you all next time.
David Leuliette:
Cheers everyone.
Jed Bartausky:
As always, thanks to our production team with editor Todd Werth, our assistant editor and episode release coordinator. Yours truly, Jed Bartausky, our Director of marketing, Justin Huskey and our guest coordinator, Derek Greenberg. Our producer and host is Jamon Holmgren and executive producers and hosts are Robin Heinze and Mazen Chami. Thanks to our sponsor, Infinite Red. Check us out at Infinite Red slash React native. Special thanks to all of you listening today. Make sure to subscribe to React Native Radio wherever you get your podcasts.