Drupal in a Backbone Tux

This project is not covered by Drupal’s security advisory policy.

What this module does

This module provides a foundation for the development of Backbone.js apps with Drupal. Using this module, you can build complex interactive interfaces with little to no server side code, basic content type configurations, leveraging Drupal's field and entity types and Backbone's power on the client side.

It contains classes for working with Drupal nodes, node listings and views in Backbone Apps. Want to load a view and change the title of the first node? Here's the code:

var viewCollection = new Drupal.Backbone.Collections.NodeView();
viewCollection.viewName = 'backbone_example';
viewCollection.fetch({success: function() {
  viewCollection.at(0).set('title', 'New Title');
  viewCollection.at(0).save();
});

That's it! Backbone's model/collection interface maps onto Drupal's node/view architecture transparently...it's a marriage made in web development heaven. Once you've got nodes and views represented as JavaScript objects you can leverage the power of your favorite client-side templating tool (those are each different suggestions) to make awesome apps within your Drupal site. We don't have a list of site's using this module, yet, but sites like Foursquare, Pandora and LinedIn are built with backbone, check out this list of sites to get an idea what's possible.

This module also includes a feature that sets up the basic requisites needed in Backbone.js development with Drupal, including settings for the Services module and an initial view.

WARNING!!

THIS MODULE IS IN THE VERY EARLY STAGES OF ACTIVE DEVELOPMENT, THE API COULD CHANGE SIGNIFICANTLY IN THE FUTURE. Please do use it in your development projects and contribute issues, patches and development as you find needed. We wouldn't recommend using it in production just yet, unless you really know what you're doing.

Installation

  • Download the latest version of Underscore.js into the appropriate libraries/underscore directory (usually sites/all/libraries/underscore).
  • Download the latest version of Backbone.js into libraries/backbone.
  • Enable Clean URLs for your site.
  • Enable this module and its dependencies.
  • Make some awesome user interfaces with Backbone and Drupal!

Get Involved

Join us on #drupal-backbone! "Office hours" are Thursdays @ 11:30AM EST, or by chance.

Testing

This module uses the jQuery QUnit library for JavaScript testing, via the QUnit module for Drupal. Currently CRUD operations are covered by basic tests, along with basic Backbone.Collection children for node index listings and views listings, as well as a bit of fancy footwork to handle testing of asynchronous AJAX callbacks.
See the backbone.test.js file in the tests subdirectory of this module for that.

What's to come...

We have a lot of plans and hopes for this module. Here's the current docket:

  • Download the latest version of Backbone.js into libraries/backbone.
  • Conditionally including backbone on specific pages.
  • Porting the DragAndDrop collection from the Backbone API module.
  • Support for Backbone bootstrapping and Views JSON integration more generally, modeled from Backbone API.
  • Example module using node listing (promote to front interface?)
  • In-place editing w/ Backbone and Hallo or another HTML5 contenteditable editor.

Credits

  • Module development supported in part by EchoDitto.
  • Tuxedo line art created by Mao, licensed under CC attribution 3.0.

Project information

Releases