Drupal + Backbone.js

It has only just begun

No Demo

Just a pitch

THE WEB-APPS ARE COMING

They will be everywhere soon

• Full web-app sites
• Parts of CMS-driven sites
• On mobile devices

jQuery is not enough.

$('#my-button').click(function() {
  $.ajax('/rest-endpoint/node/1.json', {
      success: function(data) {
        $('#dynamic-content').append(
          '<h2>'+data.title+'</h2>'+'<div class="content">' 
          + data.body.und[0].safe_value + '</div>'
        );
      }
  })
})

EWWWWWWWWW!

(those are my initials)

Drupal needs a client-side JavaScript framework.

(crucial to utilizing Drupal 8 web services initiative)

Backbone is one awesome JS framework

...and a great fit for Drupal

Jeremy Ashkenas wrote Backbone.js

• Document Cloud is amazing
• Also Underscore.js

We are writing the Backbone module for Drupal

• ethanw
• cromac
• lefnire

Thanks to EchoDitto

because Drupal + Backbone = AWESOME

Let's try that again...

Set up a model to hold our data:

var myNode = Drupal.Backbone.Models.Node({nid: 1});

Set up a view to render it:

var AppView = Drupal.Backbone.Views.Base.extend({
  templateSelector: '#my-app-template',
  events: {
    'click #my-button': this.model.fetch()  
  }
  initialize: function() {
    this.model.bind('change', this.render, this);        
  },
})

That's it.

Clean

Scalable

Responsive

As in "snappy"

A thousand words about Drupal Backbone

Backbone.js in a nutshell

Philosophy

• Minimal
• Extensible
• Interface-based
• Opinionated but flexible

Models

• Store
• Sync
• Parse
• Trigger

Events are awesome

Views

• Associate model data with the DOM
• Handle browser events
• That's it

Client-side templating

• Underscore
• Handlebars

<div class="content">{{body}}</div>

"C" stands for...

Collections

• Groups of models
• Great for Drupal views

Backbone Resources

• The Backbone Peepcode screencast
• The Backbone Fundamentals open source e-book
• The Backbone site
• The Backbone annotated source code

What the Backbone modules gives you...

A lot of boilerplate:

Models

• Node
• Comments
• Users
• Files

Collections

• Views
• Indexes

Views

• Theme layer integration
• Drupal helper function
• Standard rendering approach

A standard Backbone app page callback:

function backbone_presentation_page($nid = 0) {
  // Add Templates.
  backbone_add_template('backbone-presentation-slide', 
    theme('backbone_presentation_slide'));
  backbone_add_template('backbone-presentation-slide-edit-form', 
    theme('backbone_presentation_slide_edit_form'));
  // Add JS.
  drupal_add_library('backbone_presentation', 'jmpress');
  drupal_add_library('backbone', 'drupalbackbone-services');
  drupal_add_js(drupal_get_path('module', 'backbone_presentation') . '/backbone_presentation_app.js');
  drupal_add_css(drupal_get_path('module', 'backbone_presentation') . '/backbone_presentation.css');
  // Return an anchor to render the app into.
  return theme('backbone_presentation_presentation');
}

Other goodies:

• Backbone Base feature
• Backbone makefile
• QUnit Tests
• Drupal 6

Drupal Backbone resources:

• The module introduction blog post.
• The example module source code.
• The annotated js source code.

Use cases

Rich UIs

Responsive interfaces

Progressive page loading

Mobile

"Promiscuous JavaScript"

WebSocket & NodeJS module integration

In-place editing

VieJS

???

What I don't want to talk about

Duplicate templating.

Field formatters.

Field permissions.

What's the best approach to REST (RESTws vs. Services)

Read vs. Write data values

What we're working on now

Support for more entities

Bugs

Collection properties of models

Example modules

NodeJS module websocket integration

Drupal 6 backport

Drupal 8 port (SoC!)