Dele Olajide

Realtime Applications with Backbone.js and Openfire Pubsub

Blog Post created by Dele Olajide Champion on Sep 27, 2012

A few years ago, Matt and Gaston wrote a good introduction to XMPP Publish and Subscribe. You can read it here.  Back then, Pubsub was regarded the killer feature of XMPP looking for an application. Since then, Twitter has now shown us how to use Pubsub and many XMPP clients like Jappix now have realtime micro-blogging implementations using XMPP Pubsub.

 

I have been developing realtime business web applications that use Pubsub for a while now and my normal tools for such work would be Flex/ActionScript with XIFF to develop the Flash client and Java for the Openfire plugin. With Pubsub, I am not doing the classic client request and server response of multiple HTTP pages from a web server. It is usually a single page dynamically updated on each client responding to pushed subscribed events as they are published among clients. The server side code is just another publisher. Read this for more infromation about this approach.

 

Thanks  to Apple's IOS and Google's V8 JavaScript engine, Flex/ActionScript is now past tense and it is all about HTML5/JavaScript. JSON over WebSockets with NodeJs even makes a lighter and even sometimes, a better replacement for XMPP and Openfire plugins developed in Java.

 

Despite all the buzz about JavaScript as the single development language for client, server and network messages, the corporate market in which I do most of my work still has its user directories locked up in Microsoft Active Directories, all its mission critical data stored in Oracle and MS SQLServer databases and its enterprise applications living in Java bytecode. This means for some to come, Openfire, XMPP and all the application features (clustering, security, permissions, provisioning, user/groups, etc) will remain the choice application platform for my line for work.

 

However, I have to use HTML5 for developing my realtime web applications and the case for JavaScript everywhere is compelling. This lead me to investigate a JavaScript library or framework that I could use as my application platform and would be compatible with OpenfireJS on the server.

 

To cut a long story short, I have ended up with Backbone.Marionette. I seriously considered Derby and Meteor, but the heavy dependency on NodeJs was a show stopper.

 

Backbone has an XMPP Pubsub implementation in Strophe which I modified to work with Openfire.

 

In evaluating the myriad of JS frameworks/libraries, I used the excellent TodoMVC.

 

Image2.jpg

 

In the spirit of the TodoMVC project, here is a TodoMVC implementation of Backbone.Marionette with XMPP Pubsub all working in Openfire with no server side code. Pubsub manages the storing and distribution of the JSON data. Open as many application web pages. They are all showing the same data always in sync in realtime. If I wrote a server script in OpenfireJS, it would not be to respond to client requests, but to publish new Todos from an independent source.

Outcomes