Make Backbone Real-Time With PubNub

Backbone is one of the most popular JavaScript based frameworks to date. It is a simple yet powerful way to create interactive JavaScript applications with data bindings to a back-end server. Instead of having to constantly synchronize data between your client and server though, why not have all the data there when it happens? Users should not have to wait to see updates to their model’s data so we decided to tackle this problem by integrating Backbone.js with PubNub.

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. It works by taking all of the create, update, and delete methods that are spawned by Backbone and propagating them across the PubNub Data Stream Network.

Want to see it in action? A full working tutorial and all the code you need is available here.

Getting Started with Backbone

You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal.

The easiest way to get started is by using bower via “bower install pubnub-backbone”. You can also clone the repository and copy the built javascript files. Now you can include this and the base PubNub library found at https://github.com/pubnub/javascript#pubnub-cdn-javascript-sdk like so:

The easiest way to get started using the library is by creating a PubNub based collection. This will automatically propagate all create, update, and delete methods across all other clients in realtime. You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization:

Now that we have a connection to PubNub, we can feed that connection into our custom Backbone collection:

This will look and act just like a normal Backbone collection with two extra keys. The “name” key allows PubNub to distinguish this collection, so it connects this collections to only collections of the same type. Think of this as a namespace so you can have multiple types of collections all updating in realtime. It uses this to generate a PubNub channel that is unique to the collection in the form of “backbone-collection-{name}”. The “pubnub” property is the globally referenced connection to the PubNub network. This is the object that comes back after calling PUBNUB.init.

Now your Backbone collection will update in realtime. You can listen for add and remove events just like usual when something gets added or removed in realtime. The next step is to implement a way to get the current set of data when the collection first loads so every client is using the same data set. A great way of accomplishing this is by listening to the PubNub based events with a server and replicating the data store. Then the client can ask for the current set of data every time the application loads. This is made even simpler when using the backbone npm module for nodejs:

Now you can listen for all the changes to the collection and either store them in memory or even a database such as MongoDB. You can even add other business logic for validations and more. Although nodejs was an obvious choice for the demo, this code will work with any type of back end too. This is just one easy way to use the framework but be sure to check out the repository for more examples!

Wrapping Up Backbone

We here at PubNub truly believe that realtime is the way of the future. Your users will not have to click a refresh button to constantly synchronize their Backbone client data with a server. Instead, with PubNub integration, your users will get data right when it happens.

This is also much more extensible since any client or server can listen to the events and manipulate them as they need to. This allows business logic to lay in more places than one. We really hope this changes the way developers look at building not just Backbone applications but web applications overall.

Get Started
Sign up for free and use PubNub to power realtime
Backbone JS apps!