You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
Contents
Recent Posts
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- The Real State of JavaScript 2018
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Firestore With AngularFire5 Quick Start
Episode 53 written by Jeff DelaneyIn this lesson, we are going to use the brand new Firestore NoSQL Database, along with the AngularFire library to perform querying and basic write operations.
Firestore vs. RealtimeDB
Firestore, in many ways, is very similar to the RealtimeDB. It answers the same fundamental question of Where do I save my data?. Firebase wanted to address some the data structuring and querying problems that have annoyed developers. But rather than rebuild the existing API and migrate billions of data points, they added Firestore as an alternative database option in the current platform. I recommend reading this detailed comparison from the Firebase blog.
The jargon is different, but they are both NoSQL databases. Here’s a translation.
- Firestore ≈ RealtimeDB
- Collection ≈ List
- Document ≈ Object
- Id ≈ Push Key
My Initial Impression of Firestore
Very positive. I wrote an entire post about multi-property data filtering will be made partially obsolete by Firestore - but I couldn’t happier. The query language for the RealtimeDB is hard to work with and Firestore will completely fix that problem. Furthermore, we don’t need to think about global database denormalization anymore - the single most confusing area for developers new to Firebase.
Firestore Pros
- Expressive queries with
where
. - Ability to query nested data independently.
- Improved management of data relationships.
- Cool interface on the Firebase console.
- Automatic and manual indexing.
Firestore Cons
- Confusion over which database to use
- Slightly higher latency on queries (in my experience)
- Potentially higher usage costs
Overall, the pros easily outweigh the cons and looking forward to building stuff with it.
Upgrading to AngularFire5
At this point, I am assuming you have an Angular project with AngularFire installed. If starting from scratch, follow the official setup guide.
1. Update AngularFire to v5
Update AngularFire2 to AngularFire2 v5
Be careful if working in an existing project as the new AngularFire v5 contains breaking changes. Your existing database code will not work, but you can access the old API via database-deprecated
.
Run the following commands, then double-check that angularfire2 is at least version 5.0.0-rc.1
or higher in the package.json
file.
npm uninstall angularfire2 |
2. Include a Project ID
Update your firebaseConfig. It is now necessary to have a projectId
when initializing firebase, so make sure it’s included in the config object.
export const environment = { |
3. Import the Firestore Module
Then make sure to import the AngularFirestoreModule into the NgModule that will be using it.
// ...omitted |
Single Most Important Change in AngularFire v5
Here’s how we would get a Firebase list or object in past versions of AngularFire
const list: FirebaseListObservable<Item[]> = db.list('items') |
In new versions, the Observable
is decoupled from the firebase reference (This is true for both Firestore and RealtimeDB).
const collection: AngularFirestoreCollection<Item> = aft.collection('items') |
Documents
Firestore Document ≈ RealtimeDB Object
A Firestore document is a its own self-contained tree, so there is less need to flatten or denormalize the entire database. You will still need to think about making documents flat and efficient, but not at the global database level.
Access a Single Document
const document: AngularFirestoreDocument<Item> = afs.document('items/' + someDocId) |
Querying Collections
Firestore Collection ≈ RealtimeDB List
Collections are just containers of documents. They have their own query methods that are way more developer-friendly than the realtimeDB. Here are some of the cool things you can do that were previously difficult
// Order ascending |
There where method
The where
method makes it convenient and expressive to make queries. It takes three arguments (1) the property you want to filter by, (2) a logical operator, and (3) the value. Here are a few examples:
// Get items by equality to a property |
Offline Data
AngularFire has made it incredibly simple to implement offline data into an app. This feature is in an experimental phase, but is expected to work consistently on iOS, Android, and most web browsers (Chrome, Firefox, and Safari).
All you have to do is add enablePersistence()
to the import in the NgModule and you’re good to go.
@NgModule({ |
Up Next
I am very excited about Firestore and will be revising many of my past realtimeDB videos to use this new technology.