Backbone.jsA espinha dorsal de aplicações web            Henrique Gogó            @henriquegogo
jQuery para tudo?  É um framework para trabalhar com DOM.Infelizmente, quando começamos a ter pilhas e pilhas de arquivos ...
Como (provavelmente) você faz hoje $("input[name=age]").on("change", function() {     if ($(this).val() > 15) {         co...
Mas com Backbone.js... Você pode representar seus dados comomodelos, que podem ser criados, validados,     destruídos, e s...
Modelvar User = Backbone.Model.extend({    urlRoot: "/users",    defaults: {       name: "Unknown user",    },    validate...
Collectionsvar Users = Backbone.Collection.extend({    model: User});var employees = new Users([{ name: "Letícia" },{ name...
Mais sobre collectionsUsers.each(function(user) {  user.facaAlgo();});var nomes = Users.map(function(user) {  return user....
E não é só isso!
Você não tem que escrever o código que olhapara o DOM para encontrar um elemento com    um id específico, e atualizar o HT...
Views + Backbone.ModelBindervar View = Backbone.View.extend({    el: "body",    initialize: function() {       this.modelB...
E NÃO ÉSÓ ISSO!!!
Rotas client-sideSincronização automática com o servidorTemplates (underscore.js)Compatibilidade com jQuery (ou outros)
E quem usa?  LinkedIn Mobile    Foursquare     Wunderkit       Disqus  Walmart Mobile  Groupon Now! Basecamp Mobile   Airb...
http://backbonejs.org
http://www.gogs.com.br
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
Próximos SlideShares
Carregando em…5
×

Backbone.js - A espinha dorsal de aplicações web

5.208 visualizações

Publicada em

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 comentário
4 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
5.208
No SlideShare
0
A partir de incorporações
0
Número de incorporações
847
Ações
Compartilhamentos
0
Downloads
38
Comentários
1
Gostaram
4
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Backbone.js - A espinha dorsal de aplicações web

  1. 1. Backbone.jsA espinha dorsal de aplicações web Henrique Gogó @henriquegogo
  2. 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 ecallbacks podem deixar seu código bagunçado.
  3. 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. 4. Mas com Backbone.js... Você pode representar seus dados comomodelos, que podem ser criados, validados, destruídos, e salvos no servidor
  5. 5. 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);
  6. 6. Collectionsvar 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. 7. Mais sobre collectionsUsers.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. 8. E não é só isso!
  9. 9. Você não tem que escrever o código que olhapara 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.
  10. 10. Views + Backbone.ModelBindervar 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); }});
  11. 11. E NÃO ÉSÓ ISSO!!!
  12. 12. Rotas client-sideSincronização automática com o servidorTemplates (underscore.js)Compatibilidade com jQuery (ou outros)
  13. 13. E quem usa? LinkedIn Mobile Foursquare Wunderkit Disqus Walmart Mobile Groupon Now! Basecamp Mobile Airbnb MobileSoundCloud Mobile Trello
  14. 14. http://backbonejs.org
  15. 15. http://www.gogs.com.br

×