Search Lessons, Code Snippets, and Videos
search by algolia

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

  1. Principles
    1. Common Techniques
  2. Build Reactive Firebase Web Components with Stencil
    1. Initial Setup
    2. Google OAuth with RxFire
    3. Adding a ToDo List for the Current User
  3. The End

Recent Posts

X
#native_cta# #native_desc# Sponsored by #native_company#

Introduction to RxFire - RxJS for Firebase

Episode 131 written by Jeff Delaney
full courses and content on fireship.io

Source code for Introduction to RxFire - RxJS for Firebase on Github

Maintaining async callback-based code is one of the most challenging tasks a developer will face. Over the past few years, RxJS has become the leading tool for reactive programming in JavaScript, so it only makes sense that Firebase would leverage it to make realtime streams more developer-friendly. In the following lesson, you will take an early look at a new officially-supported library called RxFire.

Principles

  • Not a replacement for AngularFire2 in Angular projects.
  • Ideal for projects using Firebase and RxJS.
  • Uses pure functions that return Observables.
  • Makes Lazy Initialization possible.

The first requirement Firebase and RxJS as peer dependencies. 

npm i rxfire firebase rxjs

Common Techniques

There is a repo dedicated to RxFire examples that you should clone to see it in action in a variety of settings.

Let’s start by looking at some isolated examples of the most common tasks you might perform with RxFire.

Observe the auth state of the current user

import { authState } from 'rxfire/auth';
const auth = firebase.auth();

authState(auth).subscribe(user => console.log(`hello ${user.displayName}`))

Query a collection from Firestore and get an array of data & IDs

The collectionData function takes a query, then returns the snapshot mapped to a plain object. You can also get the documument IDs by simply passing a string as the second arg. 

import { collectionData } from 'rxfire/firestore';
const db = firebase.firestore();


const query = db.collection('animals').limit(5);

collectionData(query, 'id').subscribe(animals => console.log(animals));

Upload a File to Firebase Storage

import { put, getDownloadURL } from 'rxfire/storage';
const storage = firebase.storage();

const ref = storage.ref('images/elephant.png');
const file = new File(...);

// Start the upload
put(ref, file).subscribe();

// Get the Download URL
getDownloadURL(ref).subscribe(url => console.log(url))

Switch to a Different Observable Stream for Relational Data

Let’s imagine we have one document for an Animal and another for its feeding schedule. We need to read that animal’s ID before retriving the food document. 

import { docData } from 'rxfire/firestore';
const db = firebase.firestore();

import { switchMap } from 'rxjs/operators';

const ref = db.doc('animals/elephant');

docData(ref).pipe(
  switchMap(animal => {
    const foodRef = db.doc(`${foods}/${animal.foodId}`);
    return docData(foodRef)
  })
)
.subscribe(food => console.log(food))

We only scratched the surface with these examples, but that should give you an idea about how RxFire works.

Build Reactive Firebase Web Components with Stencil

Stencil is an awesome tool from the Ionic team used for composing web components. In fact, Ionic v4 is completely built by Stencil. If you’re not familiar with it, don’t feel too intimidated - it’s the most approachable way to build web components in my opinion.

Our component is a very basic todo list that requires Google authentication. And because it does not take Firebase as a hard dependency, it can work with any app that uses Firebase by picking up an existing config.

Initial Setup

npm init stencil --run

cd <your-project-name>
npm i rxfire rxjs
npm i -save-dev firebase

Our component will expect a Firebase app to be initialized, so let’s take care of that in the index.html

<head>

  <!-- ...omitted -->
  <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
  <script>
      firebase.initializeApp({
        ...yourWebConfig
      });
      const firestore = firebase.firestore();
      const settings = { timestampsInSnapshots: true };
      firestore.settings(settings);
  </script>
</head>

Google OAuth with RxFire

The @State decorator in stencil will re-render the component whenever its value changes. This works really well with RxFire because we can have our Observables tied to the component state, ensuring the latest data is always presented in the UI. 

/// <reference types="firebase" />
declare var firebase: firebase.app.App;

import { Component, State } from '@stencil/core';
import { authState } from 'rxfire/auth';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @State()
  user;

  componentWillLoad() {
    authState(firebase.auth()).subscribe(u => (this.user = u));
  }

  login() {
    var provider = new (firebase.auth as any).GoogleAuthProvider();
    firebase.auth().signInWithPopup(provider);
  }

  logout() {
    firebase.auth().signOut();
  }

  render() {
    if (this.user) {
      return (
        <div>
          You're logged in as {this.user.displayName}
          <button onClick={this.logout}>Logout</button>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={this.login}>Login with Google</button>
        </div>
      );
    }
  }
}

Adding a ToDo List for the Current User

Let’s expand the component by building a todo list for the user. Notice how we use switchMap to grab the current users uid, then use it to query Firestore for their associated todo documents. 

// ...
import { collectionData } from 'rxfire/firestore';

import { switchMap } from 'rxjs/operators';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @State()
  todos;

  @State()
  user;

  ref = firebase.firestore().collection('todos');

  componentWillLoad() {
    authState(firebase.auth()).subscribe(u => (this.user = u));

    // Get associated user todos
    authState(firebase.auth())
      .pipe(
        switchMap(user => {
          // Define the query
          if (user) {
            const query = this.ref.where('user', '==', user.uid);
            return collectionData(query, 'taskId');
          } else {
            return [];
          }
        })
      )
      .subscribe(docs => (this.todos = docs));
  }

  addTask(user) {
    this.ref.add({ user: user.uid, task: 'blank task' });
  }

  removeTask(id) {
    this.ref.doc(id).delete();
  }

  render() {
    if (this.user) {
      return (
        <div>
          You're logged in as {this.user.displayName}
          <button onClick={this.logout}>Logout</button>
          <hr />
          <ul>
            {this.todos.map(todo => (
              <li onClick={() => this.removeTask(todo.taskId)}>
                Task ID: {todo.taskId}
              </li>
            ))}
          </ul>
          <button onClick={() => this.addTask(this.user)}>Add Task</button>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={this.login}>Login with Google</button>
        </div>
      );
    }
  }
}

The End

You just built a reactive fullstack web component that can integrate with any JS framework or Firebase project. Web components and RxJS will play a huge role in the future of the web, and RxFire is a powerful tool for developers building realtime apps.