Firebase is a powerful API to store and sync data in realtime helping front-end developers build realtime apps for the web. You can save data, update data, and listen for data changes in realtime with only a few lines of code. Data is stored as standard JSON and is accessible from any platform. Firebase also has safety and security built in to keep your data and your users data safe.

Adding Firebase to the page

In order to use Firebase in your application you have to incluse the firebase js reference in the page header.

<script src="https://cdn.firebase.com/js/client/2.0.2/firebase.js"></script>
 

Using the JavaScript API

You can create new Firebase object in JavaScript quite easily then run many prebuilt functions and methods on that object for interacting with your data.

Adding Data:

// set up a new reference to your firebase app
var myFirebaseRef = new Firebase("https://your-app-name.firebaseio.com/");

// use the .set() method to add data in the form of an object
myFirebaseRef.set({name: "John"});
myFirebaseRef.set({comment: [{name: "Bob"},{name: "Dave"}]});

Running the set() method on your Firebase reference will allow you to setup new data. You need to be careful with your use of set as it wipes out all of the existing data and resets it for the node you’re referencing.

Updating Data:

Sometimes you don’t want to reset all the data in a node; actually most of the time you wont want to. For this, Firebase gives you the .update() method.

// use .update() method to update data
myFirebaseRef.update({news: {story: "my new title"}});

This will find the news node and update the story property with the new data provided.

You can also use the .push() method to push new nodes or data points but push also incorporates its own unique identifier.

// using .push() method to push new data
myFirebaseRef.child('comments').push({name: "james", text: "this text"});

This code pushes a new node onto the comments node with a unique identifier. The push method and update method are what you’ll probably end up using the most when interacting with a web application.

Deleting Data:

You can also completely remove or delete data using the .remove() method. It’s use is pretty straightforward and you can target any reference point just like you would to set or update data.

// removes all data in your reference
myFirebaseRef.remove()

// removes all data in the child node of news
myFirebaseRef.child('news').remove();

// log the value of the data snapshot
myFirebaseRef.on("value", function(snapshot) { console.log(snapshot.val()); });