UsingBackbone.

jswith
Drupal7and8
VADIM MIRGOROD
Front-end, 05/22/2013

Building Bridges, Connecting Communities

VadimMirgorod
Lead developer in Trellon

Writing Backbone.js CookBook for PACKT

Remembertheweb
developmentin90s?

#3

1995:JavaScript

#4

2000:XMLHttpRequest

#5

2006:jQuery

#6

2013:

?
#7

What'snewinJS?
HTML5:
Local Storage
pushState
JS templating engines:
Mustache.js
Twig.js
Representative State Transfer (REST)

#8

JavaScriptclient
evolution

#9

Complexity

#10

Thintothicktransition

#11

Performance

#12

Problems!

RightnowtypicalAJAX
codelookslikethis
$(document).ready(function() {
$("#getData").click( function() {
$.getJSON("artistsRemote.cfc?
method=getArtists&returnformat=json",
function(data) {
$("#artistsContent").empty();
$
("#artistsTemplate").tmpl( data ).appendTo("#artistsContent");
var nowIs = new Date().toLocaleString();
$('#lastLoad').html( nowIs );
});
});
});

#14

AJAXinDrupal

HaveyouseenanyJS?

#15

#16

Let'sdothingsproperly!

#17

Meet...

#18

#19

Backbone.js
URL: http://backbonejs.org/
Created by Jeremy Ashkenas in 2010, an
author of CoffeeScript
Based on Underscore.js:
http://backbonejs.org/
Requires jQuery or Zepto

#20

Backbone.jsfeatures
Minimalistic
Modular
Perfect OOP design
Over 100 available extensions:
https://github.com/documentcloud/backbone
/wiki/Extensions,-Plugins,-Resources
Community
#21

Backbonevs...
Knockout
AngularJS
CanJS
Spine
Ember.js
many others

#22

Backbonevs...

#23

WhousesBackbone.js?
Groupon Now!
Foursquare
LinkedIn Mobile
Airbnb

#24

Let'slearnhowto
backbone!

#25

Mainconcepts
Model
Collection
View
Template
Router
History
Events
#26

MVC:

#27

Backbone:

http://www.jboss.org/jdf/examples/ticket-

DEMO!
TODOAPP

#28

Easyexample

Definethemodeland
thecollection
// Define new model.
var InvoiceItemModel = Backbone.Model.extend({
calculateAmount: function() {
return this.get('price') * this.get('quantity');
}
});
// Define new collection object.
var InvoiceItemCollection = Backbone.Collection.extend({
model: InvoiceItemModel
});

#30

Definetheviewto
renderthemodel
var InvoiceItemView = Backbone.View.extend({
// Define element tag name.
tagName: 'tr',
// Define template.
template: _.template($('#item-row-template').html()),
// Render the view.
render: function() {
var data = this.model.toJSON();
data.amount = this.model.calculateAmount();
$(this.el).html(this.template(data));
return this;
},

#31

});

Definetheviewto
renderthecollection
var InvoiceItemListView = Backbone.View.extend({
tagName: 'table',
template: _.template($('#item-table-template').html()),
// Render the view.
render: function() {
$(this.el).html(this.template());
_.each(this.collection.models, function(model, key)
{ this.append(model); }, this);
return this;
},
// Add an invoice item row to the table.
append: function(model) {
$(this.el).append(new InvoiceItemView({ model: model }).render().el);
}

#32 });

Addtemplatesinto
index.html
<script type="text/html" class="template" id="item-table-template">
<tr>
<th>Quantity</th>
<th>Description</th>
<th>Price</th>
<th>Amount</th>
</tr>
</script>
<script type="text/html" class="template" id="item-row-template">
<td><%= quantity %></td>
<td><%= description %></td>
<td><%= price %></td>
<td><%= amount %></td>
</script>

#33

Createcollectionand
showtheview
var invoiceItemCollection = new InvoiceItemCollection([
{ description: 'Wooden Toy House', price: 22, quantity:
3 },
{ description: 'Farm Animal Set', price: 17, quantity: 1 },
]);
$('body').html(new InvoiceItemListView({
collection: invoiceItemCollection }).render().el
);

#34

Somecoolthings
Two way binding
Forms

Model to view binding

Layouts

Router

Templates

Modeltoviewbinding
var InvoiceItemView = Backbone.View.extend({
// ...
initialize: function() {
this.listenTo(this.model, 'destroy', this.destroy, this);
this.listenTo(this.model, 'change', this.render, this);
},
destroy: function() { this.remove(); }
});
var InvoiceItemListView = Backbone.View.extend({
// ...
initialize: function() {
this.listenTo(this.collection, 'add', this.append, this);
}

#36

});

Forms
// Backbone-forms extension.
var UserModel = Backbone.Model.extend({
schema: {
title:

{ type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },

name:

'Text',

email:

{ validators: ['required', 'email'] },

password:

'Password',

birthday:

'Date',

}
});
userModel = new BuyerModel();
$('body').append(new Backbone.Form({ model:
this.user }).form.render().el);

#37

Twowaybinding
// Backbone.stickit extension.
var InvoiceItemFormView = Backbone.View.extend({
className: 'invoice-item-form-view',
bindings: {
'#description': 'description',
'#price': 'price',
'#quantity': 'quantity'
},
render: function() {
var html = '<label>Description:</label><input type="text"
id="description"></input><br>' +
'<label>Price:</label><input type="text" id="price"></input><br>' +
'<label>Quantity:</label><input type="text" id="quantity"></input><br>';
$(this.el).html(html);
// Here binding occurs.
this.stickit();
return this;

#38}

Forms
// Backbone-forms extension.
var UserModel = Backbone.Model.extend({
schema: {
title:

{ type: 'Select', options: ['Mr', 'Mrs', 'Ms'] },

name:

'Text',

email:

{ validators: ['required', 'email'] },

password:

'Password',

birthday:

'Date',

}
});
userModel = new BuyerModel();
$('body').append(new Backbone.Form({ model:
this.user }).form.render().el);

#39

Router
var Workspace = Backbone.Router.extend({
routes: {
// Default path.
'': 'invoiceList',
// Usage of static path.
'invoice': 'invoiceList',
// Usage of fragment parameter.
'invoice/:id': 'invoicePage',
// Usage of fragment parameters.
'help/:topic/page:page': 'helpPage',
// Usage of splat parameter.
'download/*path': 'downloadPage'
},
});
#40

Othercoolthings...

inBackbone.jsCookbook

BackboneandDrupal7
Bootstrapping:
Technique we saw above
Do it yourself
Representational State Transfer:
Services module
RESTful webservices module
Backbone.js module

#43

REST

#44

RESTinBackbone
var PostModel = Backbone.Model.extend({
// Override id attribute.
idAttribute: '_id',
// Define URL root to access model resource. Otherwise use
// url() method to provide full path to the model resource.
urlRoot: function() { return 'http://example.com/posts/'; }
});
var PostCollection = Backbone.Collection.extend({
model: PostModel,
// Define path to the collection resource.
url: function() { return 'http://example.com/posts/'; }
});

#45

RESTinBackbone.js
// Fetches data into a model.
model.fetch();
// Saves a model.
model.save();
// Destroys a model.
model.destroy();
// Fetches data into a collection.
collection.fetch();
// Adds models to a collection.
collection.add(models);
// Removes specific models from collection.
collection.remove(models);

#46

Backbonemodule
URL: http://drupal.org/project/backbone
Provides models and collections for Drupal
entities via REST:
Node: Node model
All node: NodeIndex collection
Arbitrary view: NodeView collection
Works with both Services and RESTful Web
Services modules.
#47

Backbonemodule
// Create new NodeView collection.
var viewCollection = new
Drupal.Backbone.Collections.NodeView();
// Set Drupal View name.
viewCollection.viewName = 'backbone_example';
// Fetch data from the collection.
viewCollection.fetch({success: function() {
console.log(viewCollection.toJSON());
});

#48

Backbonemdlroadmap
Support for bootstrapping
Better views support
In-place content editing
Drag and Drop
D8 version?

#49

http://www.flickr.com/photos/gabblebee/397791273

BackboneandDrupal8
It is in core!
Used for In-place editing
issue:http://drupal.org/node/1824500
Used for layouts
issue:http://drupal.org/node/1841584
Used for toolbar
issue:http://drupal.org/node/1860434
META issue:
http://drupal.org/node/1858368
#51

DEMO!

Onemorething!
Web services initiative
REST in core
Storage controllers
Twig

#53

Templating engine
Twig in core (Twig sandbox)
Works both for PHP and JS

Onemorething!
Render controllers
Form controllers

Browser

Twig templates

#54

DB

Storage controllers
Access controllers

Onemorething!
Render controllers
Form controllers

Browser

Storage controllers
Access controllers

Twig templates

Backbone app

#55

DB

REST

Onemorething!
Render controllers
Form controllers

Browser

Storage controllers
Access controllers

Twig templates

Mobile

#56

DB

Backbone app

REST

Onemorething!
Mobile app built with PhoneGap or Trigger.io
DB

Twig templates
Storage controllers
Access controllers

Backbone app

#57

REST

Whatdidyouthink?
Evaluatethissessionat:
portland2013.drupal.org/node/1578.
Thankyou!
Building Bridges, Connecting Communities