![Page 1: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/1.jpg)
Henrique Gogó@henriquegogo
Backbone.js
A espinha dorsal de aplicações web
![Page 2: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/2.jpg)
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.
![Page 3: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/3.jpg)
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;
})
![Page 4: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/4.jpg)
Mas com Backbone.js...
Você pode representar seus dados como modelos, que podem ser criados, validados,
destruídos, e salvos no servidor
![Page 5: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/5.jpg)
Modelvar 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);
![Page 6: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/6.jpg)
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" });
![Page 7: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/7.jpg)
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();});
![Page 8: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/8.jpg)
E não é só isso!
![Page 9: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/9.jpg)
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.
![Page 10: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/10.jpg)
![Page 11: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/11.jpg)
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); }});
![Page 12: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/12.jpg)
E NÃO ÉSÓ ISSO!!!
![Page 13: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/13.jpg)
Rotas client-side
Sincronização automática com o servidor
Templates (underscore.js)
Compatibilidade com jQuery (ou outros)
![Page 14: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/14.jpg)
E quem usa?
LinkedIn MobileFoursquareWunderkit
DisqusWalmart MobileGroupon Now!
Basecamp MobileAirbnb Mobile
SoundCloud MobileTrello
![Page 15: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/15.jpg)
http://backbonejs.org
![Page 16: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/16.jpg)
![Page 17: Backbone.js - A espinha dorsal de aplicações web](https://reader035.vdocuments.net/reader035/viewer/2022062220/558e69a21a28abfa658b460a/html5/thumbnails/17.jpg)
http://www.gogs.com.br