Building Realtime Sync Apps with Backbone.js

Backbone.js is a popular JavaScript framework that enables web application developers to create data driven web applications which are alert to dynamic changes.

In this post, we are going to show how Backbone.js’s Model and View architecture can be integrated with PubNub’s JavaScript SDK to create one such web application which is always alert to realtime changes. In other words, we’ll build a Backbone.js integrated application that updates their model’s data in realtime.

Our integration allows developers to create a Backbone model or collection and have them synchronize with every other client instance of those models or collections in realtime. This will give any Backbone application a better user experience when working with collaborative, social, or any type of multi-user interface.

Full source code for the project is available here.

Our sample app in-action. Notice the aggregation of the results.

Introduction

The inspiration for building this application comes from the Programmer Competency Matrix, which hosts a programmer competency matrix (PCM) tool to evaluate users against a certain set of competency parameters to gauge their ability in programming and software engineering. We decided to adopt this tool to build our own miniature PCM application based on Backbone.ks and PubNub, which will allow users to

1. Self-assess themselves
2. See the overall aggregate score of all users
3. Get a realtime update on overall aggregate scores whenever other users submit their scores.

So check out our live Backbone.js demo! As you fill out the PCM and submit the scores, then refresh, you’ll notice the results of each submission continue to collect. These results are synced across all other browsers subscribed to the same channel.

Frameworks

This application is built with the following JavaScript frameworks:

• BackboneJS
• Backbone Localstorage
• PubNub JavaScript SDK

Functionality

The UI for this application is built as a tabular layout. The rows indicate different competency parameters (identified by the parameter name in the first column) and the columns indicate the proficiency levels. So each cell on the table identifies a specific level of proficiency for a particular competency.

Backbone Models

Every backbone application needs to define a model for data storage. There are two models in this application, Stat and Key. The Stat model is used to store the aggregate value of all the competency levels and Key is used for capturing the current user’s selection.

Here is how the model definition looks:

The Stat model is updated from PubNub history when the application is launched:

And, the Key is updated whenever the user clicks on a table cell

User Interaction with Backbone Views

The user can interact with the application in the following ways

User’s Grade Selection

The app provides a simple interface for the user to select his grades for each of the competency parameters (rows). This is handled by backbone events defined under the main application view.

User Submission

When the user has chosen their grades for all competency parameters, the user can go ahead and submit his total score. This then publishes current aggregate scores appended with the latest submission from the user. That message is sent via PubNub.

User Viewing the Overall Scores

The application allows the user to hover over a cell to get the aggregate value for that cell, which means that the user can see how many users have rated themselves at that level against the total user submissions. This is achieved by a separate popover view.

Here is how we define this view in Backbone.js:

Dynamic Update

At any given point of time, if the user is accessing this application, then there could be other users accessing it and submitting their scores as well.

The Stat model is always updated with latest aggregate score in realtime, whenever another user submits. This triggers the popover view to render with the updated aggregate score data.

And whenever the current user submits, his scores are also added to the last received aggregate score and published over PubNub channel.

Wrapping Up

Backbone.js is a great choice for building rich client side web applications and provides a robust way of binding data with models and views for handling data changes.

In this post, we combined the power of PubNub with Backbone’s facilities to showcase an application built to respond to such changes in realtime. The application can be further enhanced by having centralized score data persistence so that concurrent submissions from users can be handled without data inconsistencies.