RxFire - Firebase meets RxJS

Key Takeaways

[Music] one of the biggest challenges for web developer is to maintain asynchronous callback based code in firebase everything is real-time so it only makes sense that we use the best reactive programming library out there which is rxjs in today's video you'll learn about a brand new officially supported library from firebase called rx fire we'll use it along with stencil Jas to compose full stack reactive web components that can be used in any JavaScript framework or just in some plain HTML if you're new here like and subscribe and grab the full source code from angular firebase.com let's start by talking a little bit more about what rx fire is and when you would want to use it the first thing I'll point out is that it's not a replacement for angular fire - so you want to continue using angular fire - in an angular project but it does provide a way for other frameworks to have a consistent implementation of firebase with rxjs so you can get really good control flow on your real time streams whether you're using view react stencil as we'll see later in the video or just plain JavaScript I recommend taking a look at the RX fire samples repo so you can see it in action in a variety of different settings and another really cool thing about this library is that it doesn't take the firebase SDK as a hard dependency which opens the door for lazy loading the firebase SDK is pretty large so if you can get it out of your critical path you'll get much quicker page loads for your progressive web app so what I want to show you today is how we can take this library and use it with a web component tool like stencil j/s to build a reusable to-do list that you can just drop into any other app that's already using firebase there's a ton of potential here to build web components that get reused across multiple applications for example you might build a chat client that is similar to intercom or maybe you just want to have a consistent login button that you can easily share across multiple web applications there's just tons of potential there but it's time to get moving on to the code I'm going to start by initializing stencil if you're not familiar with stencil don't worry it's a very approachable tool for building web components I'm going to give it a dedicated video in the near future but it should feel pretty comfortable for you if you're an angular or react we just run npm and knit stencil and then we select a project name and we'll pick the starter component project which is just for one-off web components if we open up the project we should see a single component in the source directory that's where we're going to build out our to-do list for now we can run npm run start from the command line and that will serve our web component in the browser it has some basic text for now but we'll build this out into a web component that can handle user authentication and also the creating reading and deleting of data in the firestore database if we look at how this component is used across multiple frameworks you can see that it's just a script tag along with a custom element that we can declare in the Dom at the end of the video we'll build this component and then we'll install it into an existing angular project but for now we need a couple extra things in our stencil project including our Xfire firebase and rxjs we could initialize firebase directly in our web component but I want my component to be agnostic to the firebase project meaning you could just drop this component into any firebase project it should pick up the config and work seamlessly from there so to do that I'm just going to follow the web setup instructions that you can find in the official Docs and we'll only be using fire store and user authentication then in the script tag we'll just go ahead and call firebase initialize app with our credentials and then we'll also go ahead and configure fire store here as well now we'll go ahead and jump into our stencil web component and you'll notice that it looks pretty similar to an angular or react component it has these prop decorators which allow you to pass in information from the HTML directly similar to the input decorator and angular but the decorator that we want to use is state and this property will rerender the component anytime it's value changes and that's actually a really nice mechanism for working with our Xfire because every time our observable emits some new data or the data changes it will rerender the component in the UI this component will have two different stateful objects which represent our real-time streams one is the to-do list which will be in fire store and the other one is the user which is the user authentication account then we're not going to actually import firebase in this component because we don't want it as a hard dependency so I'll go ahead and run that types for firebase just for intellisense up at the top and the first thing we'll do with our Xfire is observe the user's authentication state state is just a function that returns an observable and that observable will either you met null if the users not logged in or it will emit their user off account if they are logged in then we have a bunch of different functions for working with firestore if we want to just get the raw data from the collection we can use collection data or if we want more fine-grained control there's a number of different methods that allow you to observe specific changes to the documents in your database the first thing we want to do in our component is observe the users off state stencyl has a life cycle hook called component will load which is roughly the equivalent to ng on a knit and angular so we've initialized firebase outside of this component so I'm going to declare a global variable for firebase and then type it to the firebase app this step is just so we get Intelli sense with our typescript in vs code then going down to the component we'll lifecycle hook we're going to subscribe to the off state of the firebase user and then the value that this observable emits will be the state of the user property on our component so now whenever this observable emits something it will rerender the component based on the logic that we have down here in our render function for right now we'll just inspect that we actually have a logged in user by json stringify in the user object then our component will automatically reload when we save it and you'll notice that it says hello world null that's because we're not logged in to fix that we'll go ahead and add a login and logout button to our component I'm going to be using Google auth so make sure you have that enabled on the firebase dashboard first we'll set a variable called provider that is a new instance of the Google auth provider then we can say firebase auth sign in with pop up and that's all we need to do to get logged in to a Google account and while we're at it let's go ahead and create a logout method that's just a single line of code saying firebase auth sign out the next thing we want to do is rewrite this render function so that if the users logged in we show them the to-do list and a sign out button otherwise we show them the with Google button in TSX we can handle events such as clicks by saying on click followed by brackets and the method that we want to call in this case login if the users logged in we'll go ahead and show them their display name and we'll also give them a button to log out if we go back to the app now and click the login button you'll see that firebase does its thing with a pop-up window for Google authentication then when that off-state changes it will rerender that component to show the users display name and the logout button so basically we just created a Google login web component that can be used anywhere with any framework but I want to take things a step further and build a to-do list for this user in firestore that is only associated with this user and this is actually really easy to do thanks to our Xfire so I'm bringing in the switch map operator from rxjs then I'm making a reference to a firestore collection that contains all the - dues for all of our users we'll get to the database in just a minute but what I'm going to do is save a user property on every to-do item then I'll query it based on the user's authentication UID so we'll go ahead and create an observable that's based on the off state and then we'll switch map to a different observable of the collection and fire store when we run switch map it's kind of like being inside of subscribe so we'll have access to the user object at that point we can make a query on the reference that we set earlier so we'll create a query that says get all - duze where the user is equal to this users user ID then we can get all of that collections data unwrapped by just calling collection data with this query object and then the final step is just to subscribe to this observable and then we'll set its value equal to that to do state on the component and the last thing we'll do is go down to our render function and then just display it as JSON for now to make sure that it's working right now it displays an empty array because we don't have any data in our database so let's go ahead and change that the beauty of this setup is that our component will rerender anytime our real-time data changes we can demonstrate this by creating our - duze collection and then we'll create a document in that collection where the user property is equal to this users ID I'm just copying the user ID from the UI over to our document and as soon as we click save on this document it will be updated in the UI in our stencil component on the left and any changes that happen to this document no matter where it comes from will trigger this component to be rendered then just to prove that our relational data is set up properly I'm gonna create another document but this time give it a user that's different than the currently authenticated user you'll notice that nothing renders in the UI because our query is based on only the to Do's for the currently logged in user another thing our expire does is it tries to make life easier for you for example a common need is to have the document ID map to every document in the collection normally that takes a bunch of JavaScript mapping but in our Xfire we can just pass in the field that we want the ID map to and it will return that data for us without any additional work now we can go back into our render function and this time we'll loop over the array of documents and map each one of them to a list item and you'll notice that I have a property on this list called task ID which is what I defined in that collection data method above and the reason you give it your own custom property name instead of just ID is in case you already have an existing ID that you don't want to overwrite I've also added a create and delete method here which you can find in the full source code and our finished product looks something like this it's not very pretty from a design standpoint but it's a real-time full stack web component which is pretty impressive on its own but I promised you that we'd be able to run this web component anywhere and the first step in that process is to run a production build and stencil the stencil project itself sets you up to build an NPM package that you can either install locally or publish on NPM after our build is finished we'll go ahead and copy the path to this project folder and then we can use that path to install an NPM package in a completely different project I happen to have an existing angular project that has angular fire to and firebase already installed in it but I'd like to reuse my stencil to do lists because I've already written this code and I don't want to have to rewrite everything in angular so let's see if we can make our stencil component work in this angular project the first thing you'll do is run NPM install in the angular project and have it point to the path of your stencil project if you didn't change any of the defaults that should resolve to 8 my component version 0.01 in angular we have to enable that custom element schema so you can import that from angular core then add that to the schemas array in the app module the final step is to bootstrap the custom elements in this project by calling define custom elements which is provided by stencil we can handle that in the main TS file so we'll import defined custom elements from my component and then we'll also register firebase on the window object so it's available there as well and lastly we'll call defined custom elements and pass at the window at this point we can use our web component anywhere in this angular project as if it was just a regular Dom element I'm just going to go ahead and declare my component in the app component HTML and we'll see what happens as you can see here we have our login with Google button and once we log in we get our to-do list from the database so hopefully this video gave you a decent introduction into how easy it is to work with real time streams when you combine rxjs with firebase I'm going to go ahead and wrap things up there but I have a lot more content plan for our Xfire and stencil in the future let me know what you want to see next in the comments and consider upgrading to a pro membership to get access to all kinds of exclusive content thanks for watching and I'll talk to you soon