Using Backbone.js with Drupal 7 and 8 (DrupalCon Session Notes)

Tuesday, May 21, 2013
Wayne Eaker
Module Developers
Using Backbone.js with Drupal 7 and 8 (DrupalCon Session Notes)

What's new in JS?

  • HTML5: LocalStorage, pushState
  • JS templating engines: Mustache.js, Twig.js
  • Representative State Transfer (REST)

In Drupal core now, with AHAH, FormAPI, etc. you write AJAX callback code in PHP.

Backbone.js

URL: http://backbonejs.org/
Based on Underscore

Features:

  • Minimalistic
  • Modular
  • Perfect OOP design
  • Lots of exentions: over 100

Who Uses Backbone.js?

  • LinkedIn Mobile
  • Foursquare
  • Airbnb
  • GroupOn Now!

Main Concepts

  • Model
  • Collection
  • View
  • Template
  • Router
  • History
  • Events

Backbone.js in Drupal 7

  • Bootstrapping: "Do it yourself". Manually write the code, templates, etc.
  • REST: Services module, RESTful webservices module
  • Backbone.js module: provides models and collections for Drupal entities via REST. i.e.: Drupal.Backbone.Collections.NodeView()

Backbone.js in Drupal 8

  • It's in core
  • Used for in-place editing
  • Layouts
  • Toolbar enhancements
  • Mobile preview bar (Spark distribution)
  • Web services initiative and Twig should work with Backbone.js.
  • Mobile applications with Twig, Backbone.js, and PhoneGap or Trigger.io