Regardless if you're a junior developer, or a seasoned code wizard, you're going to love this episode! Today, the hosts walk through React Native Firebase and it's amazing capabilities.
Regardless if you're a junior developer, or a seasoned code wizard, you're going to love this episode! Today, the hosts walk through React Native Firebase and it's amazing capabilities.
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.
Connect With Us!
Todd Werth:
Welcome back to React Native Radio Podcast. Brought to you by Infinite Nannies, having trouble debugging your kids, try our dependency injection services. Episode 250, React need of Firebase. TLDR.
Jamon Holmgren:
When I stumbled into the Zoom room this morning, did I hear you right? Mazen? Were you saying that you've been looking for a nanny and some of them that their prices are just outrageous? Did you say $40 an hour?
Mazen Chami:
Yeah. Now that was for nanny share. So it was two kids. But yeah, I mean you have even have some people charging up to like $25, maybe 30 and lower for one kid. Right.
Robin Heinze:
Should I change careers?
Jamon Holmgren:
I know, right? This episode brought to you by Infinite Nannies.
Mazen Chami:
We have a big network, right? Of developers that could be repurposed.
Jamon Holmgren:
They could be repurposed, especially if things kind of go south in the software industry. Maybe co-pilot eats the software world and there you go. We're all out of a job.
Mazen Chami:
I mean, are agencies in the area that will, You'll interview with them and they'll find you a nanny, but then they charge, I haven't looked into this. So this is word of mouth. It's like five grand for them to place you with a nanny. So there we go. There's another income stream placing you.
Jamon Holmgren:
Wow.
Mazen Chami:
With one of our nannies.
Jamon Holmgren:
I remember my si. I didn't really do much babysitting except for my siblings, but my sisters used to make peanuts when they would babysit. It was horrible how little they made. I guess that's different than a nanny, but it babysitting was not a very profitable thing back in the day.
Robin Heinze:
Just wonder what the going rate is for neighborhood babysitters now.
Jamon Holmgren:
Yeah, yeah. I'm just out of the loop.
Robin Heinze:
Inflation. Inflation applies across the board.
Mazen Chami:
And I'm very close to several hospitals and you have a lot of universities here too at the same time. So the demand is high because there's.
Robin Heinze:
Lot of doctors.
Mazen Chami:
Families where both spouses are doctors and doctors and nurses, whatever their combo is and they have crazy hours. So they're definitely looking for full-time nannies. So these kids, I would say, because some of them are still in college, are taking advantage of the situation and just charging literally an arm and a leg.
Robin Heinze:
Everyone moved to move to Durham, North Carolina, become a nanny.
Jamon Holmgren:
Wow. I looked at, I was of course the way my mind works, I was like, where does the word nanny come from anyway? Apparently Greek nana means aunt. It means aunt.
Robin Heinze:
Okay.
Jamon Holmgren:
Means that makes sense.
Mazen Chami:
Auntie.
Jamon Holmgren:
Yeah. Yeah. I mean that's
Mazen Chami:
Probably what it was. The aunties took care and yeah, Nanny, none any and here we are today.
Jamon Holmgren:
Right, right. Well luckily my kids are getting old enough. My youngest is nine now. She turned nine last month.
Robin Heinze:
So it's not your kids keeping you up until 3:00 AM
Jamon Holmgren:
No, I did stay up until 3:00 AM but it was not my kids. I don't want to talk about it. Yeah, I don't know. I'm going to be running at about 30%, which I already know.
Robin Heinze:
The coffee. The coffee bumped it up from 30 to 40 already.
Jamon Holmgren:
So it did. Yeah, they can tell I was so confused coming in to this conversation originally, but I'm a professional and I will power through and everybody will be very impressed. I think maybe, I don't know. I'm Jamon Holmgren, your host, unprofessional host and friendly CTO of Infinite Red. I am located in the Pacific Northwest, the beautiful Pacific Northwest, the very dry Pacific Northwest right now, which is unusual. We're either bone dry or underwater all the time, but that's where we are. I am joined today by my radiant co-hosts, Robin and Mazen. And I know we say this every time, but how did we not find Radiant yet?
Robin Heinze:
I swear we've used Radiant. I feel like someone tampered with a show notes because I swear we've used it before but I searched for it and it wasn't there so.
Jamon Holmgren:
It's not there.
Robin Heinze:
Here we are.
Mazen Chami:
Is it because of my crazy back light that you thought about it?
Jamon Holmgren:
Holy cow.
Mazen Chami:
Oh yeah. Mazen got an Evangelic halo behind him.
Jamon Holmgren:
Mazen is about to be beamed up to Heaven. He is. There's a bright light behind him. Speaking of Mazen, he lives in Durham, North Carolina with his wife and baby boy. He's a former pro soccer player and coaching is a senior React Native engineer. Soon to be nanny. Also here at Infinite Red. Robin Hines. Co-host as well, senior software engineer at Infinite Red, located also near Portland, Oregon in the Pacific Northwest or with her husband in two kids and has specialized in React Native for the past five years. So yeah, nice to be back. We've been kind of, I don't know if the audience has noticed, but we haven't really been recording a lot of episodes. We had a few in the can so they were sort of...
Robin Heinze:
Been a slow summer. Our editors actually caught up with us how little we've been recording.
Jamon Holmgren:
Why do you sound so surprised?
Robin Heinze:
Usually there's quite a backlog. Yeah, because it takes us what an hour to record them and it takes them several days to edit because...
Jamon Holmgren:
Don't give them excuses.
Robin Heinze:
Because we make it very difficult for them to edit episodes.
Jamon Holmgren:
Wow.
Robin Heinze:
We give them a lot to do for sure. And they are excellent. They do an awesome job. They spend a lot of time making sure it sounds really awesome. So...
Jamon Holmgren:
Okay. They're definitely going to make Robin sound really good in this episode and they're going to edit me in very awkward places.
Mazen Chami:
They do a really good job.
Jamon Holmgren:
This episode is sponsored by Infinite Red. Infinite Red is a premier React Native Design and development agency located fully remote, fully remote in the US and Canada. If you're looking for React Native Expertise, hit us up. You can learn more on our website, infinite.red/react Native. And don't forget to mention that you heard about us through the React Native Radio podcast. Yeah. All right, let's get into our topic for today. Our topic is React Native Firebased TLDR.
Robin Heinze:
Too long, didn't read.
Jamon Holmgren:
Maybe TLDL? Too long didn't listen. I don't know too long.
Robin Heinze:
I specifically the doc I was referring to the documentation for Firebase, which is lengthy because it does a lot of stuff.
Jamon Holmgren:
It does a lot.
Robin Heinze:
If in case you haven't looked into everything, the long list of things that reacting to Firebase can do. This is the episode for you.
Jamon Holmgren:
Yeah, and we're talking about the, it's the1@rnFirebase.io. It's the like a third party library. It's not an official SDK but it uses the official SDK but a little caveat first. So a lot of times we kind of try to vary it up and there's more advanced topics and there's more beginner topics and there's a lot of intermediate topics. I think we tend to lean more toward the advanced topics just because of where we are in our React Native journey. But this one's probably more of a beginner focused one. This is more of an intro. I think if we were to do a deep dive into React Native Firebase, we'd probably have someone from their team on to talk about that. So I just want to set expectations a little bit. This is going to be a little bit more review if you've used it before, but
Robin Heinze:
I don't want to hear you complaining on Twitter.
Jamon Holmgren:
Yes. We told you, we warned you. We warned you.
Mazen Chami:
Robin told me she would kick you out of the React Native community group.
Robin Heinze:
I have that power. She is an athlete. I do have that power now
Jamon Holmgren:
During research even we gray beards learned some things about.
Robin Heinze:
That's true.
Jamon Holmgren:
Native Firebase.
Robin Heinze:
That's true. I bet you even if you've used React Native Firebase on your last four projects, you will learn about something today that it does that you didn't know about.
Jamon Holmgren:
Wow. Throwing down the gauntlet.
Robin Heinze:
I know,
Jamon Holmgren:
I like this.
Robin Heinze:
I'm putting that out there.
Jamon Holmgren:
So what's Firebase, first off? Someone give me a quick overview of what Firebase itself is.
Robin Heinze:
What is Firebase not is really a real question. Firebase is probably most known for cloud computing services. It's one of the providers of serverless architecture. So it does a bunch of stuff as a service that you would in the past would've had to have an entire server team. Firebase does a lot of that for you.
Mazen Chami:
I think the whole excuse of it's going to take me forever to build an app because I still need to set up a backend server database, et cetera. That kind of goes out the window with Firebase because Firebase does it all for you. And as we're going to get into it, React Native Firebase covers a lot of the bases for you then. So all you're doing is you're calling their functions per the docs.
Jamon Holmgren:
Yeah, that makes sense. And it's a service that I think originally was not at Google but Google bought them or something. Or maybe,
Robin Heinze:
I don't know.
Jamon Holmgren:
I don't if Google created it, but it's at Google now.
Robin Heinze:
If we ever have someone from Firebase on the show, we'll have to ask about the history of how it came to be.
Jamon Holmgren:
Yeah, totally. I've used Firebase several times and I really
Mazen Chami:
Enjoy it. I was going to say there, there's a lot of alterNatives out there for Firebase. Yeah. But Firebase is the most mature when it comes to it at the end of the day. We're going to list out over 10 items now. There's other alterNatives. Super Base I believe is one of them that's not as.
Jamon Holmgren:
Super base?
Mazen Chami:
Super base yet. It's not as mature yet. I think they only have two or three items from this list that we're going to go over. The rest are coming soon. They're trying to catch up. But then again, you know have Google backing Firebase and you have the maturity and age of this package that's really giving the benefit for it.
Jamon Holmgren:
Fun fact, I got into open source back in, oh I don't remember exactly. My first real open source was releasing a mobile package for a service called Parse. Parse.com at that time, which was eventually bought by Facebook. Parse was basically a Firebase competitor and it used Mongo DB in the back background. I loved it. It was awesome. It was super, super cool. And their team was awesome too. I'm actually still connected with a lot of their team on Twitter and then Facebook killed it and I was super sad. So Firebase was sort of the alterNative. They were kind of fighting at that time. And then Firebase won just sort of by default after that.
Mazen Chami:
It's funny you say that. Parse was my go-to forever, until Facebook bought them. And then I tried to stand alone a Parse server and that was the worst experience of my life.
Jamon Holmgren:
Horrible.
Mazen Chami:
Moved. I was like, okay, who's, who else is out here?
Jamon Holmgren:
Yeah, I didn't know you did Parse. Yeah. Okay. That's a very small tight-knit group of people that did that.
Mazen Chami:
My mentor in the area, he still does Parse and his entire library, Well his entire app and company is running off of Parse still. But we digress.
Jamon Holmgren:
So do you know what my library was called? "Parsistence". I thought that was pretty good.
Robin Heinze:
They should have bought that from you and trademarked it.
Jamon Holmgren:
So obviously back to Firebase, we will specifically be talking about React Native Firebase, right? When you install it'd be React Native Firebase. Also, you can also use the Firebase.jsweb SDK because it's React Native and it's just JavaScript. I've actually used this probably a little bit more than React Native Firebase myself simply because it works with Expo, but it does have some limitations. We'll talk about those in a bit. But Firebase to us is relatively straightforward to get going. You just have to do everything with, you're clicking on all the web stuff and copying all the web stuff in. But if you did want to compare that to React Native Firebase on their docs, they have an FAQ and TIPS section. The first one is why React Native Firebase over Firebase JS SDK, which is the web version.
React Native Firebase actually wraps Firebase Android SDK and Firebase iOS SDK. So the Native packages, you get Native code and so the main benefits are that access to the Native code. So Native SDKs actually have, there's more modules and more features, things like dynamic links, app distribution, so you can actually monitor Native crashes and things like that. There are also some modules that are in both web SDK and Native SDK, but generally speaking the Native, the React Native Firebased side of things is going to support more. So things like in the background, you can do background downloads for Firebase storage and you can do more performance stuff. I feel like a lot of this stuff is probably a little more kind of advanced features, but you definitely would run into these eventually. And the API is also a bit different. We're not going to go into that too much, but it definitely you kind of have your choice of which UAPI you like out of those two.
Robin Heinze:
Yeah, obviously it's going to be a lot lighter weight to just use Firebase JS. If the features that you're using are JS only, they're not Native specific, you can go a lot more lightweight just installing the JavaScript only, but reacting in a Firebase gives you all of that basic web functionality plus a lot of Native features as well.
Jamon Holmgren:
Yeah, exactly. And then the other piece of this is if you are using ExpoGo especially, you would need to use the web version, however you can use it with Expo. If you use config plug-ins, which we haven't gone over Expo config plug-ins on the show yet.
Robin Heinze:
I actually don't know much about, I haven't know much about config plugins.
Jamon Holmgren:
Think of it basically as in your app Jason, you would describe, I think it's in your app, Jason actually I haven't done this so I need to do more research on it. But you would basically say, Hey, I want to use this plugin and then when it generates your iOS and Android folder, because you can just regenerate your folders. You're not like in their editing code.
Robin Heinze:
Yeah.
Jamon Holmgren:
Anytime you generate it would then modify your iOS and Android folders to have whatever function.
Robin Heinze:
The stuff you told. Yeah.
Jamon Holmgren:
Yeah.
Robin Heinze:
It seems like it's kind of like patch package buffer your...
Jamon Holmgren:
It is. It totally is. And then the benefit of that is when you upload it to their like EAS system, they deterministically also generate the iOS and Android folders and can build your app from that. So it's a pretty cool system.
Robin Heinze:
Use with Expo is, has some caveats. A lot of what we're going to talk about today, if you're using a Bear React Native project, you're good to go. If you're using Expo it's probably still possible, but you may have to do a little bit of extra.
Jamon Holmgren:
Yep.
Robin Heinze:
But yeah, we've, we're going to cover everything that the SDK includes, all the features that it provides, but we're not going to go into super depth about any single one. This is more of a, Hey, did you know that it does all these things.
Jamon Holmgren:
All right. Mazen, kick us off. What are we doing first?
Mazen Chami:
We're starting with the base one. This one is the docs call this core/app. This is pretty much the way you would manually start when you start off your app initialize the app, essentially linking your Native SDKs, iOS and Android SDK's to the JavaScript and that linking the credentials you would get from Firebase. So you need this to run anything that we're going to talk about next. Initialize, you're exposing the different utilities to your development and it also mentions create a secondary Firebase app instance.
Robin Heinze:
I think that means you can spin up secondary Firebase instances using the core module.
Jamon Holmgren:
So you could connect to multiple Firebase accounts or something like that.
Mazen Chami:
Yeah,
Jamon Holmgren:
Yeah. Essentially. Interesting.
Robin Heinze:
Oh Yeah, that's the core.
Mazen Chami:
And you can delete the instance.
Robin Heinze:
Yeah, that's basically the core. Most of the time you'll be installing core in addition to one or several of the rest of the packages that we're going to talk about. You will always need to install core.
Mazen Chami:
If you're looking at the docs for any of the next ones. So next one we're talk about is analytics. To install an analytics, it'll say install and set up app and then install analytics and then do your pod install for analytics. So always have to do that at the end of the day.
Jamon Holmgren:
So they're doing this kind of in a modular way so that they don't have to, you're not including a bunch of stuff that you, you're not using.
Robin Heinze:
Correct.
Mazen Chami:
Exactly.
Jamon Holmgren:
Yeah. Okay. That makes sense. Let's talk analytics then. What I can infer what that is, but give me a quick overview there.
Mazen Chami:
Pretty much the same, you know, can log events, you can track user behavior, you can set up either predefined data. So I believe it comes with some specific data like user ID I believe is one of them that you can set up. But then you can also expand it to do email and other stuff along that. They have some reserved events. I won't go through them, but there's a long list. It's like user engagement, app update, first open app in the background, app remove. So a lot of different events that you can use or you can actually create your own events. The way I've used this in the past is for looking into whenever you ping an API, there's just a quick log. This API was ped for more detection, like crash detection mainly, but then also user. So whenever user was created, I would lock that user details and then eventually be able to track them and then have other tracks based off of that user, whether it was clicks or not.
Robin Heinze:
So you're basically tracking how your users are using your app, what they're doing in the app. And you can tie that to things like geographic location, language preference, all sorts of.
Mazen Chami:
Absolutely. Yeah.
Robin Heinze:
Demographic information.
Mazen Chami:
All this stuff that we're going to go over goes into one dashboard, which is great. And the dashboard is pretty simple to use. It has graphs, it has tables and all that. So it's nice to have it all in one spot and at the same time in a simple UI to look at.
Jamon Holmgren:
Right. Yeah, I remember we used to have to build all this stuff. So it's nice to have. It's nice to have someone else doing this instead.
Robin Heinze:
So yeah, analytics.
Jamon Holmgren:
Cool. What's next?
Robin Heinze:
There's a service called app check which I've never used. I didn't know it was a thing, but apparently it's a service that basically authenticates that requests are coming from an authentic installation of your app. That hasn't, right, but hasn't been tampered with. Right. To protect against things like fishing, fraud, other sorts of things. So if your app is in sort of sensitive industries, maybe financial care, whatever, then this is a service that will help ensure that it isn't being misused.
Jamon Holmgren:
I remember way back in the day when you would install games, they would have these services that would protect against hackers. I remember Punk Buster was a big one.
Robin Heinze:
Punk Buster.
Jamon Holmgren:
So this is basically Punk Buster for
Robin Heinze:
See Firebase, Punk Buster.
Jamon Holmgren:
Punk Firebase.
Robin Heinze:
So you'll, a theme that you'll probably pick up on throughout this episode is that Firebase provides, it's like a one stop shop. It's like the big box store.
Jamon Holmgren:
Except one thing, which I'm complain about at the end.
Robin Heinze:
So if it's a service that you need for your app, Firebase probably does it with some exceptions.
Jamon Holmgren:
Yeah. With one very glaring exception.
Robin Heinze:
Which Jamie will tell us all about.
Jamon Holmgren:
Oh yeah, I will complain about it.
Robin Heinze:
So that was called app check. Another thing they do is called app distribution. We actually use this on Mercari. It's used for beta builds test builds. You could do automated test builds. So they have it set up to trigger a Firebase distribution build every time you merge a whole request, for example. So it's really easy for your testers to download new test builds really easy.
Mazen Chami:
Nice. Yeah, when I was on the Mercari project, I remember that being the nicest thing. One of the nicest things that was there because if I created a pull request, I would tag it would create the build, I'd get an email, the new build is ready, download it, test it manual, do the manual test before it went on to QA. And then I could just tell QA, Hey, test build number XYZ, ready to be tested.
Robin Heinze:
And obviously this goes, it's outside of the app store, play store channels. And so it's a single channel for your iOS and Android test builds, which can be really helpful.
Jamon Holmgren:
So a lot of times when you talk about adding Firebase to your project, usually you're thinking firestore or which we all talk about shortly and the real time database, but you can actually just skip the database side of it, the API side or that side of it, and then just do a lot of this other stuff. There's a lot of other stuff and that sounds like that's kind of what we did over there. That makes sense. Let's talk authentication.
Mazen Chami:
So usually one of the first things you want to do is set up authentication for your app. So users can log in and log out. This is all set up, again, you can set up your own way of sign up with email and password. You could do anonymous sign in, which I think is pretty cool. You can also do Apple, Facebook, Twitter, Google, phone number, and then that covers it. All those types of logins. And you can also set up two-factor authentication, I believe. I haven't tried that, but again, two-factor authentication is also available. So all your login needs are set up for you there with just simple functions to call. And then they also have a subscriber that you always want to set up for on off state change. So that's essentially is your user logged in or logged out?
Robin Heinze:
This is another, this is one of the services that's not specific to Native. Right. So this would be available with just Firebased JS as well?
Mazen Chami:
Yes. Yeah, I believe so. Yeah.
Jamon Holmgren:
Yeah. I've used that on expo projects for sure.
Mazen Chami:
And on off change, on off state change, sorry. Pretty much if you update your profile, say new profile picture or update your name for whatever reason, it would automatically create a callback. So your app renders, so you have to just be careful in that your rear-ending state there, but it's just a subscriber event that you listen to.
Robin Heinze:
This is one of those classic serverless features.
Jamon Holmgren:
Yeah, yeah. The classic serverless side of it is, well actually fire stores kind of their newer version of it, but that's the one I've used the most. And it's no sequel database. Cloud database can, The thing that I really like about it is you can have listeners, so you can set up a query, sometimes fairly complex queries and then if the results would change, it will actually send you a call back. It's like a snapshot basically is what they call it. And then you can update your database.
It works really well with MobX and MobX State Tree. So it's one of those things where the integration is super good. So the other piece of this is there's also offline support. So you can be creating things as you're offline and then it'll sync up afterward. This stuff's all kind of built in. Pretty cool system. Really. I'm a big fan of firestore. I like it a lot. It's not a full replacement for the realtime database, which we will talk about, but it kind of is. Like there's a lot of things that fire store can do that you may be used to try to do with the realtime database.
Mazen Chami:
The offline mode is a big one. One, I think that's something that it takes it to another level in the past, you just have to handle it some way. This is just all handled for you now. You don't have to worry about anything. The next one I want to go into is cloud functions. So I think we use this internally, right? Jamon? With Clue?
Jamon Holmgren:
We do, yeah. Yeah. We have on our Clue app, our internal app. We use cloud functions on this quite a bit.
Mazen Chami:
Serverless essentially cloud functions. If you combine cloud functions, authentication and fire store, you pretty much have an entire backend.
Robin Heinze:
That is your server. That's your entire backend. Yeah,
Mazen Chami:
Yeah. You're backend there for you. And nice thing about it is simple to create your functions and then deploy them. You just pretty much run a command from your terminal and you can deploy that entire folder there. Yeah, you run the code. I mean we could kind of keep going into this, but it gives you HTTPS requests for you to call back against also. So if you're creating a full web and mobile app, you also have the ability to pin the same APIs or from the same library.
Jamon Holmgren:
And for beginners, to be clear, these are not running on your React Native apps. You can call them, you can say, Hey, run this function over there, but they're running in the server in the cloud. So that's helpful for things. A lot of times callbacks example of this is for one of my little apps that I've built. When you authenticate and are accepted into a group, it will do some setup for you. So it's like a setup function that happens there.
Mazen Chami:
You would just call them a promise with your then and then catch. Yep.
Jamon Holmgren:
Or async await.
Robin Heinze:
Logic that you would want to run on a server. You wouldn't want to run on a client and clog up threads on your device. You'd want a server to run it, but you can trigger it from the client side and have it run in the cloud.
Mazen Chami:
Very cool.
Jamon Holmgren:
We're kind of speeding through these, but.
Robin Heinze:
That's because there's a lot.
Jamon Holmgren:
But I kind of want to,
Mazen Chami:
Yeah, there's a lot.
Robin Heinze:
The next one you'll probably be familiar with is cloud messaging. React Native Firebase implements a Native wrapper around FCM, which is Firebase Cloud Messaging, which is a server to device or device to device communication framework. It's really versatile. It's basically just like anything you could think of that needs a message to go from server to device. If you need to ping a device to say, Hey, we're like, there's updates for you to get, you should fetch updates. Instant messaging, push notifications are included in this specifically. That's a specifically Native feature. But background push notifications are included in this. A super powerful feature, you're probably familiar with it. I would say it's one of the most common push notification providers that React Native apps are using these days.
Jamon Holmgren:
You'll see the FCM acronym all the time. So Firebase Cloud Messaging, it usually means push notifications, but it can be a lot more.
Robin Heinze:
In React Native context. It's almost always push notifications, but it's at its core, it's server to device or device to device messages.
Mazen Chami:
And another aspect of this is if you kick off a function that could take a while and you don't want the user to sit there spinning and waiting. This is one of the apps, one of the things we did in one of the apps I was working on, we would trigger the function and you'd just say, come back and check in later. And then the user could continue using the app. And if it was done in time, we sent it push notification like, hey, this is done, check it. So didn't pop up and say, Hey, your processing's done. Do you want to view the data? You'd click, yes,
Jamon Holmgren:
That's cool.
Mazen Chami:
It would then ping it would receive the data and then take you to that page.
Robin Heinze:
So is this the kind of thing that's happening in the background when you're on a web page and it tells you to go and do something in your app and you finish and you go back to the website and it magically somehow knows that you did it and knows to...
Mazen Chami:
I mean, if we were to be related, it's kind of like a web socket ish kind of thing.
Jamon Holmgren:
That's true.
Mazen Chami:
But it's a push notification telling you need the logic in place, right? It's a web socket that needs additional logic to then do the fetch. Web socket will just give you the data. You could if it's not a lot of data, unless if it's just like, Hey, here's a string that you get back from this big processing thing. It could be returned in an object, but other than that is just, hey, this processing is done or this is done. Open the app to see the data.
Robin Heinze:
So yeah, really, really powerful service. If you're thinking of implementing push notifications, you should be considering...
Jamon Holmgren:
Thinking of that.
Robin Heinze:
Yeah. This should be one of your contenders.
Jamon Holmgren:
Obviously fire store and whatnot don't, You're not supposed to dump images and larger files and stuff into there. That's really just for smaller bits of text data. So they also have cloud storage. So that's probably what's similar to S3 or something Mazen?
Mazen Chami:
Yeah it's the same S3 bucket storage type of deal. Yeah. Dropping your images.
Robin Heinze:
Like I said, this whole list is going to be like if you can think of a service that you might need. Right. Firebase probably does it. S3 is probably the most well known provider of this. but if you know what S3 does, this is that.
Mazen Chami:
Speaking of S3, do they have something comparable? They have all these services. I know that
Jamon Holmgren:
They do.
Mazen Chami:
But do they have a simple package, like what we're talking about right now, React Native AWS. I don't think they do.
Jamon Holmgren:
Yeah. Well
Robin Heinze:
There's Amplify, right?
Jamon Holmgren:
Amplify I think is probably the closest where you, it kind of glues these services together in a way that's little more.
Robin Heinze:
Have we done an episode? We haven't done an episode about Amplifly, have we?
Jamon Holmgren:
No, we haven't. Yeah, I know that. I think there have been pre infinite red episodes about Amplify, but we should definitely do it.
Robin Heinze:
Yeah, I would say amplify is the, what's the word?
Jamon Holmgren:
Yeah.
Robin Heinze:
I can't think of the word.
Jamon Holmgren:
It's comparable.
Robin Heinze:
There is a word.
Jamon Holmgren:
Well if you think of it, just blurt it out of context in the middle of something else. One service that a lot of people will use is, which is also part of this.
Robin Heinze:
It used to be its own thing and it was.
Jamon Holmgren:
I think so.
Mazen Chami:
Yeah.
Robin Heinze:
Purchased by Google.
Mazen Chami:
Yeah.
Jamon Holmgren:
Yeah.
Robin Heinze:
Yeah.
Mazen Chami:
Again, real simple here where it gives you two things out of the box. One, whenever you have let's say a Native crash for memory heap or whatever that is, the app usually crashes. And then on reload the data, the report is then sent to the dashboard. So then you can then view that. Similarly, you also have, whenever there's like a JavaScript error that also gets to come up and get uploaded for you. So it's pretty, it's pretty robust in that one. The one caveat here is you have to upload your D sym's. Yeah. Your D symbols just to make sure that it can read and you're not seeing this crazy crazy crash report.
Robin Heinze:
That it makes sense if your stack trees basically.
Mazen Chami:
Exactly. And it's almost impossible to read. It'll give you the exact lines and say on this line you're trying to undefined or whatever. There's variables undefined.
Jamon Holmgren:
Where do you find the decent for the people that are kind of new to mobile development, generally speaking,
Robin Heinze:
Where it's usually spit out in your build folder somewhere close to where you're,
Jamon Holmgren:
And that's an iOS thing, right?
Robin Heinze:
Yes.
Mazen Chami:
If you like right click your app. The build, Sorry, There's like a show package I believe. And then you can kind of dig into there and pull that file from there.
Jamon Holmgren:
Pull the D sym.
Mazen Chami:
Yeah.
Robin Heinze:
Fastlane will also, it's possible in your fastlane scripts to extract that and then save it out just as a file next to your IPK
Jamon Holmgren:
So it's easy to access.
Robin Heinze:
Not IPK. IPA file.
Mazen Chami:
Ipa. Yeah. Just recently actually
Jamon Holmgren:
IPK. IPA.
Mazen Chami:
Yeah. Just recently, one of the clients I'm working on came to me and said, We're getting a lot of crashes. We don't know why. I was like, Okay, let's hook up. It's quick. It'll take, Yeah, couple hours we'll be done. Set up. Since you're already using Firebase, it's already set up.
Robin Heinze:
Why didn't they have it set up already?
Jamon Holmgren:
I know, right? Yeah.
Mazen Chami:
So we pushed it up and then they use, if I'm not mistaken, is it Bit Rise for their whole pipeline. And then we just linked to extract the D sym and actually upload it. So that was all done in the pipeline and one week later we had 35 crashes. So it was perfect to then figure it all out.
Jamon Holmgren:
Yeah, you have to have that kind of insight. If you have a production app and you don't have something installed, you need to get that in there. But by the way, real quick, Frank who is working with, he's one of the infinite red, so software engineers he is working on and it should be out. We are working on, for Ignite, having kind of a built in place to put Crashlytics and if you would prefer Century or Bug Snag or something, we're going to actually have a place in Ignite where this is where you put all of your crash reports. And then we have a common API for reporting a bug, reporting a crash.
Robin Heinze:
Nice. Well that's cool.
Jamon Holmgren:
It's going to really kind of clean up. Just have a dedicated place for it. Really straightforward. This is how you do it. Links to all the docs. You really don't have any excuses to not have crash reporting if you're using goodnight.
Mazen Chami:
Exactly.
Jamon Holmgren:
We also referred to real time database as well. That was the kind of original Firebase that was original. What you thought of when you thought of Firebase originally. Predecessor to Fire Store it is kind of a giant object really is how they kind of store it. Just a giant Jason object. And then you can, on top of that, you can do querying, sorting, filtering, things like that. So it's not a document store so much as it's a giant Jason object that you can put in the cloud. It's kind of a cool idea, but obviously there are limitations to that that they ran into. So that's why Fire Store exists. But yeah, that's essentially what I would say. Real time still has its place. I'm not going to go into all the differences right now between Fire Store and Real Time, but I tend to reach for Fire Store first. But
Robin Heinze:
It's more likely.
Jamon Holmgren:
There are some situations where real time actually does make more sense and it has some features that fire store.
Robin Heinze:
So the next one is Dynamic Links. I think it's also sometimes referred to as Universal Links. That's normally what I have called it.
Jamon Holmgren:
Or Deep linking.
Robin Heinze:
Yeah, Deep links. Yeah. Universal Links. There's some nuance to Deep Links versus Universal Links. Deep Links specifically are just links that go deep into your app. So you can go several screens deep to a specific place with a single link. But Universal Links specifically work on it's a single link that will dynamically determine where to go.
Jamon Holmgren:
Either your Native app.
Robin Heinze:
Or your website. Yeah.
Jamon Holmgren:
Okay.
Robin Heinze:
And in this case, it'll determine which platform, iOS versus Android versus web. So it is truly universal or dynamic.
Jamon Holmgren:
Are there any other adjectives you can use for them?
Robin Heinze:
I think that's it.
Jamon Holmgren:
Basically.
Robin Heinze:
So yeah, so that can be super helpful, especially for things like marketing emails or user emails because you can include a single link and it'll figure out where to go. And then that is layered on top of D links to put them directly into the app with in exactly the place they need to go with data, any kind of parameters that you need to pass through as well. So, that's a super useful feature. And then there's in-app messaging, which it took me a little bit to try and figure out what the difference was between in-app messaging and cloud messaging.
Jamon Holmgren:
I don't really like the word messaging here cause I always think of it as being chat, but...
Mazen Chami:
If you were just read the title, you would think this is an easy way to chat with other users.
Jamon Holmgren:
Yeah, right?
Robin Heinze:
No, yeah. Which it's not what this is at all. It's similar to push notifications, but it's not push, not when the app is backgrounded. You're in the app clicking around and you can get dynamic content presented to the user based on what they're doing to increase engagement. Or if they're clicking around on a certain page and you have a promotion for that item, you can show them a message about that and you can control the content on the server so you can iterate really quickly or change copy really quickly. So definitely for user engagement, marketing, that kind of thing. I don't, I don't know a ton about it more than that, but...
Jamon Holmgren:
Yeah. We're getting to the end of our list actually. We just have a couple more. Remote Config.
Robin Heinze:
Yeah.
Jamon Holmgren:
It is what it sounds like it is?
Robin Heinze:
Yeah. I mean it's literally just a key value storage pair on the server, but it can basically be your ENV file, but remote, which I had no idea this existed. And it makes so much sense.
Jamon Holmgren:
Yeah.
Robin Heinze:
Especially when you consider the security implications of putting your keys in your bundle.
Jamon Holmgren:
Right.
Robin Heinze:
Why have we not been doing this? Or what's the downside here? What am I missing?
Jamon Holmgren:
Although I don't like the dot ENV comparison because if your React Native app can read it, then so can the user. The reason being that they can hack your bundle and say, Hey, show an alert with this thing. So even this wouldn't be secure. This would be more the parts of the dot EMV that are just more around just not secure stuff. We should actually have a whole episode. Let's put a note. Let's have a whole episode about that other piece because I've got some stories that we can tell about it and there's some things that we can do.
Robin Heinze:
Go fig.
Jamon Holmgren:
With you though, Robin. It's like...
Robin Heinze:
Config is a complex problem. It can be tough.
Jamon Holmgren:
Other types of use cases, right?
Robin Heinze:
Yeah. So I mean it's just a key value pair, so there's a lot of things you can do with it. It's pretty versatile. One example they gave in the documentation, which I had never thought about was translation files. So if you're using doing I18N, you can store your translations so that if there's typos or changes, you can update them right away. You can add them remotely. You don't have to do a new bill just to add a new language.
Mazen Chami:
I wonder how often this is fetched or is it on, I guess unquote document change?
Robin Heinze:
I'm not sure.
Mazen Chami:
So like you mentioned translation, typos. I feel like that you don't want to rebuild your entire app because you misspelled a word.
Jamon Holmgren:
Right.
Mazen Chami:
So I wonder how quick it would take for the... How long would it take for the user to get it? They might be a listener.
Robin Heinze:
Translation Activate. Yeah, I'm not sure.
Jamon Holmgren:
But definitely useful. And that's something I'll be paying attention to. And the last thing we have on our list is performance monitoring. So Mazen.
Mazen Chami:
Yeah. It's exactly what it sounds like. You get to monitor the performance of startup and it'll automatically trace events in your code. And as with all of these so far, you can set up custom tracing if you want to see how long a specific function took for example, if you think that's bottling neck, like your bottleneck, some parts of your UI. And you can also put attributes or whatever data you want. There's put attribute and put metric so you can attach user ID. So what user is slowing down? Maybe because they have a lot of data associated with their account, which is why it's slowing down. So yeah, easy way to have metrics around your entire app.
Jamon Holmgren:
Yeah, I think this one's probably underutilized, especially at first on apps and that's something that I think would be very, very helpful. Nice. So there's one thing missing, which just blows my mind a little bit.
Robin Heinze:
Jamon was very outraged about this.
Mazen Chami:
Yeah, rightfully so.
Jamon Holmgren:
Who owns Firebase? Remind me.
Robin Heinze:
Google.
Mazen Chami:
Google.
Jamon Holmgren:
Okay, what? What's Google known for?
Robin Heinze:
Search.
Mazen Chami:
Maps.
Robin Heinze:
Maps.
Jamon Holmgren:
Maps. Okay. That's also missing. But
Robin Heinze:
Search primarily search.
Jamon Holmgren:
Yeah. There's no search. There is no search. No. Nope. There's no way to search. I mean you can do queries, but that's not the same as search queries in search are kind of two different things. And literally they're like, yeah, you can download all the data and then search it locally or you can tie into these three non-google search providers what that they lay over the top of your fire store and.
Robin Heinze:
Google. What are you doing?
Jamon Holmgren:
What are you doing? I don't get it. Why wouldn't there be Firebased search just make it.
Robin Heinze:
Of all the serverless providers. Firebase owned by Google should be the one that has just a slam dunk.
Jamon Holmgren:
An amazing search. Wouldn't that be a full tech search with all of the features of Google where you can just be like, I mean just is the amazingness that is Google search. I don't know.
Mazen Chami:
It would be hilarious if Amplify had that.
Robin Heinze:
It would.
Jamon Holmgren:
I know, right? I suspect it does because they elastic search stuff. So I don't know. I guess I'm...
Mazen Chami:
Disappointed.
Jamon Holmgren:
Yeah, I guess I'm disappointed. I'm just disappointed. And I actually needed this for a project more recently and I ended up finding a different solution, but it was, I was just kind of blown away that there wasn't just a feature to enable and then query it like, Hey, here's my text now, give me all the documents that match this.
Robin Heinze:
So Firebase team, if you're listening to this, come on our show and explain what gives.
Jamon Holmgren:
Yeah. Do you just hate Google the overlords or what's going on here?
Robin Heinze:
Yeah, we want to know inquiring minds.
Jamon Holmgren:
So if you want to learn more about React Native Firebase, go to RN Firebase.io. Shout out to, how do you say the company name Infer taste in Invertase? Inver tose. I N V E R T A S E. Limited. They are kind of like open source, awesome people. They're really like into, they do reacting, but they also do flutter, which is kind interesting. But they maintain React Native Firebase and a few other services not to fee, which is kind of an enhanced notification service for React Native that uses Firebase, that uses FC to have to do the thing. So they want to give them a shout out for sure. And we'll probably have some people from their team on later at some point. If you'd like to learn nerd out more about React Native, check out my Twitch stream at RN Live.
I have not been streaming as much this summer, but it's going to resume. Don't worry. Winter's coming. I'm going to be doing some hacking, some cool stuff. I was actually doing some really fun stuff last night, which is why I'm so tired and I was not streaming it, but it was kind of a fun exercise. So you can also join our slack community community.infinite.red, over 2000 React Native developers in there, the new Twitter community. Keep your head down, be nice. Otherwise Robin will find you RNtwitter.infinite.red. Where can people find you on Twitter? Robin?
Robin Heinze:
I'm at Robin_Heinze.
Jamon Holmgren:
Mazen at MazenChami. I'm at JamonHolmgren and you can find at React Native radio for our show Twitter, which honestly I last I checked, we had an impressive number of followers. We have 8,500 followers.
Robin Heinze:
What?
Mazen Chami:
Wow.
Robin Heinze:
Okay. Who's following React Native Radio but not following me.
Mazen Chami:
I don't even think I've cracked 500 followers.
Jamon Holmgren:
Guys. It's a little bit like Robin's getting close to 1500. Yeah, you should go follow her. But how many times do we say this? Mazen, of course, you do need to tweet sometimes, Mazen.
Mazen Chami:
I do.
Robin Heinze:
Yeah. Mazen doesn't tweet enough.
Jamon Holmgren:
He retweets all the Infinite Red stuff, which I appreciate.
Robin Heinze:
I try to tweet when I think of stuff to tweet. But
Jamon Holmgren:
You've been doing better lately, Robin. I'm very impressed. You had a pretty good tweet that kind of went pretty good.
Robin Heinze:
Yeah, I got into the 300.
Jamon Holmgren:
I need to read it. Mapping before filtering. This is in regards to JavaScript array. Mapping before filtering is taking all the food out of your fridge and heating everything up and then putting everything back except the thing you're going to eat. That's a good tweet. That is a good tweet. It's a good tweet. Yeah. So Robin Tweets good stuff. I tweet a bunch of random stuff. I had a good one the other day that kind of went. It does not matter. I don't know why I'm talking about this. We're just our producer now.
Robin Heinze:
We're just dragging people out.
Jamon Holmgren:
I know.
Robin Heinze:
We know they're waiting.
Jamon Holmgren:
Probably someone who can't reach their phone to skip. That's probably who is still listening right now. 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/Infinite nannies, check us out at Infinite do red slash react Native. Special thanks to all of you listening. And of course Robin, we have our new segment.
Robin Heinze:
This segment is called Robin's mom joke.
Jamon Holmgren:
Robin's mom joke. I love it.
Mazen Chami:
We need like a song intro.
Robin Heinze:
We do. Okay.
Jamon Holmgren:
We do.
Robin Heinze:
We're going to come up with a sting. Yeah, we are.
Jamon Holmgren:
Okay. Okay. In the future. Yeah.
Robin Heinze:
So at our retreat a couple weeks ago, one of the prizes that I won, because there was a ton of prizes, did a great job with prizes. But one of the prizes that I won was a giant book of dad jokes. But I'm not a dad. So this is going to be every episode we'll do Robin's mom joke and I'll try and get through the whole book. I'm going to skip the lame ones, but, okay, here the...
Mazen Chami:
There are no lame dead jokes.
Robin Heinze:
No, that's the...
Jamon Holmgren:
Mazen and I went different direction.
Robin Heinze:
Okay. The first Robin's mom joke, Did you hear about the cow who jumped over the barbed wire fence?
Jamon Holmgren:
No.
Robin Heinze:
It was utter destruction. They're all going to be like that. They're all going to be grown worthy.
Jamon Holmgren:
You said you were going to skip the bad ones. I don't know. Okay, Thank you Robin for that. We'll leave you all with that. All right, see y'all next time.
Mazen Chami:
Bye.
Robin Heinze:
Bye.