1. get a backbone
an intro to the javascript mvc framework

2. outline
• why you need an mvc framework
• what backbone is
• how we use it in workday

3. catopia
the webapp

4. persist on server,
access via restful api
RESTful request
serv er
response

5. /rest/kittens

6. json object
{
“kittens”:
[
{
“id”: “1”,
“name”: “Max”,
"plaything": "catnip"
},
{
“id”: “2”,
"name": "Orhan",
"plaything": "sofa legs"
}
]
}

7. $.ajax({
url: '/rest/kittens'
success: function(response) {
_.each(response.kittens, function(kitten) {
var kittenTemplate = ...//some template
// Go make all the table rows.
$("#cat-container").append(kittenTemplate);
})
}
});

8. catopia
max catnip
orhan sofa legs

9. catopia
max catnip
orhan sofa legs

10. <tr class=”kitten-row” kitten-id=”1”>
<td class=”kitten-photo”><img src=”max.jpg”></td>
<td class=”kitten-name”>max</td>
<td class=”kitten-plaything”>catnip</td>
<td class=”kitten-delete”><img src=”delete.jpg”></td>
</tr>
max catnip

11. <tr class=”kitten-row” kitten-id=”1”>
<td class=”kitten-photo”><img src=”max.jpg”></td>
<td class=”kitten-name”>max</td>
<td class=”kitten-plaything”>catnip</td>
<td class=”kitten-delete”><img src=”delete.jpg”></td>
</tr>
max catnip

12. max catnip
$(“.kitten-delete”).click(function () {
// Find the ID of the kitten
var id = $(this).closest(“.kitten-row”).attr(“kitten-id”);
// Do the delete request
$.ajax(
url: “/rest/kittens/1”,
type: “DELETE”
});

13. max catnip
$(“.kitten-delete”).click(function () {
// Find the ID of the kitten
var kittenRow = $(this).closest(“.kitten-row”);
var id = kittenRow.attr(“kitten-id”);
// Do the delete request
$.ajax(
url: “/rest/kittens/1”,
type: “DELETE”,
success: function () {
kittenRow.remove();
}
});

15. i haz a sad
my data is tightly coupled to my DOM

16. just imagine

17. if my data wasn’t
coupled to the DOM?

18. if my kittens could
update themselves!

20. javascript mvc
frameworks
backbone.js
spine.js
javascriptMVC
is different to
cappucino
sencha
widgets
sproutcore
UI elements

21. backbone.js
lightweight ~4kb
one hard dependency: underscore.js
compatible with jQuery or Zepto
used by foursquare, trello, khan academy

22. models
collections
views

23. models
where we keep our data
+ utility functions
// Create a Kitten model by extending Backbone.Model
var Kitten = Backbone.Model.extend({
// something we want all kittens to do
play: function () {
console.log("Playing with " + this.model.get("plaything"));
}
}

24. models
instantiating a model
var max = new Kitten();
max.play();

25. models
access data via set and get
can validate data easily
// Create a Kitten model by extending Backbone.Model
var Kitten = Backbone.Model.extend({
// validate our data by overriding the method
// in Backbone.Model
validate: function(attrs) {
if (attrs.plaything == “dog”) {
// error
return “You haven’t watched enough Hanna-Barbera cartoons.”
}
}
}
// Instantiate a kitten.
var max = new Kitten();
max.set({plaything: "twine"});

26. collections
arrays of model instances
// Create a collection of kittens!
var Kittens = Backbone.Collection.extend({
model: Kitten // default model
}
var kittens = new Kittens;
kittens.add({name: “Max”}); whenever you add a new item,
kittens.add({name: “Orhan”}); an add event is fired. useful!
e.g.
kittens.bind(add, function(kitten) {
alert(“Hi “ + kitten.get(“name”));
}

27. collections
populating collections
var Kittens = Backbone.Collection.extend({
model: Kitten
url: ‘/rest/kittens’
}
var kittens = new Kittens;
kittens.fetch();

28. collections
syncing with the server
var Kittens = Backbone.Collection.extend({
model: Kitten
url: ‘/rest/kittens’
}
var kittens = new Kittens;
kittens.fetch();

29. models
syncing with the server
var Kitten = Backbone.Model.extend({
url: ‘/rest/kittens’
}

30. collections
backbone.sync
The default sync handler maps CRUD to REST like so:
◦ create → POST /collection
◦ read → GET /collection[/id]
◦ update → PUT /collection/id
◦ delete → DELETE /collection/id

31. each model has an associated view
max has a
model
view
both models are in a
Kittens collection
(they could be in others too! like a
CuteThings collection. doesn’t have
orhan has a to be a 1-1 mapping)
model
view

32. views
let’s create views for our kittens
// Getting Max out of our kitten collection, he had an ID of 1
var max = kittens.get(1);
// We’ll look at the view in detail next
new KittenView({model: max});

33. views
var KittenView = Backbone.View.extend({
tagName: “tr”,
className: “kitten-row”,
template: _.template($(“#kitten-template”).html()),
render: function() {
$(this.el).html(this.template(this.model.toJSON())));
return this;
}
});
this will return some HTML
all views have an
associated element

34. views
let’s do some add in that feature
var KittenView = Backbone.View.extend({
tagName: “tr”,
className: “kitten-row”,
template: _.template($(“#kitten-template”).html()),
events: {
“keypress .delete-icon”: “destroyKitten”
}
destroyKitten: function() {
this.model.destroy();
}
render: function() {
$(this.el).html(this.template(this.model.toJSON())));
return this;
}
});

35. workday
models views
notifications notification view
starred items starred item view
collections
notifications appview
starred items

36. moar
backbone.js & underscore.js docs
backbone demo: todos // small well-commented app
javascript web applications // an o’reilly book