Firebase - Two Salient Features.

Three way data binding with AngularFire:

Imagine user keys in lots of data into a form and had to navigate away from the page. Often I saw apps presenting a dialog box that says data is going to be lost. I don't think it's a good solution. How about allowing user start from where he/she left. Here is a Firebase feature to address the same,

Maintain state as you move away from the form:

Among many things AngularJS provides, two way data binding is salient. Firebase takes it further, add another dimension - data store. Three way data binding synchronizes, view (Html template), model (Scope) and Firebase data store.

Consider following code snippet

// Initialize Firebase object
// say user variable has user name of the logged in user.

     var firebaseObj = $firebaseObject(new Firebase("< Firebase Data Source Url >").child(user));
     // three way data bind email message field on scope to firebase object created above.
     firebaseObj.$bindTo($scope, "emailMessage");


Any changes to $scope.emailMessage are bound all the way to data source on Firebase. User can any time navigate away and yet data is not lost. As and when user comes back to this page, can start where he/she left off.

Dismiss

In the video, on the left is the form field and on the right is the Firebase data source. You can see it's updated as and when more characters are typed into the text area.

Sync as you go online: 

Firebase makes it that much more easier to continue to work as you get disconnected. In fact no additional code required. API automatically maintains data in disconnected state. It will sync as and when user goes online.

Knowing connection state:

Use /.info/connected on the data source's URL to know current connection status.

$scope.connectionStatus = $firebaseObject(new Firebase("https://Your Firebase App/.info/connected"));

Bind connection status to a green/red icon in the template. 

 <img ng-show="connectionStatus.$value" src="images/green.png" style="max-height:24px" />

 <img ng-show="!connectionStatus.$value" src="images/red.png" style="max-height:24px" />

Track connection status on server-side

JavaScript API onDisconnect will attach a server side event. You may set a value when disconnection occurs,

// The variable "user" holds user name of the logged in user
// If Kotaru is the user name, JSON will be {Kotaru:{conectionStatus:"disconnected"}}

firebaseReference.child(user).child("connectionStatus").onDisconnect().set("disconnected");

// You can override this object when user comes online

JavaScript API to get Offline or Online:

Finally you may chose to go offline or online with functions Firebase.goOffline() and Firebase.goOnline() . These are as good as disconnecting and connecting the application's connection with Firebase. You might allow user to perform multiple offline changes to dataset and at some point get online to sync. 

Firebase as your app's backend

Firebase is a cloud based back-end as a service provider. It can be used as a very effective No SQL data-store. Your application can store JSON objects. Integration is made easy with variety of libraries provided by Firebase. For this blog I'm focusing on Web/JavaScript library.

https://www.firebase.com/docs/

As a developer it's quick to get started. No overhead of installation and setup. It's a cloud service, so don't have worry about setting-up servers. Firebase tools on your machine are provided as an NPM package. Install with following command, globally on your machine.

npm install firebase-tools -g

This makes it a good choice for independent mobile/web app developers. Signup and login to Firebase.
Create an app. Remeber your app has a URL. JSON Key/Value pairs are shown at that URL. You might chose to manually add/remove/modify data as well.

Synchronized:

As and when data is updated in the backend, JavaScript events are raised and the callbacks provided are invoked with updated data. Hence your app is in near synchronous state all the time. With this approach we write less code, retrieving data is made simpler. Down below I've mentioned couple of data retrieval options. Checkout more here.

Consider Two Tier Architecture

With JavaScript and browsers being more and more powerful, you don't have to look at mandatory middle tier. Firebase can act as your middle tier and data store. Security, validation and authentication features of Firebase do allow this kind of architecture. 

Get Started

by referencing Firebase library in your Web Page. You could use CDN location. Or by downloading Firebase bower or npm package. I chose bower (package manager).

bower install firebase

And reference of firebase.js in bower_components. There after

//create an object of Firebase
var ref = new Firebase('URL of your firebase app');

Save Data to Firebase:

// to set a primitive data value
ref.set('sample value')
ref.set(100);

// you may set a JSON object instead
ref.set({
field1: 1,
field2: {
  child1: 'value'
}});

//If you are storing a new object every time, use push (array) instead of set.
ref.push({
field1: 1,
field2: {
  child1: 'value'
}});


Retrieve data from Firebase:

As mentioned earlier, Firebase keeps data synchronized. Data is pushed to the browser as changes happen. JavaScript code need to have callback functions defined to update view as data is retrieved automatically.


//Look for changes to the data
ref.on('value', function(snapshot){
    console.log(snapshot.val());
});

// data added as a child node.
ref.on('child_added', function(snapshot){
    console.log(snapshot.val());
})

All data elements in Firebase are represented by URL. You can traverse through the nodes in the URL itself. For example, to reach child1 in above example, you could provide URL "http://yourapp.firebase.io/field2/child1" to the Firebase function.

or you could use ref.child('field1/child1')



(More data retrieval options)

Running your application:

You may use any Web-Server to serve HTML files on your machine. Serve is a good choice.

npm install serve -g

Run serve from at the root folder of your application.
Firebase also provides hosting service. Run

firebase init
(Link application to Firebase app in this step.)

firebase deploy
(Deploys to Firebase cloud service)

You can serve HTML files on the cloud now. URL is on App Card It will be your appname.firebasepp.com

This is an introductory blog. Do checkout Security, Authentication, OAuth and Offline features of Firebase.




Also, I've basic Firebase examples on my Github. Use this link to explore.