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
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
Events are awesome
Views
- Associate model data with the DOM
- Handle browser events
- That's it
Client-side templating
<div class="content">{{body}}</div>
"C" stands for...
Collections
- Groups of models
- Great for Drupal views
What the Backbone modules gives you...
A lot of boilerplate:
Models
- Node
- Comments
- Users
- Files
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:
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!)