A Look Back At Firebase 2.X with AngularJS

I went back to work on an old project that used Firebase's 2.4.2 library (as of this writing the newest library is 3.X, and there are some big changes between the two libraries. The key is that even though the syntax between the libraries is a little different, the underlying concepts are how you decide to use Firebase for your specific application are the same. 

---

"Firebase" and "firebase". 

I went back to my ng-nj project that was using Firebase's 2.4 sdk, and I was getting some really weird behavior. I had the project saved locally, and when I ran it with `gulp serve` it would work fine:

However, I would clone the exact same code out into another folder, and it would give me this error:

It turns out that in the 2.x library there is no little f "firebase". Doh! So let it be known that the 2.X library was all about the capital F "Firebase", and in order to use the little f one you need to have the 3.X library installed!

---

Initializing Firebase in 2.X

The 2.X Firebase library uses the capital F Firebase syntax, so let's go over that. You will need to reference your actual firebase url quite often so I recommend saving it as a constant. In AngularJS I normally put this in my index.constants.js file:

angular
  .module('ngNjOrg')
  constant('FIREBASE_URL', 'https://derp.firebaseio.com/')
})();

Then later inside one of your controllers, services, or directives you could create a firebase reference like this (notice the use of the capital "F" Firebase syntax) :

self.ref = new Firebase(FIREBASE_URL);

We can then utilize this reference later to take advantage of the various firebase services. Let's take a deeper look at doing that now! 

---

The Firebase Database

Since inception in 2011, Firebase's main product has always been it's database service, and since 2012 it has been referred to as a "realtime database".  Being as the database is such a critical service, the engineers put a lot of time into making a really nice syntax for interacting with it in AngularJS. The database in a NoSQL database with all of it's data stored as objects. In the firebase web console you can visually look at your database as a tree of nodes:

From the source code you can access any of these nodes as either an object or a list. Here's an example of how we might load a node as an object:

var firebaseUserObj = $firebaseObject(self.ref.child('/users/user2))
  return firebaseUserObj.$loaded().then(function(data) {
    $log.log("got firebase obj data: " + data.email);
    $log.log("data like firstName: " + data.firstName);
    return data;
}, function(error) {

})

First, we pass the firebase reference into the $firebaseObject service, and then we wait for the $loaded() event to fire. We can load a node as a list in a similar manner but using the $firebaseArray service:

self.pulledEvents = $firebaseArray(ref.child('events'));

You can set a value in the database like so:

Firebase(FIREBASE_URL + 'users').child(registeredUser.uid).set

---

Authentication with Firebase 2.X

Authentication is also made easy in AngularJS with the Angularfire library. Remember the firebase reference we got in the initialization step? Well, you can just pass that into the $firebaseAuth service from Angularfire to get an authentication reference.

self.ref = new Firebase(FIREBASE_URL);
self.auth = $firebaseAuth(self.ref);

You can then call various authentication methods with that authentication object. For example, authWithPassword is a the method to send a username (or email address) along with a password to firebase so that it can try to authenticate the user. 

return self.auth.$authWithPassword({
  email: user.email,
  password: user.password
}).then(function(registeredUser){
  $log.log("logged in!");
})

User authentication is a notoriously difficult thing to get right and keep everything locked down & secure so it's nice to have a partner you can trust (Firebase) to handle all the nitty gritty details or keeping you user authentication secure. 

---

A Sad Time for Firebase Storage

Strangely, there is no $firebaseStorage service that gets passed in a Firebase reference. Instead, the team recommends using the "firebase" object that can be found in the the 3.X Firebase library. Indeed, this means that you cannot access Firebase storage with the Firebase 2.X library. :'(

---

Firebase 2.X: Good Times, But Let's Move On

It was a good run with Firebase 2.X! This library really helped put Firebase on the map as a legit backend service, and the client framework libraries like AngularFire and ReactFire really made it super accessible to web developers, especially those using these front-end frameworks. I can remember following along with a few Lynda.com tutorials like this one by Ray Villalobos that really got me up and running quickly, showing me how easy yet powerful Firebase could be. Between the 2.X and 3.X firebase libraries there have been a few key upgrades to the firebase platform (for example, file storage), and I'll be looking to take full advantage of these when I move to the 3.X Firebase library. I have faith that the Google engineers know what they are doing and that Firebase will be around for a good long time just like everything else in the JavaScript world (Lol). But really though, overall I am very happy with Firebase, and I see myself using it a lot in the future. Thanks to the Firebase team for all their hard work so far on these backend goodies for us to use. I can't wait to see what we'll do them and what they'll give us next!

---