Understanding backbonejs

Client-side MVC with
Backbone.js
Jquery to Backbone.js

Agenda
• Why Backbone.js
• Architecture
• Jquery to Backbone.js
• Real World Examples
• Resources
• Extras
• Questions

Why backbonejs
• From server-side to client-side
• From server-side to client-side We need
efficient tools
• Jquery is cool but…

Why backbone.js
• 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);

Callback hell
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();
});
});
});

Why Backbone.js
“Its all too easy to create JavaScript applications
that end up as tangled piles of Jquery
selectors and callbacks.”
• So, what do we need?
• Abstraction.
• Decoupling UI from Data.
• No more callbacks.

Why Backbone.js
• 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.

Architecture
• Oct 13th, 2010 Jeremy Ashkenas
• http://documentcloud.github.com/backbone
• https://github.com/documentcloud/backbone
• @documentcloud
• #documentcloud on IRC
• https://groups.google.com/forum/#!forum/ba
ckbonejs

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.

Dependencies
• jQuery or Zepto
• Underscore.js
• Json2.js

MVC
• Model / Collection
• Template (View)
• View (Controller)
• Router

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

Model
• Fetch HTTP GET /url
• Save (new) HTTP POST /url
• Save HTTP PUT /url/id
• Destroy HTTP DELETE /url/id

Model
var Item = Backbone.Model.extend({
idAttribute: “Id”,
urlRoot: “/Items”
});

Model
var item = new Item();
item.set({ Name: “Nick” }); // trigger change
item.save(); // trigger sync

Model
http://backbonejs.org/#Model

Collection
• A list of models.
• Underscore methods.

Collection
var Items = Backbone.Collection.extend({
model: Item,
url: "/Items“
});
var items = new Items();
items.fetch(); // trigger reset
items.comparator = function(item) {
return item.get("Name");
}

Collection
http://backbonejs.org/#Collection

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

View
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",
});
this.$el.append(itemView.el);
this.$el.text(this.model.get("Name"));
itemView.render();
return this;
}
}
});
});

View
var items = new Items();
var listView = new ListView({
collection: items
});
items.fetch();

View
http://backbonejs.org/#View

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

Template
<script type = “text/template” id = “item-template” >
<li><%= Name %></li>
</script>

var ItemView = Backbone.View.extend({
…
template: _.template($("#item-template").html()),
...
this.$el.html(this.template(this.model.toJSON()));
return this;
}
…
});

Router
• Maps urls to function.
• Enable history / bookmarking.
var AppRouter = Backbone.Router.extend({
routes: {
"": "init"
},
init: function() {
…
}
});

Router
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) {…
}
});

Router
http://backbonejs.org/#Router

Jquery to Backbone.js
$(document).ready(function() {
$('#new-status form').submit(function(e) {
e.preventDefault();

$.ajax({
url: '/status',
type: 'POST',
dataType: 'json',
data: { text: $('#new-status').find('textarea').val() },
success: function(data) {
$('#statuses').append('<li>' + data.text + '</li>');
$('#new-status').find('textarea').val('');
}
});
});
});

Step to step from Jquery to
var Status = Backbone.Model.extend({
Backbone.js
url: '/status'
});

var Statuses = Backbone.Collection.extend({
model: Status
});

var NewStatusView = Backbone.View.extend({
events: {
'submit form': 'addStatus'
},

this.collection.on('add', this.clearInput, this);
},

addStatus: function(e) {
e.preventDefault();

this.collection.create({ text: this.$('textarea').val() });
},

clearInput: function() {
this.$('textarea').val('');
}
});

Real World
• DocumdentCloud
• LinkedIn mobile
• Pandora
• Airbnb
• Hulu
• BaseCamp
• Diaspora
http://backbonejs.org/#examples

Resource
/wiki
/wiki/Extensions%2C-Plugins%2C-Resources
• http://backbonetutorials.com/
• http://addyosmani.github.com/backbone-
fundamentals/

Extra
TDD – Jasmine
http://pivotal.github.com/jasmine/

describe("Todo", function() {
it("Should have a title", function() {
var todo = new Todo();
expect(todo.get("title")).toBeDeﬁned();
});
});

Pros and Cons
+
• Lightweight
• Powerful
• Code is clean(and maintainable)
-
• Too verbose(for small applications)

Understanding backbonejs

Recommended

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Understanding backbonejs (20)

Recently uploaded (20)

Understanding backbonejs