Akita and Firebase — a Match Made in Angular Heaven
So you’re a big fan of Firebase, but you also want to start working with Akita (or vise versa). How do the two play together? As it turns out, very well 😁 This is due to the fact that both have a lot in common: They are both observable-based, robust, well-documented solutions in their respective areas.
In this article, I’ll show an example of managing a bookstore inventory using Akita with AngularFire, the official Angular library for Firebase. It assumes that you have some working knowledge of Akita and Firebase. If not, please start with the Akita basics / AngularFire basics.
Step 1: The Book Model
We’ll start by defining what data we want to use to describe a book. In this case, it’ll be simply an id and a title. AngularFire will automatically generate the id.
Step 2: The Book Store
The next step is to create a store that’ll serve as the ‘single source of truth’ for the books inventory. Akita schematics will allow us to generate the basic entity store, and that contains all the functionality we’ll need to manage it.
Step 3: The Book Service
This is where Angularfire comes into play — the service, which will be in charge of populating and updating the store, will contain a reference to an AngularFirestoreCollection, which it gets via the AngularFirestore. That collection will serve as the data layer of our bookstore.
Step 4: The Book Query
Finally, to query the contents of the store we need a query. Once again, the built-in methods in Akita give us all the functionality we’ll need, so no additional functions are required.
Step 5: The Component
Finally, we‘ll create a component which will allow us to add or modify books in the inventory via the service, and list them via the query.
In Summary: You can easily combine Firebase with Akita as a streamlined solution for data storage and state management via observables. The interaction with Firebase in the Akita pattern in done via the service which populates the store.
New Angular Meetup in Tel-Aviv
We’ll be hosting a meet-up entitled “Kickass Angular” where we’ll be showcasing the cutting edge technologies we use/have come up with. You’re welcome to join us if you’re in town 😀 Signup here to reserve your seat!
Here are some more articles about Akita:
Follow me on Medium to read more about Angular, Akita, and JS!
