The document discusses client-side MVC with Backbone.js. It begins with an overview of Backbone.js and why it provides a useful structure for web applications. It then covers the main aspects of the Backbone architecture including models, collections, views, templates, and routers. Examples are provided for each component and how they work together. Real-world applications using Backbone, including for invoicing and social media analytics, are briefly described.

2. Client-side MVC
with Backbone.js

3. igloo
igloolab.com michele.berto.li
@iloveigloo @MicheleBertoli

4. Lago di Garda

5. Lago di Garda
jQuery
HTML5 UPLOADER JOBBERONE
igloolab.com/jquery-html5-uploader jobberone.com
SHARP SQUARE
igloolab.com/sharpsquare
KOALA
POMODORO WEBAPP koooala.com
pomodorowebapp.com

6. Agenda

7. Why Backbone.js 06:00 min
Architecture 14:00 min
Real World 05:00 min
Tips & Tricks 06:00 min
Extras 04:00 min
Questions 05:00 min

8. Why
Backbone.js

9. Why Backbone.js
From server-side to client-side

10. Why Backbone.js
From server-side to client-side
We need efficient tools

11. Why Backbone.js
jQuery is cool but…

12. Why Backbone.js
jQuery is cool but…
We have to store object informations into
the DOM
var list = "";
$.each(data, function (index, value) {
list += "<li id="item-" + value.Id + "">" + value.Name + "</li>";
});
$("ul").append(list);

13. Why Backbone.js
jQuery is cool but…
We have to store object informations into
the DOM
var list = "";
$.each(data, function (index, value) {
list += "<li id="item-" + value.Id + "">" + value.Name + "</li>";
});
$("ul").append(list);

14. Why Backbone.js
jQuery is cool but…
jQuery callback hell
$.getJSON("/Items", function (data) {
var list = "";
$.each(data, function (index, value) {
list += "<li id="item-" + value.Id + "">" + value.Name + "</li>";
});
$("ul").append(list);
$("li").click(function () {
var $this = $(this);
var id = $this.attr("id").replace("item-", "");
$.post("/Items", { id: id }, function () {
$this.fadeOut(function () {
$this.remove();
});
});
});
});

15. Why Backbone.js
jQuery is cool but…
jQuery callback hell
$.getJSON("/Items", function (data) {
var list = "";
$.each(data, function (index, value) {
list += "<li id="item-" + value.Id + "">" + value.Name + "</li>";
});
$("ul").append(list);
$("li").click(function () {
var $this = $(this);
var id = $this.attr("id").replace("item-", "");
$.post("/Items", { id: id }, function () {
$this.fadeOut(function () {
$this.remove();
});
});
});
});

16. Why Backbone.js
“It's all too easy to create JavaScript
applications that end up as tangled piles of
jQuery selectors and callbacks.”

17. Why Backbone.js
So, what do we need?
• Abstraction.
• Decoupling UI from Data.
• No more callbacks.

18. Why Backbone.js
So, what do we need? (More practically)
• A RESTful service based data layer.
• Events (to keep UI and data up-to-date).
• A template engine.
• A solid routing system.
• All the above things wrapped into a lightweight
JavaScript framework.

19. Why Backbone.js
It exists and it’s called:
Backbone.js

20. Architecture

21. Architecture
Oct 13th, 2010
Jeremy
Ashkenas

22. Architecture
http://documentcloud.github.com/backbone
https://github.com/documentcloud/backbone
@documentcloud
#documentcloud on IRC
https://groups.google.com/forum/#!forum/backbonejs

23. Architecture
Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.

24. Architecture
Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.

25. Architecture
Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.

26. Architecture
Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.

27. Architecture
Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.

28. Architecture
Backbone.js gives structure to web
applications by providing models with key-
value binding and custom events,
collections with a rich API of enumerable
functions, views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.

29. Architecture
Dependencies:
• jQuery or Zepto
• Underscore.js
• Json2.js

30. Architecture
MVC
Model / Collection
Template (View)
View (Controller)
Router

31. Architecture
MVC
Model / Collection
Template (View)
View (Controller)
Router

32. Architecture
MVC
Model / Collection
Template (View)
View (Controller)
Router

33. Architecture
MVC
Model / Collection
Template (View)
View (Controller)
Router

34. Architecture
MVC
Model / Collection
Template (View)
View (Controller)
Router

35. Model
• Representing data
(auto-generated).
• Handling persistence.
• Throws events.
• Reusable.

36. Architecture
Model / Collection - View - Template - Router - Utilities
Model
• Fetch HTTP GET /url
• Save (new) HTTP POST /url
• Save HTTP PUT /url/id
• Destroy HTTP DELETE /url/id

37. Architecture
Model / Collection - View - Template - Router - Utilities
var Item = Backbone.Model.extend({
idAttribute: “Id”,
urlRoot: “/Items”
});

38. Architecture
Model / Collection - View - Template - Router - Utilities
var item = new Item();
item.set({
Name: “Igloo”
}); // trigger change
item.save(); // trigger sync

39. Architecture
Model / Collection - View - Template - Router - Utilities
Model
• extend • toJSON • changedAttributes
• constructor / initialize • fetch • previous
• get • save • previousAttributes
• set • destroy
• escape • validate
• has • isValid
• unset • url
• clear • urlRoot
• id • parse
• idAttribute • clone
• cid • isNew
• attributes • change
• defaults • hasChanged

40. Collection
• A list of models.
• Underscore methods.

41. Architecture
Model / Collection - View - Template - Router - Utilities
var Items = Backbone.Collection.extend({
model: Item,
url: "/Items"
});

42. Architecture
Model / Collection - View - Template - Router - Utilities
var items = new Items();
items.fetch(); // trigger reset

43. Architecture
Model / Collection - View - Template - Router - Utilities
items.comparator = function(item) {
return item.get("Name");
};

44. Architecture
Model / Collection - View - Template - Router - Utilities
Collection
• extend • getByCid • etch
• model • at • eset
• constructor / initialize • length • create
• models • comparator
• toJSON • sort
• add • pluck
• remove • url
• get • parse

45. Architecture
Model / Collection - View - Template - Router - Utilities
Collection • sortBy
• groupBy
• forEach (each) • sortedIndex
• map • shuffle
• reduce (foldl, inject) • toArray
• reduceRight (foldr) • size
• find (detect) • first
• filter (select) • initial
• reject • rest
• every (all) • last
• some (any) • without
• include • indexOf
• invoke • lastIndexOf
• max • isEmpty
• min • chain

46. View
• Manipulates the DOM.
• Delegates DOM events.
• Has a Model / Collection.

47. Architecture
Model / Collection - View - Template - Router - Utilities
View
View (Collection)
View (Model)

48. Architecture
Model / Collection - View - Template - Router - Utilities
var ListView = Backbone.View.extend({
el: $("ul"),
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render: function () {
this.collection.each(this.addItem, this);
return this;
},
addItem: function (item) {
var itemView = new ItemView({ var ItemView = Backbone.View.extend({
model: item tagName: "li",
}); render: function () {
this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));
itemView.render(); return this;
} }
}); });

49. Architecture
Model / Collection - View - Template - Router - Utilities
var ListView = Backbone.View.extend({
el: $("ul"),
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render: function () {
this.collection.each(this.addItem, this);
return this;
},
addItem: function (item) {
var itemView = new ItemView({ var ItemView = Backbone.View.extend({
model: item tagName: "li",
}); render: function () {
this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));
itemView.render(); return this;
} }
}); });

50. Architecture
Model / Collection - View - Template - Router - Utilities
var ListView = Backbone.View.extend({
el: $("ul"),
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render: function () {
this.collection.each(this.addItem, this);
return this;
},
addItem: function (item) {
var itemView = new ItemView({ var ItemView = Backbone.View.extend({
model: item tagName: "li",
}); render: function () {
this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));
itemView.render(); return this;
} }
}); });

51. Architecture
Model / Collection - View - Template - Router - Utilities
var ListView = Backbone.View.extend({
el: $("ul"),
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render: function () {
this.collection.each(this.addItem, this);
return this;
},
addItem: function (item) {
var itemView = new ItemView({ var ItemView = Backbone.View.extend({
model: item tagName: "li",
}); render: function () {
this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));
itemView.render(); return this;
} }
}); });

52. Architecture
Model / Collection - View - Template - Router - Utilities
var ListView = Backbone.View.extend({
el: $("ul"),
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render: function () {
this.collection.each(this.addItem, this);
return this;
},
addItem: function (item) {
var itemView = new ItemView({ var ItemView = Backbone.View.extend({
model: item tagName: "li",
}); render: function () {
this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));
itemView.render(); return this;
} }
}); });

53. Architecture
Model / Collection - View - Template - Router - Utilities
var ListView = Backbone.View.extend({
el: $("ul"),
initialize: function () {
this.collection.bind("reset", this.render, this);
},
render: function () {
this.collection.each(this.addItem, this);
return this;
},
addItem: function (item) {
var itemView = new ItemView({ var ItemView = Backbone.View.extend({
model: item tagName: "li",
}); render: function () {
this.$el.append(itemView.el); this.$el.text(this.model.get("Name"));
itemView.render(); return this;
} }
}); });

54. Architecture
Model / Collection - View - Template - Router - Utilities
var items = new Items();
var listView = new ListView({
collection: items
});
items.fetch();

55. Architecture
Model / Collection - View - Template - Router - Utilities
View
• $ (jQuery or Zepto) • extend
• render • constructor / initialize
• remove • el
• make • $el
• delegateEvents • setElement
• undelegateEvents • attributes

56. Template (Underscore.js)
Compiles JavaScript templates into functions
that can be evaluated for rendering.
• Mustache
• jQuery-tmpl

57. Architecture
Model / Collection - View - Template - Router - Utilities
<script type="text/template" id="item-template">
<li>
<%= Name %>
</li>
</script>

58. Architecture
Model / Collection - View - Template - Router - Utilities
var ItemView = Backbone.View.extend({
…
template: _.template($("#item-template").html()),
...
render: function () {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
…
});

59. Router
• Maps urls to function.
• Enable history / bookmarking.

60. Architecture
Model / Collection - View - Template - Router - Utilities
var AppRouter = Backbone.Router.extend({
routes: {
"": "initialize“
},
initialize: function () {
…
}
});

61. Architecture
Model / Collection - View - Template - Router - Utilities
window.AppRouter = Backbone.Router.extend({
routes: {
"": "loadInvoices",
"/add": "addInvoice",
"/show/:id": "showInvoice",
"/edit/:id": "editInvoice“
},
loadInvoices: function () {
…
},
addInvoice: function () {
…
},
showInvoice: function (id) {
…
},
editInvoice: function (id) {
…
}
});

62. Architecture
Model / Collection - View - Template - Router - Utilities
Router
• extend
• routes
• constructor / initialize
• route
• navigate

63. Utilities
• History
• Sync
• Utility

64. Architecture
Model /Collection
Data
Router View Source
Template

65. Real
World

66. Real World
Polar management
• Smart invoicing web application
Technologies
• .NET RESTful Web Services / MS SQL
• Backbone.js

67. Real World
Polar management

68. Real World

69. Real World

70. Real World
Polar management
window.AppRouter = Backbone.Router.extend({
routes: {
…
"/modifica/:id": "editInvoice“
},
editInvoice: function (id) {
…
}
});

71. Real World
Polar management
window.AppRouter = Backbone.Router.extend({
routes: {
…
"/modifica/:id": "editInvoice“
},
editInvoice: function (id) {
…
}
});

72. Real World
Koala
• Social media analytics
Technologies
• NET RESTful Web Services / RavenDB
• Backbone.js
• Highcharts.js

73. Real World

74. Real World

75. Real World
Koala
window.Logs = Backbone.Collection.extend({
model: Log,
url: "/Data",
comparator: function (log) {
return log.get("Date");
},
sum: function (field) {
return this.reduce(function (memo, log) {
return memo + log.get(field);
}, 0);
}
});

76. Real World
Koala
window.Logs = Backbone.Collection.extend({
model: Log,
url: "/Data",
comparator: function (log) {
return log.get("Date");
},
sum: function (field) {
return this.reduce(function (memo, log) {
return memo + log.get(field);
}, 0);
}
});

77. Real World
Koala
window.Logs = Backbone.Collection.extend({
model: Log,
url: "/Data",
comparator: function (log) {
return log.get("Date");
},
sum: function (field) {
return this.reduce(function (memo, log) {
return memo + log.get(field);
}, 0);
}
});

78. Real World
Linkedin

79. Real World
FourSquare

80. Real World
WunderKit

81. Real World
Groupon

82. Real World
Basecamp

83. 3
Tips &
Tricks

84. Tips & Tricks
idAttribute
idAttribute: “id”
// CouchDB
idAttribute: “_id”
// .NET
idAttribute: “Id”

85. Tips & Tricks
Related Models

86. Tips & Tricks
Related Models
var Invoice = Backbone.Model.extend({
idAttribute: “Id”
});
var Invoices = Backbone.Collection.extend({
model: Invoice,
url: "/Invoices"
});

87. Tips & Tricks
Related Models

88. Tips & Tricks
Related Models

89. Tips & Tricks
Related Models
var InvoiceDetail = Backbone.Model.extend({
idAttribute: “Id”
});
var InvoiceDetails = Backbone.Collection.extend({
model: InvoiceDetail,
url: "/InvoiceDetails“
});

90. Tips & Tricks
Related Models
var Invoice = Backbone.Model.extend({
idAttribute: "Id",
initialize: function () {
this.setInvoiceDetails();
},
setInvoiceDetails: function () {
this.set({
InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails"))
});
}
});

91. Tips & Tricks
Related Models

92. Tips & Tricks
Related Models

93. Tips & Tricks
Related Models
var Invoice = Backbone.Model.extend({
idAttribute: "Id",
initialize: function () {
this.setInvoiceDetails();
this.bind("sync", this.setInvoiceDetails);
},
setInvoiceDetails: function () {
this.set({
InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails"))
});
}
});

94. Extras

95. Extras
Plugins
• Backbone-Nested
• Backbone.Memento
• Backbone.Validations
• Backbone.localStorage
• backbone.couchdb.js
• …
https://github.com/documentcloud/backbone/wiki/Extensions%2C-
Plugins%2C-Resources

96. Extras
• http://sproutcore.com (Apple/iCloud)
• http://knockoutjs.com
• http://emberjs.com
• http://batmanjs.org (Shopify)

97. Extras
Cheat Sheet
• http://www.igloolab.com/downloads/backbone-cheatsheet.pdf

98. Backbone.js
+
• Lightweight
• Powerful
• Code is clean (and maintainable)
-
• Too verbose (for small applications)

99. 3
Lago di Garda
Questions ?
Grazie
www.igloolab.com
@iloveigloo