Steve and AJ talk with Gareth Brown, author of the recently released Manning video course “Building Web Applications with Firebase”. They discuss what Firebase is, the services it offers, and how it is used in different types of applications, both large and small.

Panel

Guest

Sponsors

Links

Picks

Special Guest: Gareth Brown.

Sponsored By:

STEVE_EDWARDS: Hello everybody and welcome to yet another exciting edition of JavaScript Jabber. I am Steve Edwards, the host with the voice for radio and the face for being a, no, wait, let me say that bracket again, the face for radio and the voice for being a mime. There we go. But I'm still your host. And with me today on the panel is sir AJ O'Neill. 

AJ_O’NEAL: Yo, yo, yo, coming at you live from Pleasant Grove, like usually. And there's snow on the mountains. 

STEVE_EDWARDS: Oh, that's right. I forgot to mention that I'm coming from Portland where we also have snow on the mountains and people are getting excited about being able to ski around Thanksgiving or shortly. So we'll see. And with us, our guest today, a very special guest is Mr. Gareth Brown coming at us live from the UK. Hi Gareth. 

GARETH BROWN: Hello, yes, thanks for having me. No snow here, but it's getting colder. 

 

Hey folks, this is Charles Maxwood and I just launched my book, Max Coder's Guide to Finding Your Dream Developer Job. It's up on Amazon. We self-published it. I would love your support. If you want to go check it out, you can find it there. The max coders guide to finding your dream developer job. Have a good one max out. 

 

STEVE_EDWARDS: But now I've always heard that the UK was known for its great skiing. Is that not true? 

GARETH BROWN: I don't think so. I think that's more like Sweden, you know, the over in the Alps. 

STEVE_EDWARDS: Oh yeah. Alps mountains parent. Yeah, right. Gotcha. Sorry. 

AJ_O’NEAL: Well on the subject of government conspiracies, I've got one question for y'all. So my little daughter discovered the moon. And we haven't seen it in three weeks and we've been checking morning, noon, and night, like going outside, looking for the moon. Cause once she, you know, saw it in the sky, like back around Halloween and then in books, is there a moon in the UK? I'm wondering if it's just a government cover-up here in the United States. Cause I haven't seen it in three weeks. 

GARETH BROWN: There is definitely a moon. I have seen it before, but, but I haven't really looked for on the last couple of weeks, so I don't know, I'll go out later and have a look. 

STEVE_EDWARDS: Yeah. I think I've seen it around here too, uh, fairly recently, but, uh, not, not a lot. So first of all, Gareth, why don't you tell us a little bit about yourself, why you're famous, where you come from, what you do, etc. 

GARETH BROWN: Yeah, so I suppose location-wise, I come from Australia originally and moved to the UK about three years ago. Career-wise, I used to be a primary school teacher, actually, which I did for about five years before deciding to move into a new career. And it kind of took me a couple of years to find my feet in software development. So I did a few things such as I worked in digital marketing, a reporting role where I got to write, you know, lots of VBA code in Excel and things like that. Data analysis for about a year, writing lots of SQL before finally getting a job in software development. So that's where I am from career wise. And I wouldn't say I'm famous, but I've just recently done a video course for Manning, building web applications with Firebase, which kind of came from looking into Firebase as a bit of a hobby, you know, to, to help me with some side projects. And that led to doing a talk at a like a local JavaScript meetup in Bristol, which was videoed and put on YouTube. And I think Manning somehow found that video and asked me if I wanted to do a video course. So, and I was, yeah, happy to do that. That's why I'm here. 

STEVE_EDWARDS: Okay. Yeah. Firebase is what we are going to be discussing today, but I wanna go back a little bit, just sort of on the personal side of things. So you said you decided you didn't wanna be a primary teacher anymore. So is that like kindergarten through fifth grade or eighth grade or how does that work in Australia? 

GARETH BROWN: It's kind of five year olds to 12 year olds. So we would say, yeah, year one to year six, depending on what state. 

STEVE_EDWARDS: Right, sixth grade. Okay, so then you decided you wanna get in, you decided you just wanted to get in a tech in general, and you didn't know what to do, or did you really want to get into web development, or what did you decide to do, and how did you pursue that route? 

GARETH BROWN: I think initially I wanted to change career, and it took a little bit of thinking about what I wanted to get into. But at that point, you know, all through university and all the different hobbies I had, I used to build websites for that. So I was into music at one point. So I wanted to, well, still am, but built a website to kind of show my music and that was using Mozilla Composer, I think, a while ago. Started creating educational resources. So built a website with Dreamweaver and then that turned into WordPress, building website with WordPress. Almost forgot it there. And so I'd already worked with web technology at that point and built a few websites and I enjoyed that. So one of the first things I did was look a bit further into that and learn the you know, the front end stack, HTML, CSS and JavaScript. And then it still took a few years before I really like settled on that because I got into... I'd already done a lot of digital marketing with these educational resources that I did online. So I got a job easily enough in a digital marketing position because of that experience. And so for a while, I thought, yeah, I could get into digital marketing. And for about a year, I just worked on my own and helped small businesses with their digital marketing. And I ended up basically just building WordPress websites. So at that point, I realized, you know what, I really just like building websites type thing and decided, okay, I'm going to do something and just get into software development and, and web development, because that's what I enjoyed. So I did a diploma of software development, which was just like an online thing for a year and, and moved into it from there. So it's a bit of a journey. 

STEVE_EDWARDS: Yeah. Well, you mentioned, uh, using Mozilla Composer and then Dreamweaver. I'm, I have never heard of Mozilla Composer myself. I started out, uh, with the very first iteration, I believe of Microsoft front page and then, you know, messed with, uh, Dreamweaver a little bit. Uh, before I got into writing PHP and MySQL myself, but I wasn't familiar with Composer. Is that like a drag and drop thing for an entire website layout? Is that how it worked? 

GARETH BROWN: Yeah. It was like a WYSIWYG and I had to Google what it was actually called because I knew it was built by Mozilla and that I used it and I couldn't remember the name of it, but I found it was called Composer, but I'm not sure if there was maybe another iteration of it or if it was called something different. But yeah, it was basically a free open source version of, and very scaled down version of the Dreamweaver WYSIWYG type thing. 

STEVE_EDWARDS: Yeah. I'm looking at some articles in a Wikipedia article on it. It's pretty old and it sounded like, uh, according to this, uh, it was, they stopped developing it around 2006. So it's definitely, uh, yeah. Yeah. And then dream weaver. I remember in dream weaver, it started, it had the capabilities where you could actually write some PHP behind the scenes to sort of enhance what you did. It

wasn't something I ever got into, but yeah, that, uh, that definitely brings back some, some memories.

GARETH BROWN: Yeah, there was, you could edit the HTML. I don't remember. I don't think I knew. Well, I didn't know what HTML was at the, at the time. I just knew I could make these changes and see where the text was. Um, but yeah, it was mainly just drag and drop stuff. 

STEVE_EDWARDS: Hey, did you go back far enough to ever, uh, work with any of those lovely wissy wig editors back in the day? 

AJ_O’NEAL: I was never one for the front end. Um, I think back in middle school. I had some exposure to one of those, but, and I definitely had opened up Mozilla Composer at some point in time, but I, no, not really. 

STEVE_EDWARDS: Okay. All right. Uh, let's talk about Firebase. Uh, now, uh, Gareth, you and I were talking prior to we started recording and I mentioned that I think the, I saw it in a course. I think Max Schwartzmiller, Maxime Schwartzmiller from Udemy. I'd used it in a view course that I had looked at. And I think I played with it a little before, back when I was first writing Angular 1, what's referred to as AngularJS now. I'd seen some tutorials on working with Firebase and it seemed like a pretty cool tool. Wasn't it called something else prior to Firebase? Because Google had taken a project over and it was called something else and then didn't they change it to Firebase? Am I remembering correctly?

GARETH BROWN: And they offered an API which companies could use to build their real-time chat applications. And they discovered that people were using it for other things rather than real-time chat. And of course, the main benefit of using Involve was that it had those real-time updates. It was kind of easy to implement. And I think from there, it somehow evolved into that company realizing, okay, we can just offer this real-time database as the service rather than the API on top of that. And eventually Google took it over and I'm not sure if they renamed it Firebase or it was called Firebase at the time, but that's kind of how it started. 

STEVE_EDWARDS: What I might be remembering is another Google project that had something similar and they mothballed it off to see if I can look for it. 

AJ_O’NEAL: There was, there was, it was a div shot that got bought by Google and it got renamed to like Firebase hosted, or I think it got co-branded with Firebase. As a database plus front-end tool. 

GARETH BROWN: Oh, okay. Yeah. I haven't heard of that one. I must have integrated it maybe into a Firebase. 

AJ_O’NEAL: One of the says it was like Netlify. Well, it started out being actually something you could use to build component front end components in your browser, like being able to kind of drag and drop almost, um, and then it, then it turned into something more like Netlify and then it somehow got involved with Firebase and became got rebranded as a Firebase product. 

GARETH BROWN: Yeah. I've just looked at a very quickly. It's got Firebase hosting is Firebase and static web hosting service and is now powered powered in part by Div shot technology. Okay. So it looks like they incorporated Div shot into Firebase hosting maybe. 

STEVE_EDWARDS: All right. Cool. So let's get into Firebase itself then. So Gareth why don't you give us a good description of what is Firebase underneath the hood? 

GARETH BROWN: So Firebase is basically a backend service, which gives a very easy-to-use interface, in particularly for front-end developers, I think. So it's tightly integrated with the Google Cloud Platform. So if you create a Firebase project behind the scenes, you've also created a Google Cloud Platform project. I think the essential services that a developer would need to build, you know, a dynamic web app with services such as hosting, you know, just for the front-end database, either with the real-time database or Firestore it's called, and also cloud storage for files and images, audio, things like that. And it also gives authentication, which integrates really well and really easily with the other services like cloud storage and the database. So then as a developer, and I say front-end developer as well, because it gives you like the SDK can be used where you only need to write front-end code. So you can integrate all these services into your React app or Vue app, whatever framework you're using without having to set up any server side code or without having to deploy any servers. So that's what Firebase is in a nutshell, I suppose. 

STEVE_EDWARDS: Okay, so it offers, so, you know, I think as we've discussed, the biggest draw or feature, I guess, that it has is that it has, it's sort of a real time thing, something where, you know, if you're doing like a chat app or a gaming app, I think those are probably the more well-known uses for it is that it's very real time. You know, they tried away, it's not like, okay, save something, it saves to a database and then it's available, it's very real time. If I remember correctly, it also has things like users and authentication and other services. So what other services does it have, at least that you're aware of and that you use in your course? 

GARETH BROWN: Yes, so the main ones I've used to do with web development, I think Firebase is probably better known in the mobile dev industry because it gives mobile developers, you know, a way to kind of again easily interface with databases and storage just using a mobile app. So the main services I've used is authentication, the Firestore database, which is kind of the next new improved real-time database after the original real-time database. And I've also used cloud storage and hosting to host. I haven't mentioned it in the course, but more recently I've used the cloud functions, Firebase Cloud Functions. So it's almost like I feel like originally they had it as like a separate serverless kind of backend as a service for mobile developers to use for their mobile apps, but it started to get slowly integrated into the Google Cloud platform. So whether it's got new services like Google Cloud Functions, they're really just using the Google Cloud Platform functions and Firebase is almost like a layer on top of that, which makes things a little bit easier to use. I think for front-end developers and developers who are maybe not as well versed in the backend or server side or serverless. But there's also other services it uses for like, maybe more towards mobile developers. Like it's got some machine learning service that you can use in your app. It's got integrates with Google Analytics. I think a few places use it for its messaging service as well. So yeah, they're the main ones I've used,there's definitely a few more up there like crash analytics and stuff like that. 

STEVE_EDWARDS: So why is it, I guess what I'm trying to understand real quick is, you know, it seems like some of those features are things that any, you know, modern web application would, would want to use. Why is it more useful for mobile devs than web devs working on like a computer based web application, or is that just where it got a start and it's, it's a matter of being used by more web devs. And granted, the waters are probably a little more muddy now when you can use things like, you know, React Native or Vue Native or something like that to use a web app and make mobile. But is there something about it that's more relevant for mobile devs than web devs? 

GARETH BROWN: I think it initially found its feet with mobile devs. And I think the reason is, I'm kind of guessing a bit here, I think because a lot of web kind of probably already knew about lots of backend services like they maybe wanted to use MongoDB for the database or they knew about AWS or Azure or something. But I think the developer it's really aimed at is a developer who is more of a front-end developer. And I think a lot more mobile developers are probably, just would develop the mobile front-end app which is why I say I think it might appeal to mobile developers as well, a bit more, but certainly from a front end developer perspective, because it allows you to use, you know, set up services like authentication, a database and cloud storage with just writing front end code within your app. I think that's where it really provides a benefit over setting up AWS or, or setting up Azure or something like that. Or, you know, writing a node app for the backend. And I see it as a really good way to prototype new apps because you just write front-end code and the SDK is really easy to use. It allows you to build these things really, really quickly without going into writing server-side code. And I think the way they're implementing, kind of more integrating it with Google Cloud platform, I can almost see people easily getting up and running with Firebase. And then if the app they're building becomes a bit more commercial or it needs to be, you know, more enterprise-ready, it needs to be, you know, have a lot more complexity added to it. Then you can kind of easily migrate to Google cloud platform because the services are already there. 

STEVE_EDWARDS: So you've mentioned the Google, Google cloud platform. So how does this relate to Google cloud platform? I think you've mentioned this, but we can expand on it a little more. It's basically just layers sitting on Google cloud platform, right? In other words, you don't really have the option of hosting somewhere else with Firebase, right? It's got to be on Google or nothing. 

GARETH BROWN: Yeah, that's it. So, I mean, to be honest, I haven't, I haven't used much of Google cloud platform myself, um, because I kind of lean towards the front end side of things, which really is probably why I'm got so interested in Firebase in the first place. But my understanding of it is when you set up a Firebase project, behind the scenes in the Google Cloud, you've also set up a Google Cloud project. So if you want to do all of a sudden go, OK, I don't want to use Firebase anymore. Instead, I'm going to log into Google Cloud. You could log in and you could see all your Firebase services within Google Cloud. I think I just had a look at the Firestore once, interestingly, when I first started with Firebase, I built like a test project, you know, just kind of have a bit of a play around and set up a Firestore instance, which is the database for Firebase. And then probably a year later, I developed another project and started a new Firestore instance and went into Google Cloud Platform out of curiosity and my older Firebase, sorry, my older Firestore instance wasn't there but the newer one was. So it's obviously some kind of integration that has been a bit more recent. But it looks like you could basically get up and running very quickly with Firebase. And if you wanted to scale, add other features that then other services Firebase doesn't have, you could just log into your Google Cloud Platform and then add services from there. 

STEVE_EDWARDS: All right, so are there, well, you know, one topic that's gonna be prevalent more and more or important to web developers is security. So, we've mentioned how you can handle user authentication with this. Are there any security implications to using Firebase problems that you run into or maybe things that it addresses well from a security standpoint? 

GARETH BROWN: Yeah, I think it's just a different way of doing it. So of course, when you use, you know, server side code like a node app running in the background you can easily store credentials on the backend. So no user is going to have access to that. But because you can set it up by writing all the code in the front end, you can't, you know, store all these credentials because a user can just look through the bundled code and, you know, get any details they want out of it. So the way Firebase has got around this is they've got security rules where you basically log into the Firebase console. And you can set up security rules around Firestore and cloud storage. So there might be a rule that says we'll only allow a user to update their own data. Um, or if you're, I suppose example would be good. You know, if you've got a database that stores, let's just say blog posts, easy example to use. So you could say anyone can read, all users can read the blog posts but the only the user that created the blog post can edit it and delete it, for example. 

STEVE_EDWARDS: Okay. 

GARETH BROWN: And, like I looked into it and there was a few scathing articles, I think, basically saying that the security is horrible and security people kind of have heart attacks over the security involved with Firebase. And I think a lot of that comes from when you first set up a project, you can basically put it in test mode and it automatically just gives access you know, to everyone. And of course it's an easy way to develop because you're not going to be tripped up by having to log into certain accounts that have access. And of course, if you don't understand the security rules and you don't modify them correctly, then you can easily, you know, have a web app online where users might be able to edit other users' content and things like that. And so I think, I think it's just important to understand the security rules are there and to make sure that they're kind of gone through with a fine tooth comb to make sure there's not any loopholes and anyone can kind of modify data they're not allowed to. Now, it used to be that if you set it in test mode, then any user could access any of the data or modify the data kind of, you know, until you changed it. But more recently they've added like a 30 day limit. So if you put it in test mode it'll only stay in test mode for 30 days and they'll keep emailing you and kind of to let you know that your rules are insecure. So yeah, that's how that's handled at least, security. 

STEVE_EDWARDS: So in other words, they help protect you from yourself by leaving something open and vulnerable. I know I have never done anything like that. I'm sure AJ hasn't either. But yeah, that's a good help. 

GARETH BROWN: Yeah, they'll protect you from yourself unless you just delete the emails like I do.

AJ_O’NEAL: I'm here listening to things like, you know, saves you from having to write backend code and I'm like, well, that's the easy part. Why? That's the part where all the data is and where all the value is like, no, no, I, I'm, I'm happy to, to be on, on, on the backend. My question is why don't they have a tool that makes it easy to build the front end? 

STEVE_EDWARDS: Well, that's what Mozilla with composer was for. Right. So been doing a little Googling around and reading. So there's some limitations to Firebase 2S compared to say something like, you know, your popular platformers like a Netlify or, or, you know, any of the editors, let's say for instance, database, let's say you wanted to use another type of database, whether it's another NoSQL type. You know, like Mongo or maybe you want to use SQL instead. Is that an option or are you locked into the specific type of database that Firebase uses? 

GARETH BROWN: No, you're definitely locked in. It's very much, um, you use the real time database or Firestore. I think it's almost like if anything that has more option inevitably leads to being more complex. And I think the approach Google has taken with Firebase is to make it as simple and approach- 

STEVE_EDWARDS: Opinionated. 

GARETH BROWN: Yeah, definitely opinionated. Just easy for people to use. So I think they offer other people too many options. It's like it'll make them more complex. And then if people want to implement a MySQL database or something, then they can kind of just jump onto Google Cloud or AWS. 

STEVE_EDWARDS: Now what about the API for communicating with Firebase? So it looks like it uses a standard REST API, is that correct? 

GARETH BROWN: Yeah, it does. But if you're running just front-end code, you're not making requests like HTTP requests. You're basically just using the API directly in the code to update, modify the database and whatever else you want. There's also I think it's called admin, like an admin API, which I've used recently, which you would use directly on server-side code. So I used the Google Cloud Functions. And even though the API request was made from the front end to the Cloud Functions, within the function, you would just use this API directly, if that makes sense. 

STEVE_EDWARDS: So we're using an SDK then for these to call these methods if you're not making just straight HTTP requests? 

GARETH BROWN: Yeah, that's right. It's an SDK. So a library you install in the front end and then it's got a whole bunch of methods and APIs. And very good documentation to figure out what's what. 

STEVE_EDWARDS: Okay, so is it just like a generic JavaScript API that any, you know, Vue, React, Angular, Ember, whatever could use with user? Are there like specific integrations for the various front-end frameworks and libraries? 

GARETH BROWN: No, it's just the one API. So I've used it with React and in the course, I wanted to steer away from front-end frameworks because to make it simple. So I just use Firebase directly with Vanilla JS. Yeah, that makes it easy for them in that there's only one instead of specific integrations for the various front-ends.

AJ_O’NEAL: Now, how does that work? Cause I thought the whole thing with Firebase, like every time I've heard people talk about Firebase, it's because like there's some sort of live view updating, so when data changes on the backend, it also changes on the front end. 

GARETH BROWN: Yeah. So that's like the, that all started with a real time database and Firestore also has that functionality. And so basically, you know, the code looks like something, um, like you'd run a blocker code to save some data to Firestore and then you kind of set up a listener, which will listen to updates from Firestore. And so you basically, you set up like an event listener that will respond to events from Firestore. So if a certain bit of data, however, you know, whichever bit of data you want to be notified about, if that changes, then you've got an event which will trigger and then you can run whatever functionality you want in that event. And that's how that works basically. 

STEVE_EDWARDS: Okay. So the reason I was asking about API is, you know, over the past couple of years, the cool kid on the block has been GraphQL. Does Firestore support GraphQL? 

GARETH BROWN: Not that I know of. I mean, I'm sure you could call like Firebase functions with GraphQL endpoint, but then that's removed from the actual Firebase implementation. And because you're not doing you know, sending HTTP requests, and then I can't see how you do that. Okay, yeah, from what I'm seeing, they don't support GraphQL directly. So just thought that was sort of interesting, definitely, you know, like you said, the opinionated and limited functionality just to avoid having to maintain too much. 

GARETH BROWN: Yep. 

 

Have you ever wondered if you could be offering a faster, less buggy experience for your customers? I mean, let's face it, the only way you're gonna know that is by actually running it on production. So go figure it out, right? You run it on production, but you need something plugged in so that you can find out where those issues are, where it's slowing down, where it's having bugs. You just, you need something like that there. And Ray Gun is awesome at this. They just added the performance monitoring, which is really slick and it works like a breeze. I just, I love it. I love it It's like, it's like you get the ray gun and you zap the bugs. It's anyway, definitely go check it out. It's going to save you a ton of time, a ton of money, a ton of sanity. I mean, let's face it, grephing through logs is no fun and having people not able to tell you that it's too slow because they got sidetracked into Twitter is also not fun. So go check out ray gun. They are definitely going to help you out. There are thousands of customer centric customer focused software companies who use Raygun every day to deliver great experiences for their customers. And if you go to Raygun and use our link, you can get a 14 day free trial. So you can go check that out at JavaScriptJabber.com slash raygun. 

 

AJ_O’NEAL: But don't they have something kind of similar to the, like, you know, to the playground on, cause they, Firebase was out before GraphQL was, you know, something people talked about. And I thought they had some sort of playground that was similar in nature. 

GARETH BROWN: Do you mean there is a Firebase emulator, which is new, but I'm not sure. 

AJ_O’NEAL: I meant like a thing where you can like API Explorer or, you know, where you kind of see what your options are and what your data is going to look like, or, you know, like a, like an in browser tool to goof around with how Firebase works? 

GARETH BROWN: Yeah, OK. There's nothing that I'm aware of, but that's not to say it doesn't exist. But I feel like I would have stumbled across that. I mean, there's a way you can, there's like a playground to do security rules where you can kind of say, OK, if I look for this, if I try to do this, then will I be able to have access or will I get denied access? But again, I think that's. That's not really what you're referring to either. 

AJ_O’NEAL: It might, I don't know. It might, it might be, that might be what I was thinking about that I saw, but. So how does it, how does it work with, is it more of a key value store or does it have collection rules? Like, cause I'm guessing it's very, very, very far away from SQL and probably not too similar to Mongo either but is it more similar to something like CouchDB? 

GARETH BROWN: I haven't used CouchDB, but it is a NoSQL database and it uses a collection and document model. So, you've basically got a collection of documents and a collection might be users. And then each document would be a single user. So, a document is basically just a JSON object. Then attached to each document, you've also got a number of collections. So you might have a user's collection and you click on one user, which will open your user's document. And then that user might have blog posts, account details, and blog posts would be a collection attached to that user document. And account details would be another collection attached to that document. So then you click on the blog post collection, and then you've got a whole bunch of blog post documents. So that's basically how that's structured. Kind of using a document model. 

AJ_O’NEAL: And does it have any sort of like custom functions that you upload to do validation to make sure like, yes, this has a title, yes, this has meta tags array, yes, this has a body. 

GARETH BROWN: No, I mean, you can use security rules for that. I mean, unless you do it directly in your JavaScript code or whichever code you're using, you can do security rules. So you might say, add a rule that says, you can add a blog post only if you don't have a hundred blog posts. You know, if a hundred blog posts is going to be your limit, or you can add a user document only if the user has a username. So you could use security rules to implement stuff like that. 

AJ_O’NEAL: And I imagine I imagine there must be some sort of default rules for a user. Like a user has an email address. A user has a, some authentication methodology that, and that's just going to be built in because otherwise you'd have to come up with that on your own. 

GARETH BROWN: Yeah, that's pretty much built in. So with the authentication service, you can set up, um, to authenticate with email or Google, Facebook, Twitter, GitHub, you know, a number of those services. And then I'm pretty sure it's kind of what Google gives you is what you get. So I haven't seen any way to be able to actually modify that. For example, like different, I'm not sure, I don't think you can set up users with different permissions. Like to have an admin user and then a user that doesn't have admin privileges or something like that. And, you know, just again, cause they're going for that really opinionated, simple approach. 

STEVE_EDWARDS: So you can't have users with different roles in other words? 

GARETH BROWN: No, no, I'm pretty sure you can't. 

AJ_O’NEAL: So, I mean, like what's the primary use case for this then? Cause to me that sounds like, um, like a comment platform almost. You know, just like user can upload some sort of data, but like without having roles, without having management, without having like tiers of user, like what kind of paid application would you make with this thing? 

GARETH BROWN: I think it's looking at a lot more, just smaller scale apps. Like I can't see anything enterprisey using it. But if you want to build a web app where users share a photo of their dog and people can like your dog, for example, you know, something like that where, um, you know, very customer focused rather than a business-focused app. Um, it's something that's not big, not too complex. Users don't need different permissions. And I can see that that's the type of thing that you would use Firebase for. And again, I think that's probably why, um, it's more well-known in the kind of mobile developer industry. Cause lots of mobile apps are just that, you know, they're little smaller applications where you can do fewer things, you know, you know, you might want to, like, as you said, leave comments on content that people have shared or write notes to each other, write messages. So I think that's more where it's appropriate rather than any kind of B2B enterprise level software. 

AJ_O’NEAL: And can you do any sort of relationships like say these comments belong to this blog post or have a security rule that anyone can leave a comment, but only the author can edit the post. 

GARETH BROWN: Yeah, definitely. I mean, it depends how you structure your database. So you could have, you can have a collection of blog posts and then a collection of users. And for each blog post document, that document might, you know, you would specify which user wrote that document. And then in your security rules, you could say a user can only modify a blog post document if they are the user that created the document in the first place. So there is a lot you can do flexibility-wise like that. But you just need to be careful, I think, of how you structure your database because it's got collection, then documents, then collection. You can kind of go very deep. And if all of a sudden you go, okay, I've got a collection of users and then a collection, the user has a collection called contents or content, for example. And then they've got different content types. And one content type is blog posts. If all of a sudden you want to display all blog posts to all users, you don't really want to have to dive into each user document and go down the content level just to get the blog posts. And so it does give you that flexibility to flatten out the database structure, almost use it, you know, in closer to kind of a relational database type pattern where you might just have a blog post collections. And so that is your blog post database and then a separate user's collections. And then you can connect the two, um, just using data. 

AJ_O’NEAL: And would it automatically sanitize HTML and, and scripts to make sure that like that stuff doesn't get saved so that you don't accidentally pull it out and then cross-site inject yourself. 

GARETH BROWN: Yeah, I don't. I don't think it does. I think if you save, if you save a string, it'll just save the string that you've sent it. So I suppose that's something you would have to do on the front end. I'm not sure if you could do that with security rules. I think the security rules are quite flexible, but I'm not sure if you could do that. 

AJ_O’NEAL: Needs regular expression support, huh Steve? 

STEVE_EDWARDS: Yeah, sure. Yeah. Whatever you say. We love Redaxes. 

GARETH BROWN: Is that the Zargo? Zargos?

STEVE_EDWARDS: No, we had a conversation about regex's and how much we all love them a couple of weeks ago. And so that's what he's referring to. 

GARETH BROWN: Okay. Cause I heard, I think one of the podcasts recently, you were talking about the, um, in the picks, the stack overflow response to passing HTML with regex. 

AJ_O’NEAL: I did pick that. Yes. 

STEVE_EDWARDS: Oh yeah. 

AJ_O’NEAL: And it was, and it was related to this ongoing string of regex nonsense that Steve and I have been passing back and forth through each other. I'm pro regex. I think everybody should learn a little regex, you know, enough to be able to do a match an email address or, or find phone numbers on a webpage. Steve. 

STEVE_EDWARDS: Yeah. No, I don't disagree with that. I use them now and then when I have to, you know, for, for small things like that, matching things. Um, I'm just not quite as big a proponent of them as AJ is. I suppose if I was- 

GARETH BROWN: It could definitely improve more regex. 

STEVE_EDWARDS: Yeah, I suppose if I was more proficient at writing them then I would be a bigger proponent. But I'm just, let's just say for me, I'm not, I don't use them a lot. Not that they're bad, I'm sure there's people that do awesome things with them, but anyway. 

AJ_O’NEAL: Sorry, we can't all be perfect, Steve. 

STEVE_EDWARDS: I know, I know. I'm always trying to measure up to you, AJ. 

AJ_O’NEAL: Well, that's hard, I'm six foot five.

STEVE_EDWARDS: Okay, so let's move on a little bit and talk about some real uses of this. There's a video that you had linked to that would look like it was a what's new in Firebase keynote at Firebase Summit and mentioned a number of companies that are using Firebase in their applications. Do you want to give us a rundown of those, Gareth? 

GARETH BROWN: Yeah, I tried to do a bit of research to find some companies that were actually using Firebase and it was a bit difficult to find. However, until I found that video, which, which gave some more up-to-date information, because the details I found were a few years old, I think. But the companies have referenced at least recently are like the New York, New York Times, Alibaba. I looked into the Alibaba thing more and I think they've used the, um, Firebase messages to kind of send out text messages to users. Um, they've also referenced Travago, Lyft. The Economist and Forbes. It would be good to find out more details kind of about how they've used it. They also referenced a company called ClassKick, which looked like a service to help teachers teach kids, which had a kind of an online element. So they kind of mentioned in this video that ClassKick needed to scale up very quickly after the coronavirus lockdown stuff that's been happening this year and they were running the real-time database initially. So I suppose something like if you've got an app that teachers want to interact with their kids, you know, you can imagine there's going to be lots of messaging and kids will be working on stuff, maybe want to ask the teacher a question. So that's where I think that something like the real-time database would come in handy and be perfect because it's just going to give you those real-time updates. So yeah, that were the companies I kind of found who were using it. Certainly chat apps is definitely the first example of a use case just because of the real-time nature of the databases. I think the first side project I worked on was I call it simple class list. And it was basically teachers could create a list of their students and then create a class list. So maybe they want a spelling test list to show which students have completed the spelling test. So they could create a new list and the students would automatically be there. And you could kind of tick the students off or change the colors of the student boxes. And then that would all update in real time with the idea being that if you were working with another teacher, you could check the list off and then the other teacher would just instantly see what you've done. You know, it's like when I go shopping and me and my partner share the shopping list and try and divide and conquer. So if I find something, I tick it off and then she can see what I've got. 

STEVE_EDWARDS: Yeah, so this is that simple classlist.com. So is this just sort of a little demo thing that you've got out there, or is this like a real app that's being used by teachers in various places? 

GARETH BROWN: It's just the demo thing I've got. However, it is a real app that could just be used right now. I'm very good at having creative ideas, I think, and then building them. But then as far as marketing and promoting, anything goes. That's kind of where I fall down. 

STEVE_EDWARDS: Well, that's really strange because I don't know of any other devs that have that same problem. Do you AJ? 

AJ_O’NEAL: No, everything that I create is an instant marketing success. 

STEVE_EDWARDS: Yes. 

AJ_O’NEAL: And I never get my post removed from Reddit because I don't get Reddit. 

STEVE_EDWARDS: Yes. Yeah. As devs we're very great at making stuff and yeah, the marketing stuff, not so good. There are some that are very good about it, you know, better than others, but, uh, but yeah, that's, I mean, that's great that you, you have that example. So with all of your practice, you obviously got picked up by Manning. Or I can't remember did you I can't remember if you told the story about how they found you before or during when we were recording. 

GARETH BROWN: Yeah, I think I did a bit of both. But I got Yeah, basically just to talk at a local meetup, which ended up on YouTube and and initially they asked me to review a, like another author's proposal for a book on Firebase. It was very mobile-focused. And I think some of my feedback was, you know, could you talk about the web more? Cause I'm a web developer and I would like to hear about that. And then they contacted me and asked me if I was interested in doing a book or a video course. And so I said, I'd be happy to do a video course. 

STEVE_EDWARDS: So building web applications with Firebase is available on the Manning site and we will link that in the show notes. So can you tell us a little bit about your course? What kind of topics that you cover? Demo apps you do, that kind of stuff? 

GARETH BROWN: Yeah, so I really focus the course on, I suppose, probably primarily front-end developers who I think would be the people most interested in it, but also front-end developers who are kind of maybe newer to front-end development. So while there's some things I assume knowledge of such as, you know, how to install an NPM package, I still do start at quite a simple level. So it should be quite accessible for people, even at a lower ability level. I've just built an app using just plain JavaScript. So there's no front-end frameworks, again, just to focus on the actual Firebase implementation. And I basically ran the course the same way I like to do courses, which is really to go through a course and throughout the course you build an app. So there's an app we build called SoundChat. And the idea is you can upload an audio file and then people can listen to your audio file and chat about it. So write comments and of course that implements the real-time updates of the comments. As far as services we look at, it's basically kind of what I mentioned before, where you authenticate users using social media and email, then use Firestore for all the user details and the information about the music they're uploading implements cloud storage where they can store the audio files and just shows you how to host it on Firebase. So again, I've tried to my approach, I had the philosophy of keep it as simple as possible. And there are some things I use, for example, I use parcel to bundle the files, but I don't go into detail about parcels. So there's some things that will there'll be code there, where I just, you kind of expected to just write the code and trust that it works even without understanding it. And that's basically because I've just focused on the actual Firebase implementation of things. 

STEVE_EDWARDS: Yes, I'm sure there's other training out there on partial that you could reference. But yeah, I like that idea of just staying focused. And you see, I guess the correct term is vanilla JavaScript. That's non-framework based. Which to me is a good thing because you're gonna open it up, you know to many more developers by doing that. Because for instance, if I was to see a course that, yeah, we're going to build Firebase, we're going to build with React, I'd be like, oh, dang it. I want to do that, but I don't know React. So that'd be much harder for me. But I like that idea of just using Vanilla JavaScript to focus on what you're doing. 

GARETH BROWN: Yeah, yeah. And the idea is as well that you can take the functions and just lift and shift straight into your Angular app or React app and just use the same functions but with different UI framework. 

STEVE_EDWARDS: I think that's everything we have. Is there anything else you wanted to cover about Firebase, Gareth, before we head into Picks? 

GARETH BROWN: No, no, nothing I can think of, just to recommend for people to have a look at it. Google does have plenty of good documentation and code labs that, you know, take half an hour, an hour to kind of run through to get up and started and just see what you think of it. 

STEVE_EDWARDS: Right on. So I've noticed along the route of Shameless Plugs that you have a blog post about building a notes API with Firebase Functions. That sounds like a little more outside of what your main course is. 

GARETH BROWN: Yeah. 

STEVE_EDWARDS: A little more advanced. 

GARETH BROWN: Yes. Yeah. I kind of looked at it as, you know, if you wanted to go the next step and look at cloud functions, then, you know, I wanted to give people that option. But I think this is a blog that I, my first post was maybe a year and a half old. And then just recently I've decided to actually publish it and try adding content. So hopefully I'll be adding to it a bit more often. 

STEVE_EDWARDS: Excellent. All right. Well, with that, we will move into pics. 

Hey folks, this is Charles Maxwood and I just launched my book, the Max Coders Guide to Finding Your Dream Developer Job. It's up on Amazon. We self-published it. I would love your support. If you want to go check it out, you can find it there. The Max Coders Guide to Finding Your Dream Developer Job. Have a good one. Max out.

 

STEVE_EDWARDS: And today we will start with sir AJ. 

AJ_O’NEAL: My, my daughter, I'm trying to raise her up in the right way, you know, and she's young and impressionable and there's just so much out there. So I decided to get her a Zelda plush doll and, and we've taught her, you know, what different things say, like the monkey says, E E and she loves that. She's just crazy about that. Um, but you know, it's Zelda's kind of hard because well, what does Zelda say? Right. Cause link says, what does Zelda say? Well Zelda just kind of sings, you know? Ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah, ah,. But I guess Zelda counts too. Yeah, yeah. So I got the Link plush and the Zelda plush and the Bo-Koblin plush on the way. It turns out, you know, oh, I like to have official stuff but I actually decided to get the Bo-Koblin off of AliExpress because it was like half the price. And I don't know that any of us will ever tell between the real authentic Nintendo logo and the fake one. Then I, uh, you know, a while back, I talked about GameCube and getting homebrew on it and being able to use it for like the Game Boy players. You can play the Game Boy, Game Boy advanced games and, um, uh, like do emulation on it. And just like the GameCube is an amazing console and has HDMI out. So it's basically the best retro console in existence. Um, cause you know, it's got HDMI can do all these things. Anyway, I finally made a video. Um, detailing everything, literally everything in six minutes that you need to know about GameCube and Bruce. So if you've got a GameCube or you're contemplating why in the world would you get a GameCube? Cause you totally should. I've got that for you. And then, uh, other than that XZ utils. So GZip is great and BZip and a lot of the other things we've got broadly and Gosh, snappy, you know, we got, we got a ton of compression algorithms that are for streaming, which is well, broadly is not actually necessarily for streaming. Um, but it, it, it can be used on a web server. We have static assets and you, you, you know, what the compression ought to be ahead of time and it's pretty good at decompressing and all that. But anyway, um, XZ is, is the type of compression that you need for things where you got repetitive data across multiple files, which is not what GZIP and BZIP and most of the other ones are good for. Cause most of those typically you're looking at, you're just looking at a window of data and saying like, how can I compress this data compared to the next 64 kilobytes of the data? And XZ is a compression that will span, I think up to, well, it's LZMA is actually the algorithm. XZutils is the tools that you use, but it will. It will search across, I think the maximum is four gigabytes of data at a time. So if you want to compress something for cold storage or archival purposes, and it's like software or games or something like that, um, XZ is a great way to. Uh, compress it. And, uh, it was previously not available, uh, as easy to download static builds, but I made it so, so. And of course that's on web install.dev slash XZ. So those are the things I got to pick for this time around. 

STEVE_EDWARDS: Fabulous. So I'll go next, save the guest for last. And being a sports person, there's many different avenues out there on the web TV, et cetera, for following sports. And if you're into the scores and the games or sports talk, which I listen to a decent amount. Um, so one that I've discovered lately that I've really enjoyed listening and reading is, uh, called out kick, uh, the, the longer term outkick.com is a website, but it's, uh, out kick the coverage, which is a football term, a couple of guys, Clay Travis, and then a guy named Jason Whitlock has recently come over there who had previously been at ESPN and at Fox sports, um, definitely on the more conservative side of, of things. And they don't necessarily restrict themselves to just sports. But I've enjoyed listening to the podcast and I know Clay does some interviews with various people and I forget what the podcast is called. But anyway, Outkick.com and there's various properties and I'll put some links in the show notes. Gareth, what do you have for us today? 

GARETH BROWN: Yeah, so I prepared for this. So I'd have some picks but my sister recently recommended a podcast called Rabbit Hole which is put together by someone from the New York Times. And it's all about the YouTube algorithm that gives you suggestions for other videos you might wanna watch. And basically this guy, I think he's also started the YouTube channel himself, but he said that he was radicalized by the YouTube algorithm. And it's kind of around the idea that of one, how addictive YouTube is because you will keep getting recommended things that YouTube knows you're going to want to click on to watch. Um, but also this idea that if, if you watch one video with one view, like a political view, for example, it will then, or a conspiracy theory view they talk about as well, then all the other recommendations are going to be videos about the same view with also the kind of the same attitude towards that view. So it's very easy to start clicking on one video after another video and have the same information kind of pushed onto you. And it kind of can lead to polarization and people kind of having more extreme views and also just kind of, you know, wanting to continue clicking on more and more videos. So that was really good. I'm only halfway through it. And...There's also two shows on Netflix. One's called The Social Dilemma, which is similar in that it has the effects of social media on young people and adults and everyone who uses social media, which we're pretty aware of. But it seems recently I've seen a few things where they start to talk about the effect, the addictive effect, the effect on people's self-esteem and things like that. Um, so that's worth watching on Netflix. And there was another one very similar called screened out, which was about, um, same kind of things. So the effects of screens on people's lives and, um, you know, their communication with friends and family and things like that. So they are my picks. 

STEVE_EDWARDS: Yeah. I think Caleb Kane is that's the name you're looking for with the rabbit hole. 

GARETH BROWN: Yeah, that, that name does sound familiar. So that could be it. 

STEVE_EDWARDS: Yeah. And then, uh, the network one on Netflix, my daughter watched that. And I've seen bits and pieces of it, and I've heard it mentioned by many, many other people, just as a really good show to watch. And it's, you know, what you say about, for instance, the YouTube recommendations, I've noticed the same thing. And so I know when I go to YouTube myself to watch a video, whether it's, you know, usually developer related stuff, or you know, sports highlights or something like that. I'm pretty careful not to get sucked down that rabbit hole because I see that, you know, the recommended ones. And once in a while, I'll see something, you know, if I'm watching a comedian, a comedy routine from the past or something like that, I'll find some other related stuff. But I specifically avoid going down that rabbit hole of their related suggestion, just because I don't want to get sucked in and waste my time for one thing. But two, I just rather find what I want and go from there. 

GARETH BROWN: Yeah, definitely. I think I turned off my Instagram notifications after watching the social dilemma. Oh, I don't have a bit more. 

STEVE_EDWARDS: Yeah, I don't have any. I don't have any notifications. One, I just can't stand more notifications than I want on my phone anyway. But two, yeah, the social media stuff is just is too easy to get sucked in. Today I had to personally just logged off of Facebook. I usually have like a littleI'm sure it will make you very wealthy and rich as most book authors and course creators will tell you. But yeah, thanks for coming on and we'll see everybody next time on JavaScript Jabber. 

GARETH BROWN: Yep. Thanks for having me. 

AJ_O’NEAL: That's cause what we do on the podcast is we see people. 

 

Bandwidth for this segment is provided by Cashfly, the world's fastest CDN. Deliver your content fast with Cashfly. Visit c-a-c-h-e-f-l-