Backbone - TDC 2011 Floripa
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Backbone - TDC 2011 Floripa

  • 2,145 views
Uploaded on

MInha apresentação sobre Backbone.js no TDC 2011 - Floripa

MInha apresentação sobre Backbone.js no TDC 2011 - Floripa

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,145
On Slideshare
1,508
From Embeds
637
Number of Embeds
4

Actions

Shares
Downloads
34
Comments
0
Likes
4

Embeds 637

http://blog.crafters.com.br 620
http://coderwall.com 11
http://feeds.feedburner.com 5
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Interfaces ricas de forma clean
  • 2. http://github.com/fellix @rs_felix http://www.crafters.com.br @crafterstudiohttp://blog.rollingwithcode.com
  • 3. Backbone é uma estrutura para aplicações com uso pesado dejavascriptProvendo modelos (models) com binding “chave-valor” eeventos customizadosColeções (collections) com uma rica API de funções.Views com simples declaração de eventosConecta usando uma interface RESTful JSON
  • 4. Clean?
  • 5. Não gera tags html
  • 6. Não existem temas com tags pré definidas
  • 7. Não mistura front-end com back-end
  • 8. Componentes
  • 9. Backbone.Model
  • 10. Backbone.ModelCoração de umaaplicação JavaScript
  • 11. Backbone.ModelCoração de umaaplicação JavaScriptAcesso a dados
  • 12. Exemplo window.Todo = Backbone.Model.extend({ toggle: function(){ this.save({done: !this.get("done")}); }, clear: function(){ this.destroy(); $(this.view.el).dispose(); } });
  • 13. Exemplo window.Task = Backbone.Model.extend({ url: function(){ return this.id ? "/tasks/"+ this.id : "/tasks/"; }, defaults:{ task: { title: "nothing" }} });
  • 14. Exemplo window.Task = Backbone.Model.extend({ url: function(){ return this.id ? "/tasks/"+ this.id : "/tasks/"; }, defaults:{ task: { title: "nothing" }} });
  • 15. Backbone.ModelComo funciona?
  • 16. Backbone.ModelComo funciona? save
  • 17. Backbone.ModelComo funciona? save model.save({title: "texto"});
  • 18. Backbone.ModelComo funciona? save model.save({title: "texto"});
  • 19. Backbone.ModelComo funciona? save model.save({title: "texto"}); url: function(){ return this.id ? "/tasks/"+ this.id : "/tasks/"; }
  • 20. Backbone.Collection
  • 21. Backbone.CollectionColeções de Modelos
  • 22. Exemplo window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function(){ return this.filter(function(todo){ return todo.get("done"); }); } });
  • 23. Exemplo window.TaskCollection = Backbone.Collection.extend({ model: Task, url: "/tasks" });
  • 24. Exemplo window.TaskCollection = Backbone.Collection.extend({ model: Task, url: "/tasks" });
  • 25. Backbone.Router
  • 26. Backbone.RouterBaseado em #fragment
  • 27. Backbone.RouterBaseado em #fragmentRotas
  • 28. Exemplo window.Workspace = Backbone.Router.extend({ routes: { "help": "help", "search/:query": "search" }, help: function(){ ... }, search: function(query){ ... }, });
  • 29. Exemplo window.Workspace = Backbone.Router.extend({ routes: { "help": "help", #help "search/:query": "search" }, #search/kiwis help: function(){ ... }, search: function(query){ ... }, });
  • 30. Backbone.history
  • 31. Backbone.historyGlobal Router
  • 32. Backbone.historyGlobal Routerstart
  • 33. Backbone.historyGlobal Routerstart Backbone.history.start()
  • 34. Backbone.View
  • 35. Backbone.ViewOrganização
  • 36. Exemplo window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: ._template("..."), events: { "click .todo-check": "toogleDone", "dblclick .todo-content": "edit", ... }, initialize: function(){ ._bindAll(this, "render", "close"); this.model.bind("change", this.render); this.model.view = this; } ... });
  • 37. Exemplo window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: ._template("..."), events: { "click .todo-check": "toogleDone", "dblclick .todo-content": "edit", ... }, initialize: function(){ ._bindAll(this, "render", "close"); this.model.bind("change", this.render); this.model.view = this; } ... });
  • 38. Exemplo window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: ._template("..."), events: { "click .todo-check": "toogleDone", "dblclick .todo-content": "edit", ... }, initialize: function(){ ._bindAll(this, "render", "close"); this.model.bind("change", this.render); this.model.view = this; } ... });
  • 39. Exemplo
  • 40. Exemplo
  • 41. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=create-todo>          <input id=new-todo placeholder=What needs to be done?type=text />          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul>        </div>      </div>      <div id=todo-stats></div>    </div>
  • 42. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=create-todo>          <input id=new-todo placeholder=What needs to be done?type=text />          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul>        </div>      </div>      <div id=todo-stats></div>    </div>
  • 43. Exemplo window.AppView = Backbone.View.extend({      el: $("todoapp"), ...});window.App = new AppView;
  • 44. Exemplo
  • 45. Exemplo TodoView TodoView TodoView
  • 46. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 47. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 48. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",    className: "todo", TodoView   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), ... TodoView});
  • 49. Exemplo TodoView TodoView TodoView
  • 50. Exemplo keypress event TodoView click event TodoView dblclick event TodoView
  • 51. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1> keypress event      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> click event TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> dblclick event TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 52. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1> keypress event      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> click event TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> dblclick event TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 53. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1> keypress event      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> click event TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> dblclick event TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 54. Exemplo keypress event TodoView   window.AppView = Backbone.View.extend({      el: $("todoapp"), TodoView    statsTemplate: _.template(...),   click event    events: { TodoView      "keypress #new-todo" : "createOnEnter",      ... dblclick event    }, });
  • 55. Exemplo keypress event TodoView   window.AppView = Backbone.View.extend({      el: $("todoapp"), TodoView    statsTemplate: _.template(...),   click event    events: { TodoView      "keypress #new-todo" : "createOnEnter",      ... dblclick event    }, });
  • 56. Exemplo keypress event TodoView   window.AppView = Backbone.View.extend({      el: $("todoapp"), TodoView    statsTemplate: _.template(...),   click event    events: { TodoView      "keypress #new-todo" : "createOnEnter",      ... dblclick event    }, });
  • 57. Exemplo keypress event TodoView   window.AppView = Backbone.View.extend({      el: $("todoapp"), TodoView    statsTemplate: _.template(...),   click event    events: { TodoView      "keypress #new-todo" : "createOnEnter",      ... dblclick event    }, });
  • 58. Exemplo keypress event    createOnEnter: function(e) {      if (e.code != 13) return;      Todos.create({ TodoView        done:      }); false click event        content: this.input.getProperty("value"), TodoView dblclick event      this.input.setProperty("value", "");    } TodoView
  • 59. Exemplo keypress event    createOnEnter: function(e) {      if (e.code != 13) return;      Todos.create({ TodoView        done:      }); false click event        content: this.input.getProperty("value"), TodoView dblclick event      this.input.setProperty("value", "");    } TodoView
  • 60. Exemplo keypress event    createOnEnter: function(e) {      if (e.code != 13) return;      Todos.create({ TodoView        done:      }); false click event        content: this.input.getProperty("value"), TodoView dblclick event      this.input.setProperty("value", "");    } TodoView
  • 61. Exemplo keypress event    createOnEnter: function(e) {      if (e.code != 13) return;      Todos.create({ TodoView        done:      }); false click event        content: this.input.getProperty("value"), TodoView dblclick event      this.input.setProperty("value", "");    } TodoView
  • 62. Exemplo keypress event TodoView click event TodoView dblclick event TodoView
  • 63. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 64. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 65. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 66. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 67. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 68. Exemplo keypress event    TodoView    toggleDone: function() {      this.model.toggle();    } click event TodoView dblclick event TodoView
  • 69. Exemplo keypress event    TodoView     toggle: function() {    toggleDone: function() {      this.model.toggle();    } click event TodoView       this.save({done: !this.get("done")});     } dblclick event TodoView
  • 70. Exemplo keypress event    TodoView    initialize: function() {       _.bindAll(this, render, close);       this.model.bind(change,    toggleDone: function() {      this.model.toggle();    } click event this.render); TodoView       this.model.view = this;     } dblclick event TodoView
  • 71. Exemplo keypress event      render: function() { TodoView      $(this.el).set(html, this.template(this.model.toJSON())); click event TodoView      $(this.el).setProperty("id", "todo-"+this.model.id);      this.setContent();      sortableTodos.addItems(this.el);      return this;    } dblclick event TodoView
  • 72. Exemplo keypress event      render: function() { TodoView      $(this.el).set(html, this.template(this.model.toJSON())); click event TodoView      $(this.el).setProperty("id", "todo-"+this.model.id);      this.setContent();      sortableTodos.addItems(this.el);      return this;    } dblclick event TodoView
  • 73. Exemplo keypress event window.TodoView = Backbone.View.extend({ TodoView         render: function() {     tagName: "li",     className: "todo"      $(this.el).set(html, this.template(this.model.toJSON())); TodoView ...      this.setContent(); }); click event      $(this.el).setProperty("id", "todo-"+this.model.id);      sortableTodos.addItems(this.el);      return this;    } dblclick event TodoView
  • 74. Exemplo keypress event      render: function() { TodoView      $(this.el).set(html, this.template(this.model.toJSON())); click event TodoView      $(this.el).setProperty("id", "todo-"+this.model.id);      this.setContent();      sortableTodos.addItems(this.el);      return this;    } dblclick event TodoView
  • 75. Exemplo keypress event      render: function() { TodoView      $(this.el).set(html, this.template(this.model.toJSON())); click event TodoView      $(this.el).setProperty("id", "todo-"+this.model.id);      this.setContent();      sortableTodos.addItems(this.el);      return this;    } dblclick event TodoView
  • 76. Exemplo setContent: function() { keypress event       var content = this.model.get(content);       this.$(.todo-content).set("html", content);       this.$(.todo-input).setProperty("value", content);      render: function() {        TodoView       if (this.model.get(done)) {      $(this.el).set(html, this.template(this.model.toJSON()));         this.$(".todo-check").setProperty("checked", "checked");      this.setContent(); click event       } else {      sortableTodos.addItems(this.el); TodoView      $(this.el).setProperty("id", "todo-"+this.model.id);         $(this.el).addClass("done");         this.$(".todo-check").removeProperty("checked");      return this;    } dblclick event TodoView         $(this.el).removeClass("done");       }              this.input = this.$(".todo-input");       this.input.addEvent(blur, this.close);     }
  • 77. Exemplo keypress event TodoView click event TodoView dblclick event TodoView
  • 78. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 79. Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li", keypress event    className: "todo",   TodoView    template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), events: { click event TodoView      "click .todo-check"      "dblclick .todo-content"      "click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView      "keypress .todo-input" : "updateOnEnter"    },...});
  • 80. Exemplo keypress event edit: function() { TodoView     $(this.el).addClass("editing");  } this.input.focus(); click event TodoView dblclick event TodoView
  • 81. Exemplo keypress event setContent: function() { TodoView ...      this.input.addEvent(blur, this.close); edit: function() { }     $(this.el).addClass("editing");  } this.input.focus(); click event TodoView dblclick event TodoView
  • 82. Exemplo keypress event    close: function() { TodoView click event TodoView      this.model.save({content: this.input.getProperty("value")});      $(this.el).removeClass("editing");    } dblclick event TodoView
  • 83. Exemplo keypress event     close: function() { TodoView click event TodoView       this.model.save({content: this.input.getProperty("value")});       $(this.el).removeClass("editing");     } dblclick event TodoViewsave change render
  • 84. Exemplo keypress event TodoView click event TodoView dblclick event TodoView
  • 85. Exemplo TodoList keypress event TodoView click event TodoView dblclick event TodoView
  • 86. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1> keypress event      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> click event TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> dblclick event TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 87. Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1> keypress event      </div>      <div class=content>        <div id=create-todo> TodoView          <input id=new-todo placeholder=What needs to be done?type=text /> click event TodoView          <span class=ui-tooltip-top>Press Enter to create this task</span>        </div>        <div id=todos>          <ul id=todo-list></ul> dblclick event TodoView        </div>      </div>      <div id=todo-stats></div>    </div>
  • 88. Exemplo  window.AppView = Backbone.View.extend({ keypress event initialize: function() {       _.bindAll(this, addOne, addAll, render);     TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render); TodoView       Todos.fetch();    } });
  • 89. Exemplo  window.AppView = Backbone.View.extend({ keypress event initialize: function() {       _.bindAll(this, addOne, addAll, render);     TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render); TodoView       Todos.fetch();    } });
  • 90. Exemplo  window.AppView = Backbone.View.extend({ keypress event initialize: function() {       _.bindAll(this, addOne, addAll, render);     TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render); TodoView       Todos.fetch();    } });
  • 91. Exemplo  window.AppView = Backbone.View.extend({ keypress event initialize: function() {       _.bindAll(this, addOne, addAll, render);     TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render); TodoView       Todos.fetch();    } });
  • 92. Exemplo  window.AppView = Backbone.View.extend({ keypress event initialize: function() {       _.bindAll(this, addOne, addAll, render);     TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render); TodoView       Todos.fetch();    } });
  • 93. Exemplo  window.AppView = Backbone.View.extend({ keypress event initialize: function() {       _.bindAll(this, addOne, addAll, render);     TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView     addAll: function() {       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render);     }TodoView       Todos.each(this.addOne);       Todos.fetch();    } });
  • 94. Exemplo    addOne: function(todo) { keypress event  window.AppView = Backbone.View.extend({TodoView({model: todo}).render().el;       var view = new       this.$("#todo-list").grab(view); initialize: function() {       ...       _.bindAll(this, addOne, addAll, render);         } TodoView       this.input = this.$("#new-todo");             Todos.bind(add, click event this.addOne); TodoView     addAll: function() {       Todos.bind(refresh, this.addAll);       Todos.bind(all,     dblclick event this.render); TodoView       Todos.each(this.addOne);     }       Todos.fetch();    } });
  • 95. Exemplo    addOne: function(todo) { keypress event   window.AppView = Backbone.View.extend({TodoView({model: todo}).render().el;       var view = new       this.$("#todo-list").grab(view); initialize: function() {       ... TodoView        _.bindAll(this, addOne, addAll, render);          }        this.input = this.$("#new-todo");                  Todos.bind(add,<ul id=todo-list></ul>   click event this.addOne); TodoView     addAll: function() {        Todos.bind(refresh, this.addAll);        Todos.bind(all,      dblclick event this.render); TodoView       Todos.each(this.addOne);     }        Todos.fetch();     } });
  • 96. Exemplos
  • 97. Exemplos
  • 98. Exemplos
  • 99. Exemplos
  • 100. Exemplos
  • 101. Exemploshttp://documentcloud.github.com/backbone/https://github.com/jeromegn/localtodoshttp://documentcloud.github.com/backbone/examples/todoshttp://www.documentcloud.org/public/search/http://www.linkedin.com/static?key=mobilehttp://basecamphq.com/mobilehttps://www.apptrajectory.com/
  • 102. Obrigado! http://github.com/fellix @rs_felix http://www.crafters.com.br @crafterstudio http://blog.rollingwithcode.com