Improved Querying and Offline Data with AngularFirestore
The Firebase team is launching a brand new a fully-managed NoSQL document database: Cloud Firestore, and we’re happy to announce full support in AngularFire.
Cloud Firestore provides powerful querying, offline enabled SDKs, realtime data synchronization, and all at global scale. Read more about today’s beta launch on the Firebase blog.
AngularFire, meet Cloud Firestore
AngularFire is the official Angular library for Firebase. AngularFire combines the power of Angular, Firebase, and RxJS to act as your serverless backend. It includes modules for the Realtime Database, Firebase Authentication, and now we’ve added Cloud Firestore to that list.
The AngularFirestore module provides observable streams from Cloud Firestore that are easy to integrate with Angular. These can be used in Animations, Forms, the Router, and more.
Adding AngularFire and AngularFirestore to your project is easy. Install Firebase and AngularFire from npm:
npm i firebase angularfire2Then add it to your NgModule:
In your component you can use the AngularFirestore service to create realtime observable streams of data.
The .valueChanges() method returns a synchronized array of JSON objects. Whenever local or remote data changes the template updates automatically.
Collections and Documents
The Firebase Realtime Database is a JSON data store. Reading data at a path brought back the entire tree below. This lead to a best practice of flattening your data. Cloud Firestore improves on this structuring.
Cloud Firestore follows a Collection > Document > Collectionstructure. Collections are a list of related documents and documents can have sub-collections. Reading a collection only brings back the documents and not any of their possible sub-collections. This structure allows you nest data without bandwidth worries.
Improved querying
Querying is one of the key features in Cloud Firestore. You can query a collection using multiple document fields.
Running compound queries requires an custom index. However, making these indexes is easy in the Firebase Console. Without an index the SDK will throw an error at runtime and this error contains a link that will automatically create the index for you.
Offline enabled SDKs
Previously, if a user lost internet connection in an AngularFire app it wouldn’t be able to persist any offline changes across a refresh. With AngularFirestore you can enable offline persistence with one line of code.
Offline data access is a key component of Progressive Web Apps. Combine Firestore’s offline data with a Service Worker and Firebase Hosting’s automatic SSL to make the foundation of a PWA.
NgRx friendly
For those working with complex data structures or NgRx, AngularFirestore has a set of methods for you.
Actions in Redux are a powerful way to express state changes in your app. They use a uniform interface that expresses “what happened” in the application’s state. AngularFirestore ships with a set of methods that return actions describing the state changes in your application.
The .stateChanges() method emits an array of actions as they occur. Which makes it easy to dispatch these actions to the store. There’s also the .auditTrail() method which gives you an entire replay of your state, which is great for debugging.
From there the possibilities are endless. You can take this information and create any structure in your NgRx Store.
How are AngularFireDatabase and AngularFirestore different?
Cloud Firestore is a brand new database. We built it to address the limitations of the Firebase Realtime Database: data structuring and querying. We’re still committed to developing both databases and they both shine in different use cases. You can read an in-depth comparison of the two databases here.
These new features inspired us to build a new API. To make things easy for developers of both databases we implemented this API across both modules. AngularFire 5.0 ships with both APIs for AngularFireDatabase and AngularFirestore.
Get started and even contribute!
Get started by checking out our Github repo and the official documentation. AngularFire, the Firebase Database SDK, and the Cloud Firestore are each open source projects. If you want to get involved in the project make sure to check out our open issue or file one yourself!
