The easiest realtime app I’ve ever built

Key Takeaways

I've been working with spill kits a lot lately and it inspired me to build a library for Firebase called svelt fire or more accurately update a library that I built a few years ago I tried to avoid building new JavaScript libraries unless absolutely necessary but in this case there was an opportunity to make building real-time apps so much easier that I just couldn't resist here I have a real-time app that has user authentication with a blog post owned by a user along with real-time comments nested below it and believe it or not I wrote all this code entirely in the HTML when you combine spelled stores with slot props it's crazy how much you can accomplish like we can declaratively combine multiple real-time data sources and whenever a component is destroyed it will automatically unsubscribe from that data source eliminating the need for you to write a bunch of ugly code like this to do it manually in lifecycle hooks in today's video I want to break down how I built this library to show you some Advanced felt Concepts that might change your life in your own projects so the first thing I found myself doing in my own projects over and over again was putting Firebase data into svelte stores one issue that with real-time data is that you need to unsubscribe when it's no longer needed otherwise you'll have a bunch of unnecessary reads to your database that aren't being used by the UI normally you'd want to do that during the on Destroy lifecycle hook however this code is very ugly and can be problematic if you want to use the same data source in multiple places to address this problem I built a custom spelled store well three of them actually one for the current user one for a collection and firestore and one for a single documented buyer store a custom store is just a function that returns an object with a subscribe method on it to implement the user store we use the built-in writable store from svelt and set the Firebase current user as its default value now things get interesting in the second argument where we have a function that can send notifications or new data to the store in this case we want to listen to the on off State changed event in Firebase to update the store whenever the user signs in or signs out in addition though we can also return a function here which will be called when there are no more subscribers to the store in that case we no longer need the Firebase current user so we call its unsubscribe function now this is super useful because you can use this store anywhere in the application and subscribe to the current user and Firebase by simply putting a dollar sign in front of it the logic for collections and documents is basically the same but I've included some additional magic to automatically unwrap the data and include the document ID you no longer have to map each snapshot to the data which is one thing that's always annoyed me about the Firebase SDK and another issue I have with Firebase is that they make it hard to pass a generic to your unwrapped data in my library you can pass in a generic interface to get intellisense on the data fetch from the database that means if you're using typescript and you subscribe to a store that has a generic you'll always know the shape of the data that you're working with the last thing I want to point out is that this Library doesn't do data fetching on the server however you can pass it a start with argument that will initialize the store with some data that you fetched on the server data fetching with Firebase on the server is actually a lot easier and I didn't really feel like there's any opportunity to improve it with this Library that's it for our stores and we can use those throughout a spelled application but things get incredibly simplified when we we abstract these stores into a spell component the user component is only 19 lines of code it simply takes that user store subscribes to it and if the user is logged in it displays the default slot otherwise it has an additional slot for signed out UI what's really important here is that the default slot has a user slot prop this allows you to access the user data directly in the HTML in other components and you'll also see I have this Cash Money Slots interface up here which is a special interface in svelte that allows us to strongly type that slot prop so you get intellisense as well what makes this so magical is that you can have this user component in your UI somewhere then take the user ID from that slot prop and pass it down to another component like a collection to fetch a bunch of relational data for that user more on that in just a minute but one other thing that annoys me about Firebase especially the version 9 SDK is that you need to pass the auth and firestore instances to almost every function that you use to get rid of that requirement I built a Firebase app component that provides firestore and authors contacts to all of its children most applications only use one Firebase project and this is just one more step we can use to simplify the code now finally let's take a look at our document and collection components they work just like the user component the default slot shows the data from the store while the other slot shows loading UI on the default slot we have some additional props like the document reference itself and for collections we can also show the length of that query which is a common thing you'll want to do in the UI the only thing I'm disappointed about with this component is that I wasn't able to figure out how to get a generic to work reliably in the components it is possible to use generic's in-spell components but I had a hard time figuring out how to do it elegantly in this Library I'm open to ideas if anybody out there wants to contribute so those are the main building blocks of svelt fire another cool thing I want to point out though is that I built it with spelled kit which has a new built-in Library package template thing this is really cool because you can develop your library in the lib directory and then test everything out on the routes to wrap things up let's build a full stack app with spelled fire in about 30 seconds add the Firebase app at the top level then check to see if the current user is logged in if they are signed in we can grab a document Associated to that user ID the data is available as a slot prop that we can rename to post now that post might have a nested sub-collection of comments which we can then Fetch with the collection component the data is an array of real-time comments fetched from the database and we're done that actually only took 20 seconds and I think that's the easiest real-time app I've ever built in my life at this point spelled fire is just experimental but I'm hoping you learned some patterns here that you might be able to apply in your own project if you're a fireship pro member I'm working on a full spell kit course that will go into stuff like this in far greater detail and that should be available in about a month or so I also have a new stripe course that's almost finished so stay tuned for that as well thanks for watching and I will see you in the next one