Backbone.ioBind, One Millionth Tower, Popcorn.js

11 Nov 2011 | By Alex Young | Tags backbone.js webgl html5 media video

Backbone.ioBind

Backbone.ioBind (GitHub: logicalparadox / backbone.iobind, License: MIT) by Jake Luer binds socket.io events to Backbone model and collection events, and also adds a drop in replacement for Backbone.sync that uses socket.io. This makes building applications that sync across multiple browser instances much easier.

There’s an obligatory example to-do list app, with instructions for installation here: Backbone.ioBind Example App.

Using ioBind in models and controllers is straightforward enough:

// Example Model.extend
urlRoot: 'todo',
initialize: function() {
  _.bindAll(this, 'serverChange', 'serverDelete', 'modelCleanup');
  this.ioBind('update', window.socket, this.serverChange, this);
  this.ioBind('delete', window.socket, this.serverDelete, this);
}

// Example Collection.exend
url: 'todos',
initialize: function() {
  _.bindAll(this, 'serverCreate', 'collectionCleanup');
  this.ioBind('create', window.socket, this.serverCreate, this);
}

Jake notes that Backbone.ioBind works well with Backbone.ModelBinding, which is another useful Backbone library for data binding.

One Millionth Tower

One Millionth Tower is a WebGL and HTML5-powered documentary about high-rise apartments, with one particular neighbourhood explored in detail:

You see them all over the world. More than a billion of us live in highrises. But most of these low- and middle-income buildings are now aging and falling into disrepair. Could life in the global highrise be different?

The technology used to drive the documentary is available on GitHub here: m4robb / one-millionth-tower.

Popcorn.js

Popcorn.js (GitHub: webmademovies / popcorn-js, License: MIT) from Mozilla is a HTML5 media framework for creating timeline-based web presentations. This means events on a video’s timeline can coincide with images, text, or rich data from sources like social networks. A list of Popcorn.js plugins demonstrates some of the current possibilities.

I’ve reviewed similar frameworks before on DailyJS, but this must be the most advanced and polished implementation I’ve seen so far.


blog comments powered by Disqus