Backbone.ioBind, One Millionth Tower, Popcorn.js

Alex R. Young





html5 video webgl backbone.js media

Backbone.ioBind, One Millionth Tower, Popcorn.js

Posted by Alex R. Young on .

html5 video webgl backbone.js media

Backbone.ioBind, One Millionth Tower, Popcorn.js

Posted by Alex R. Young on .


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

Using ioBind in models and controllers is straightforward

// 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 /


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
demonstrates some of the current

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