The JavaScript blog.


google community backbone.js media

Echotube, Community Updates

Posted on .



Echotube (GitHub: orizens / echoes, License: MIT) by Oren Farhi is a Backbone.js and RequireJS YouTube media manager. It's open source, and the code is all JavaScript, so you can easily see how the author has structured the Backbone code around YouTube's API.

The design is derived from Bootstrap, but there are a lot of custom widgets and CSS transitions which keep it feeling original. Also, Jasmine tests have been included, which is interesting because it seems like a slightly awkward thing to test.

If you're looking for fully-fleshed out Backbone/RequireJS applications to learn from then give it a look.

Community Updates

I occasionally receive messages about major updates to libraries and products that I don't always write about, but I thought it would be nice to start publishing those as well. If you read about BromBone -- a service that provided access to headless browsers -- then you might be interested to hear that BromBone is now a service for bringing better SEO to single page apps. It works by adding redirects to yoursite.brombone.com based on the crawler's user agent. The documentation has a simple .htaccess file which will work for Apache.

Also of note is Vincent Voyer's lazyload script has been updated to 2.0:

Feel free to contact us about your module/script/app's major updates and I shall endeavour to find space to write about it.


html5 video webgl backbone.js media

Backbone.ioBind, One Millionth Tower, Popcorn.js

Posted 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.