Getting started with Angular and Firestore

Hi again, in this post, I’m going to talk about my experience with the new Firebase database service called Cloud Firestore, and you’re asking whats it’s the difference with the current Realtime Database service(RTDB)?, First let me explain what is in summary, cloud firestore is a document database, that means it kind of stores your data in a big tree like structure, a bit like the original real time database but everything is placed into documents and collections, you can think a document is something like a javascript object.

You can jump to the code part and skip definitions

Following another differences:

Data model: The RTDB stores data as one large simple tree, it’s easy to store but is complex and harder to organize at scale. Firestore store data in documents organized in collections, similar to JSON objects, is easier to organize at scale, using sub-collections within documents, requires less denormalization and data flattening.

Realtime: Boths are real-time and support data storage for offline mode.

Queryng: The RTDB have deep queries with “limited sorting and filtering functionality”, you can’t sort or filter on a property in a single query, these queries are deep by default, and always return a entire subtree. Firestore have Indexed queries with compound sorting and filtering, you can chain filters and combine filtering and sorting on a property in a single query, write shallow queries for subcollections (you can query subcollections within a document instead of an entire collection, or even an entire document), the queries are indexed by default (query performance is proportional to the size of your result set, not your data set).

Writes and Transactions: RTDB have basic write and transactions, write data as an individual operation. Firestore have atomic write and transaction operations, if you want to write data in bulk it has the batch operations.

Scalability: RTDB scaling requires sharding (scale to around 100,000 concurrent connections and 1,000 writes/second in a single database). Firestore scaling will be automatic.

Security: RTDB needs cascading rules that require separate validation (Read and write rules cascade), you need to validate data separately using the validate rule. Firestore is simpler, more secure for mobile, web, and server SDKs, the rules don’t cascade unless you use a wildcard, data validation happens automatically, rules can constrain queries.

After of all this definitions, here goes to code:

Adding AngularFire and AngularFirestore to your project is easy. Install Firebase and AngularFire from npm:

npm i firebase angularfire2 --save

Then add it to your NgModule:

For this example, we’ll use book.service.ts file, where goes the business logic:

In the previous example, you noted that in the method create() I set the constant id the value returned by the method createId(), this is a new feature to get an Id for the record, later you can set the data with the method add(id) that receives the previous constant id as a param.

The next and for me, the most important feature, querying collections with the where() identificator function, also you can query a collection setting multiple fields to search, you can see this implementation on the getByFilters(…params) method.

And now the RxJS part, we can use the usual valueChanges() and snapshotChanges() methods of RTDB, it works in the same way:

Firestore has two more methods for state data changes:

• The stateChanges() method emits a synchronized array sorted in query order. Which makes it easy to dispatch these actions to the store:

• The auditTrail() method collects each change in an array as they occur, that is great for debugging:

The console.log in both cases returns an array of objects, with a type and payload by properties:

This is all for this time, in future posts, I’m going to the explore other features of Firestore like offline data management, thanks for reading.

For more info on the topics discussed:

• AngularFirestore Github Site.
• Firestore Official Site.