AngularFire2 vs Firebase JS

Question

I'm finding the AngularFire2 library to be poorly documented and very hard to use. I have an angular2 app and was wondering if someone could help me clear up the pros/cons of just using the vanilla JS Firebase code rather than angularfire2? Does using the vanilla JS version kill off angular2 functionality that I may be using? I'm confused as to why use one over the other, personally the vanilla JS one is waaaay better documented and feature rich, I can't even see how to Signup Users in AngularFire2, it doesn't have any UI elements and observables are doing my head in!

Sasxa Sasxa · Accepted Answer · 2017-03-22T15:16:08

You can use vanilla version directly. Even with observables - observable and promises work well together. For example:

Observable.of(new firebase.auth.GoogleAuthProvider())
  .switchMap(o => firebase.app().auth().signInWithPopup(o))
  .subscribe()

Main advantage of AngularFire2 are head-hurting observables (; I suggest you learn rxjs and start using them over promises. I am using vanilla JS SDK, however, I've created refObservable based on what AngularFire2 does with FirebaseObservables. It's simpler, but enough for my needs:

export function refObservable(ref): Observable<firebase.database.DataSnapshot> {
  return Observable.create(observer => {
    let fn;
    try {
      fn = ref.on('value', snapshot => {
        observer.next(unwrapSnapshot(snapshot));
      });
    } catch (error) {
      observer.error(error);
    }
    return () => ref.off('value', fn);
  });
};

where unwrapSnapshot(snapshot) is simple function that checks snapshot and returns appropriate result (array, object, string, etc...). I use it for reading data from firebase. Create/Update/Delete operations I do directly:

Observable.of(checkUserPermission())
  .switchMap(() => {
    return firebase.database().ref('what/ever').remove();
  });

It's similar with other modules - storage, messaging, auth... I prefer Firebase SDK over AngularFire2. I also find it easier to use in service/web workers.

If you already know vanilla sdk, stick with it.
If you only need database read/write and basic authentication use AngularFire2 it's simpler.
If you need more control over firebase features use JS SDK.

AngularFire2 vs Firebase JS

1 Answers