backbone.js - a espinha dorsal de aplicações web

Henrique Gogó@henriquegogo

Backbone.js

A espinha dorsal de aplicações web

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.

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;

})

Mas com Backbone.js...

Você pode representar seus dados como modelos, que podem ser criados, validados,

destruídos, e salvos no servidor

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);

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" });

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

E não é só isso!

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.

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); }});

E NÃO ÉSÓ ISSO!!!

Rotas client-side

Sincronização automática com o servidor

Templates (underscore.js)

Compatibilidade com jQuery (ou outros)

E quem usa?

LinkedIn MobileFoursquareWunderkit

DisqusWalmart MobileGroupon Now!

Basecamp MobileAirbnb Mobile

SoundCloud MobileTrello

http://backbonejs.org

http://www.gogs.com.br