Slimmer JavaScript client

From version 1.6.2 onwards, the Pusher Javascript client library is smaller and faster to load in browsers that support native websockets.

We’ve removed supporting libraries such as JSON and the Flash-based WebSocket fallback from pusher.js and include them dynamically in browsers as required.

For example in Safari, Chrome and the new alpha release of Opera 11 – all of which implement WebSockets and a native JSON encoder – Pusher.js only needs to load the core library. When minified this weighs in at 10Kb – a 24Kb saving compared to version 1.6.1 which bundled all dependencies together for all browsers. The speed improvement at load time should be noticeable on modern browsers.

How it works

We do this by injecting script tags into the HEAD for the two main dependencies, as needed depending on your browser’s capabilities. This is a well known technique used by several Javascript frameworks such as YUI, Dojo and LAB.js and formalised in the ongoing Common.js effort.

Because this is part of Pusher.js, however, we wanted to make it as small as possible while maintaining browser compatibility, so we ended up rolling out our own code. The interface is simply

Pusher.require( ['/json2.js', '/flashfallback.js'], Pusher.ready );

The first argument is an array of files to load and the second is a callback function that will be called once ALL of the dependencies have been loaded and parsed by the browser. At this point Pusher.js initialises WebSocket connections and subscribes to channels.

The code is in this gist.

The important thing to note here is that dependency loading here is asynchronous, ie. the browser doesn’t block page rendering while the remote files load, as it would with script tags manually included in the HEAD. On top of that, scripts loaded in this way will download in parallell as opposed to one after the other. This reduces page load time because browsers will render HTML and other included resources such as images sooner.

In Pusher we use this conditionally depending on browser capabilities.

var deps = []; if ( !window['JSON'] ) { deps.push( '/json2.js' ) } if ( !window['WebSocket'] ) { deps.push( '/flashfallback.js' ) }

if (deps.length > 0 ) { Pusher.require( deps, Pusher.ready ) }

How do I get it?

All of this happens automatically when you include pusher.js in your pages, so there’s no need to do anything other than making sure you’re linking to 1.6 or above.

Although this is intended primarily as an internal optimisation, feel free to play with (and improve) this snippet in your own code. And if you haven’t done so already, you can create a free Pusher account and let us know what you think!