Gustav Ehrenborg fullstack developer

Email symbol LinkedIn logo GitHub logo Instagram logo

Barbera wine indexing system A Javascript newbie tackles Angular, RxJS and Firebase

Wednesday, April 12, 2017
Picture of the site

Some of the most talked about techniques right now are Angular, RxJS and Firebase, so I decided to combine them all to something useful. As a Javascript newbie, these techniques might not have been the best to start with, but it turned out ok. Most of the features that one would like to see in a wine indexing systems are not there, mostly becuase a lack of time. The goal was however to learn stuff and I did. Here are some findings.

Typescript

Typescript is Javascript with types. Typescript is compiled to Javascript so it can be run in normal browsers. It has types:

  bottles: FirebaseListObservable<any[]>;
  bottle: FirebaseObjectObservable<any>;

... and interfaces.

interface Bottle {
  $key?: string;
  name: string;
  quantity?: number;
  year?: number;
  grape?: string;
  country?: string;
  ...
}

...which also means that you have to do some typecasting:

  getBottleDetails(id) {
    this.bottle = this.af.database.object('/bottles/' + this.auth.uid + '/' + id) as FirebaseObjectObservable<Bottle>;
    return this.bottle;
  }

Firebase

Firebase is a cloud platform that offers storage, functions (serverless code), hosting of static pages, etc... In this project I use the realtime database, which is like a big JSON file. The Angular frontend is also hosted on Firebase.

Angularfire2

To use the realtime database in Firebase, the package Angularfire2 is used. It handles the connection to Firebase and it returns Observables to which you subscribe to, to receive the changes which occur. The Angularfire2 also provides authentication methods for third party login with really minimal configuration and code, if a popup login form is chosen:

const firebaseAuthConfig = {
  provider: AuthProviders.Google,
  method: AuthMethods.Popup
};

RxJS

Those Observables that Angularfire2 returns, are RxJS Observables. This means that if you go to the page that lists your bottles, they are not just downloaded once into a static list and then showed, no, if a new bottle is added, it will appear on your list immediately. No need to refresh the page or anything.

Finally

This was fun! Lots of new stuff. Some frustration when using such new things, there aren't so many tutorials or Stack Overflow questions around. Have a look at the code if you want or start using it, but it's not recommended.