DailyJS

Backbone.ioBind, One Millionth Tower, Popcorn.js

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

html5 video webgl backbone.js media

Backbone.ioBind, One Millionth Tower, Popcorn.js

Posted by Alex R. Young on .
Featured

html5 video webgl backbone.js media

Backbone.ioBind, One Millionth Tower, Popcorn.js

Posted by Alex R. Young on .

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.