Jim Lynch Codes
  • Blog
  • About Jim

Writings about one coder's stories & experiences.

A Look Back At Firebase 2.X with AngularJS

10/6/2016

0 Comments

 
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:
Picture

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

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:
Picture

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!

0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...
    Picture
    Follow @JimLynchCodes
    Follow @JimLynchCodes

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blockchain
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Haskell
    Illustrations
    Investing
    Java
    Javascript
    Lean
    Life
    Linux
    Logic Pro
    Music
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Rust
    Security
    Serverless
    Shell Scripting
    Swift
    Test Driven Development
    Things
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    March 2023
    August 2021
    February 2021
    January 2021
    October 2020
    September 2020
    May 2020
    April 2020
    February 2020
    January 2020
    December 2019
    October 2019
    September 2019
    August 2019
    July 2019
    June 2019
    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    June 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed

  • Blog
  • About Jim
JimLynchCodes © 2023