Web and Native Technologies

Firebase

Databases are essentially the heart of tech. We all need them one way or another. Everything that is designed with the user’s experience in mind, will eventually need to be powered by a database. Databases power everything in the web nowadays, whether it’s a hotel booking system, and airline booking system, sites that store user data like amazon, yelp and groupon, or even a personal blog. The data that is being rendered has to be stored somewhere for easy access. Take the example of a simple blog. Every post, every page, every word. How do these things get saved? They don’t just magically appear out of nowhere. Take a look at the profile page with all these custom settings. How does it know to show “your” data when you are logged in? All of this is done with databases. Usually when people think of databases they think of SQL relational databases like Access, oracle or even Mysql. You will then have to learn how to integrate it with your application and perform all of the backend work yourself. This is where firebase comes to the rescue! Firebase does all of the backend stuff for you, leaving you only worrying about the front-end. This is amazing. You can read and write data, as well as have access to all of the CRUD operations like a normal relational database, but without all the extra manual management.  Firebase has been skyrocketing in it’s popularity recently and many major companies like Jawbone, Nitrous and coderpad all use it.

I know, I know. You are probably thinking “you are just being lazy. I prefer having complete control over my database.” While this may be true to some extent, it also has it’s benefits. All of the extra time you are spending working and maintaining the database, you could’ve used it to improve the UX design or add extra features. The point I’m trying to make is that firebase has a team of experts taking care of the backend for you, so you can spend less time worrying about your data and more time actually putting it to use! One of the major features that firebase has (which, is mainly why I use it), is that it is a NoSQL database. That’s right, no more ugly, long, complex queries. You can stick to your plain ol’ javascript and interact with the firebase API to perform queries their way. Since firebase uses JSON to store all of it’s data, it makes it super easy to read and write from it. You know what that means? Yup, no more tables! I personally hate tables. They can get long and ugly pretty fast which raises your chance of being more error-prone. Firebase also strictly follows their promise of being a real time database. Since the data is stored as JSON, it can be synced to all connected clients in real time very fast efficiently. To top it off, it also has offline capabilities where the data is cached and available when your app goes offline!

The awesomeness doesn’t stop there, however. Firebase also easily manages user authentication. No more creating your own handler to get the user input from form fields and parsing it, firebase can take care of all of that for you. You can easily authenticate users anonymously for one time sessions, with a custom email & password like the traditional ways or even with third party authentications like  Facebook, Twitter, GitHub, and of course, Google.

All you have to do to get started with firebase using the web platform is to follow these four easy steps.

  1. Sign up on their website and either choose the free plan or one of their packages.
  2. Include the file from the CDN:
    <script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script>
  3. Install firebase (easiest way is to use npm)
     npm install firebase 
  4. require the library into your application
    var firebase = require('firebase')

After those four steps are done, writing data to the database is as easy as:

var myFirebaseRef = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com/users");
myFirebaseRef.set({
  name: "Damian",
  age: 21,
  aboutme: {
    language: "Ruby",
    instrument: "Piano",
    blog: https://damianlajara.wordpress.com
  }
});

Retrieving that data will be kind of weird to SQL users, since firebase uses callbacks that are triggered via events.

myFirebaseRef.child("aboutme/instrument").on("value", function(snapshot) {
 console.log(snapshot.val()); // prints "Piano" to the console
});

I find this syntax better than something along the lines of

SELECT instrument FROM users WHERE name='Damian';

At first glance, the sql query might look more “human-friendly”, but thinking down the road, it doesn’t really have room for growth. If you wanted multiple items, you will need to perform multiple queries. With firebase, it is not like that. Since everything is stored in paths, all you need to do is get a reference to a specific path, and you will have access to all the data that was stored there. This can save you a lot of headaches, it’s easier to maintain, and it has more of a “code” feel to it, which I personally prefer.

Aside from reading and writing data, you can easily authenticate users as well:

myFirebaseRef.createUser({
  email    : "damian.lajara@flatironschool.com",
  password : "myPassword"
}, function(error, user) {
  if (error) {
    console.log("Error creating user:", error);
  } else {
    console.log("Successfully created user account with uid:", user.uid);
  }
});

That will create a user with the given email and password, but it will not, however, sign them in. To sign them in you can do something similar to the creating a user process:

var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.authWithPassword({
  email    : "damian.lajara@flatironschool.com",
  password : "myPassword"
}, function(error, authData) {
  if (error) {
    console.log("Login Failed!", error);
  } else {
    console.log("Successfully logged in:", authData);
  }
});

Obviously, here you will have the data from the form fields the user filled out or something similar, instead of hardcoding it, but the concept is the same. If you have a nice understanding of promises and callbacks, you can actually even mix these two together and log the user in right after creating their account like how google does with many of their products.

So there you have it! A nice quick little intro to firebase. If you want, you can even go farther with the Angular Fire documentation and link it up with the Ionic Framework to create awesome apps!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s