To add real-time support to our application, we need to create a Firebase account. Firebase offers a free plan for development, allowing up to 50 connections and 100 MB of data storage, which is more than enough for our application. Once we have created our Firebase account, we can add a new application. The name of our application will be hdi-explorer. This name will be used to generate the URL that identifies our application, in our case, http://hdi-explorer.firebaseio.com. By accessing this URL, we can see and modify the application data. We will create a single object with the code attribute to store the country code of the HDI Explorer application. Once we have our account and initial data configured, we can install the JavaScript library with Bower:

$ bower install --save-dev firebase

This will install Firebase in the bower_components directory. We will also update the Gruntfile to concatenate the Firebase library along with the other dependencies of our application in the dependencies.min.js file. Firebase data for the HDI Explorer application is shown in the following screenshot:

We can connect to the Firebase application using the Firebase client. We will create a script element at the end of the firebase.md page that contains the synchronization code and create an instance of the Firebase reference to our data:

<script>
    // Connect to the Firebase application
    var dataref = new Firebase('https://hdi-explorer.firebaseio.com/'),

    // Application callbacks...
</script>

Before integrating Firebase, we will review the structure of the HDI Explorer application. We used Backbone to organize the components of the application and the REST API of the World Bank as the data source for our models.

Our application has three models, that is, the ApplicationModel, CountryTrend, and CountryInformation models. The application model manages the application state, which is defined by the three-letter code of the country selected by the user. The country trend model contains the time series of the aggregated Human Development Index, and the country information model contains information about the main components of the index: education, life expectancy, and average income.

The Countries collection contains instances of the CountryTrend model. This collection has two views, the search view and the chart of the HDI trends. The CountryInformation model has one associated view, the table of indicators at the right-hand side of the page. The HDI Explorer application is shown in the following screenshot:

All these elements are initialized in the app/setup.js file; instances are created and the callbacks for the change:code event in the application model are defined. The views will update themselves when the user selects a country in the search field. To synchronize the application state among the connected users, we need to synchronize the country code.

We can read the data from Firebase through asynchronous callbacks. These callbacks will be invoked in the same way for both the initial state and for the changes in the data. Events will be triggered if any object under the current location is changed, added, removed, or moved. The value event will be triggered for any of these modifications. We will use this event to update the application state as follows:

// Update the application state
dataref.on('value', function(snapshot) {
    app.state.set('code', snapshot.val().code);
});

When something changes under the current location (such as the country code), the value event will be triggered, and the callback will be called with a snapshot of the current data as the argument. The snapshot will contain the most up-to-date object, representing the state of our application. We can access the object by calling the val() method of the snapshot and get the value of the current country code.

If we modify the value of the code in Firebase, users connected to the same URL will have their application instances updated. We also want to synchronize the state from the application to Firebase. We will add an event listener to the application model in order to update the Firebase data:

// The model will update the object with the selected country code.
app.state.on('change:code', function(model) {
    dataref.set({code: model.get('code')});
});

The set method will update the contents of the Firebase location, triggering an update of all the views of the local application instance and any other client connected to the firebase page.

In this section, we learned how to add real-time interaction to the application created in Chapter 8, Data-driven Applications. We learned how to change the state of the client-side application by adding callbacks for the events triggered at the backend.