Uma ferramenta completa para construção de aplicações web complexas com modelos de view, bindings, eventos e coleções de maneira elegante e organizada. Conecte facilmente sua camada de apresentação com seu servidor usando REST e requisições AJAX.

1. Backbone.js
A espinha dorsal de aplicações web
Henrique Gogó
@henriquegogo

2. jQuery para tudo?
É um framework para trabalhar com DOM.
Infelizmente, quando começamos a ter pilhas e
pilhas de arquivos JS, lidar com o seletores e
callbacks podem deixar seu código bagunçado.

3. Como (provavelmente) você faz hoje
$("input[name=age]").on("change", function() {
if ($(this).val() > 15) {
console.log("Velhote");
}
});
$("form").submit(function() {
$.post("/users", $("form").serialize());
return false;
})

4. Mas com Backbone.js...
Você pode representar seus dados como
modelos, que podem ser criados, validados,
destruídos, e salvos no servidor

5. Model
var User = Backbone.Model.extend({
urlRoot: "/users",
defaults: {
name: "Unknown user",
},
validate: function(attrs) {
if (attrs.age > 15) {
console.log("Velhote");
}
}
});
var henrique = new User({ id: 1, name: "Henrique" });
henrique.set("age", 27);

6. Collections
var Users = Backbone.Collection.extend({
model: User
});
var employees = new Users([{ name: "Letícia" },
{ name: "Mateus" }]);
employees.on("add", function(user) {
console.log("Welcome " + user.get("name") + "!");
});
employees.add({ name: "Roberto" });

7. Mais sobre collections
Users.each(function(user) {
user.facaAlgo();
});
var nomes = Users.map(function(user) {
return user.get("name");
});
var ordenado = Users.sortBy(function(user) {
return user.get("name").toLowerCase();
});

8. E não é só isso!

9. Você não tem que escrever o código que olha
para o DOM para encontrar um elemento com
um id específico, e atualizar o HTML
manualmente.
Basta alterar o Model e sua View simplesmente
irá atualizar.

11. Views + Backbone.ModelBinder
var View = Backbone.View.extend({
el: "body",
initialize: function() {
this.modelBinder = new Backbone.ModelBinder();
this.modelBinder.bind(this.model, this.el);
},
render: function() {
console.log(this);
}
});

12. E NÃO É
SÓ ISSO!!!

13. Rotas client-side
Sincronização automática com o servidor
Templates (underscore.js)
Compatibilidade com jQuery (ou outros)

14. E quem usa?
LinkedIn Mobile
Foursquare
Wunderkit
Disqus
Walmart Mobile
Groupon Now!
Basecamp Mobile
Airbnb Mobile
SoundCloud Mobile
Trello

15. http://backbonejs.org

17. http://www.gogs.com.br