What Backbone.js is, how to use it in building websites, MVC architecture, RESTful abstractions, …

1. Backbone
John Ashmead
Wednesday, May 2, 2012 1

2. MVC Abstraction Layer
• Events
• Models
• Views
• Collections
• Routers
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 2

3. Events
• Used for backbone’s events
• On, off, trigger
• You can role your own, e.g. “selected:true”
• Simple linked list
• Per instance
• Mixed into Models,Views, Collections, &
Routers
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 3

4. Event calls
object.on(event, callback, [context]);
// aka bind
object.off([event], [callback],
[context]);
// aka unbind
object.trigger(event, [*args]);
// event = name[:namespace]
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 4

5. Models
• A unique ‘cId’ supplied, you set ‘id’
• “change” events issued when you use get,
set to change (you can bypass)
• toJSON, fetch, parse, clone, previous,
previousAttributes, save, destroy, validate,
…
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 5

6. Model calls
var MasterPiece =
Backbone.Model.extend({
option1: value1,
initialize: function(arg1, …) {}
});
masterPiece1 = new MasterPiece();
masterPiece1.get('option1');
masterPiece1.set('option1', 'value1');
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 6

7. RESTful interface
• “Backbone.sync” is basic call
• Sends server a “POST”, “GET”, “PUT”, or
“DELETE”, depending on whether you have
requested a create, retrieve, update, or delete.
• If you define MasterPiece.url(), sync will talk to
url’s of the form it returns
• Example: /masterpieces/1
• “isNew” tracks status on client
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 7

8. Views
• Always gets a default ‘el’ DOM element
• Has view.$el defined as $(view.el) as well
• Use “setElement” to change its element
• Instantiate “render” method to get it to
work
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 8

9. View code
var Picture = Backbone.View.extend({
render: function(eventName) {
this.$el.html(this.template(
this.model.toJSON()));
return this;
},
events: {“change”: “render”},
template: _.template(“<div><%= title =%></
div>”),
close: {
this.$el.unbind();
this.$el.empty();
});
var picture1 = new Picture({ model:
monaLisa1 });
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 9

10. Collections
• Ordered sets of models
• Can be the “model” in a view
• Can be included in a model
• Usual functions, including most of
Underscore
• Models have a “collection” property, so
only one collection per model
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 10

11. Underscore
• Each, map, find, filter, reject,…
• First, last, flatten, uniq, …
• Memoize, delay, throttle, …
• Keys, values, extend, clone, defaults, …
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 11

12. Routers
• Keeps a map of hashtags to functions
• Calls the function
• Fires the event
• Uses the “hashchange” event from browser
or else polls the current location
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 12

13. Router code
var Dispatcher =
Backbone.Router.extend({
routes: {
“help”: “help”,
“search/:query”: “search”
},
help: function(){},
search: function(query){…}
);
Backbone.history.start(); //magic
<a href=”#/search/daVinci” />
dispatcher1.search(“daVinci”);
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 13

14. More than one way to do it
For views: model.view or
model.views[], or fire events, or
create “controller” object to
mediate, …
For sync: can sync per model, send
sets of requests, …
For events: can mixin to any JS
object, create custom events, …
For render: can use templates,
direct DOM manip, jQuery UI, …
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 14

15. More than one place that’s
using it
• LinkedIn Mobile
• Foursquare
• Khan Academy
• Groupon Now!
• Pandora
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 15

16. More than one place
it’s documented
• http://documentcloud.github.com/backbone/
• http://documentcloud.github.com/backbone/
docs/backbone.html
• http://backbonetutorials.com/
• http://blog.galk.me/post/17139384615/backbone-
js-tutorial-create-a-simple-twitter-search
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 16

17. Presented for your
consideration:
• Takes care of basics of MVC
• Small, clean, & friendly code
• Flexible
• Reduces need to figure this
stuff out yourself
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 17

18. Backbone.js
john.ashmead@ashmeadsoftware.com Backbone-PhillyCoders-5/2/2012
Wednesday, May 2, 2012 18