Introdução ao Backbone.js

Transcript

1. Arthur Zapparoli @arthurgeek
2. Contacts App
3. GET /contacts
4. GET /contacts [ { "created_at": "2012-05-01T18:18:27Z", "updated_at": "2012-05-01T18:18:27Z", "id": 1, "last_name": "Simpson", "first_name": "Homer", "email": "homer@simpsons.com" }, { "created_at": "2012-05-01T18:18:37Z", "updated_at": "2012-05-01T18:18:37Z", "id": 2, "last_name": "Simpson", "first_name": "Marge", "email": "marge@simpsons.com" } ]
5. Contacts App jQuery-way
6. jQuery-way
7. jQuery-way $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); });
8. jQuery-way $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); <tr id="contact-1"> <td>Homer</td> <td>Simpson</td> <td>homer@simpsons.com</td> </tr> <tr id="contact-2"> <td>Marge</td> <td>Simpson</td> <td>marge@simpsons.com</td> </tr>
11. jQuery-way $(".delete").click(function() { var contactRow = $(this).closest("tr"); var id = contactRow.attr("id").replace("contact-", ""); $.ajax({ url:"/contacts/" + id, type:"DELETE", success: function() { contactRow.remove(); } }); });
13. Problem?
14. Dados acoplados ao DOM
15. Dados acoplados ao DOM <tr id="contact-1"> <td>Homer</td> <td>Simpson</td> <td>homer@simpsons.com</td> </tr> <tr id="contact-2"> <td>Marge</td> <td>Simpson</td> <td>marge@simpsons.com</td> </tr>
16. Dados acoplados ao DOM <tr id="contact-1"> <td>Homer</td> <td>Simpson</td> <td>homer@simpsons.com</td> </tr> <tr id="contact-2"> <td>Marge</td> <td>Simpson</td> <td>marge@simpsons.com</td> </tr>
17. Dados acoplados ao DOM <tr id="contact-1"> <td>Homer</td> <td>Simpson</td> <td>homer@simpsons.com</td> </tr> <tr id="contact-2"> <td>Marge</td> <td>Simpson</td> <td>marge@simpsons.com</td> </tr>
18. Callback/Selectors hell
19. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell
20. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell
21. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell
22. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell
23. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell $(".delete").click(function() { var contactRow = $(this).closest("tr"); var id = contactRow.attr("id").replace("contact-", ""); $.ajax({ url:"/contacts/" + id, type:"DELETE", success: function() { contactRow.remove(); } }); });
24. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell $(".delete").click(function() { var contactRow = $(this).closest("tr"); var id = contactRow.attr("id").replace("contact-", ""); $.ajax({ url:"/contacts/" + id, type:"DELETE", success: function() { contactRow.remove(); } }); });
25. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell $(".delete").click(function() { var contactRow = $(this).closest("tr"); var id = contactRow.attr("id").replace("contact-", ""); $.ajax({ url:"/contacts/" + id, type:"DELETE", success: function() { contactRow.remove(); } }); });
26. $.getJSON("/contacts", function(data) { var contacts = []; $.each(data, function(index, contact) { var contactData = []; contactData.push("<td>" + contact.first_name + "</td>"); contactData.push("<td>" + contact.last_name + "</td>"); contactData.push("<td>" + contact.email + "</td>"); var row = $("<tr>", { id: "contact-" + contact.id, html: contactData.join("") }); contacts.push(row.get(0)); }); $("tbody").append(contacts); }); Callback/Selectors hell $(".delete").click(function() { var contactRow = $(this).closest("tr"); var id = contactRow.attr("id").replace("contact-", ""); $.ajax({ url:"/contacts/" + id, type:"DELETE", success: function() { contactRow.remove(); } }); });
27. Do que precisamos?
28. Do que precisamos? • Desacoplar os dados da UI
29. Do que precisamos? • Desacoplar os dados da UI • Não manipular diretamente o DOM
30. Do que precisamos? • Desacoplar os dados da UI • Não manipular diretamente o DOM • Eliminar/diminuir os callbacks
31. Do que precisamos? • Desacoplar os dados da UI • Não manipular diretamente o DOM • Eliminar/diminuir os callbacks • Estruturar nosso código client-side
34. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.js ?
35. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.js ?
36. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.js ?
37. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.js ?
38. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.js ?
39. Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. Backbone.js ?
40. Backbone.js ?
41. Backbone.js ? • Criado por Jeremy Ashkenas
42. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js
43. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript
44. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight
45. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb
46. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender
47. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC
48. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado
49. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado • http://documentcloud.github.com/backbone/docs/backbone.html
50. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado • http://documentcloud.github.com/backbone/docs/backbone.html • MVC-style
51. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado • http://documentcloud.github.com/backbone/docs/backbone.html • MVC-style • Model, View, ViewController
52. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado • http://documentcloud.github.com/backbone/docs/backbone.html • MVC-style • Model, View, ViewController • Poucas dependências
53. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado • http://documentcloud.github.com/backbone/docs/backbone.html • MVC-style • Model, View, ViewController • Poucas dependências • Underscore.js
54. Backbone.js ? • Criado por Jeremy Ashkenas • Underscore.js • Coffeescript • Lightweight • < 6kb • Fácil de entender • 1239 LOC • Muito bem documentado • http://documentcloud.github.com/backbone/docs/backbone.html • MVC-style • Model, View, ViewController • Poucas dependências • Underscore.js • jQuery ou Zepto.js
55. MVC?
56. MVC? •Model • Backbone.Model / Backbone.Collection
57. MVC? •Model • Backbone.Model / Backbone.Collection •View • Templates • Underscore.js, Handlebars, Mustache.js, etc
58. MVC? •Model • Backbone.Model / Backbone.Collection •View • Templates • Underscore.js, Handlebars, Mustache.js, etc •Controller • Backbone.View / Backbone.Router
59. Backbone.Model
60. Backbone.Model • Representa seus Dados
61. Backbone.Model • Representa seus Dados • Validações
62. Backbone.Model • Representa seus Dados • Validações • Persistência
63. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({});
64. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({ urlRoot: "/contacts" }); var bart = new Contact({ first_name: "Bart", last_name: "Simpson", email: "bart@simpsons.com" }); bart.save(); // POST /contacts bart.set("email", "bart.simpson@gmail.com"); bart.save(); // PUT /contacts/1 bart.destroy(); // DELETE /contacts/1
65. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({ urlRoot: "/contacts" }); var bart = new Contact({ first_name: "Bart", last_name: "Simpson", email: "bart@simpsons.com" }); bart.save(); // POST /contacts bart.set("email", "bart.simpson@gmail.com"); bart.save(); // PUT /contacts/1 bart.destroy(); // DELETE /contacts/1
66. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({ urlRoot: "/contacts" }); var bart = new Contact({ first_name: "Bart", last_name: "Simpson", email: "bart@simpsons.com" }); bart.save(); // POST /contacts bart.set("email", "bart.simpson@gmail.com"); bart.save(); // PUT /contacts/1 bart.destroy(); // DELETE /contacts/1
67. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({ urlRoot: "/contacts" }); var bart = new Contact({ first_name: "Bart", last_name: "Simpson", email: "bart@simpsons.com" }); bart.save(); // POST /contacts bart.set("email", "bart.simpson@gmail.com"); bart.save(); // PUT /contacts/1 bart.destroy(); // DELETE /contacts/1
68. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({ urlRoot: "/contacts" }); var bart = new Contact({ first_name: "Bart", last_name: "Simpson", email: "bart@simpsons.com" }); bart.save(); // POST /contacts bart.set("email", "bart.simpson@gmail.com"); bart.save(); // PUT /contacts/1 bart.destroy(); // DELETE /contacts/1
69. Backbone.Model • Representa seus Dados • Validações • Persistência App.Models.Contact = Backbone.Model.extend({ urlRoot: "/contacts" }); var bart = new Contact({ first_name: "Bart", last_name: "Simpson", email: "bart@simpsons.com" }); bart.save(); // POST /contacts bart.set("email", "bart.simpson@gmail.com"); bart.save(); // PUT /contacts/1 bart.destroy(); // DELETE /contacts/1
70. Backbone.Collection
71. Backbone.Collection • Array de modelos
72. Backbone.Collection • Array de modelos • Métodos utilitários (underscore.js)
73. Backbone.Collection • Array de modelos • Métodos utilitários (underscore.js) App.Collections.Contact = Backbone.Collection.extend({ model: App.Models.Contact, url: "/contacts" }); var contacts = new App.Collections.Contact(); contacts.fetch(); // GET /contacts var arthur = contacts.create({ first_name: "Arthur", last_name: "Zapparoli", email: "arthur@zapparo.li" }); // POST /contacts var familyNames = contacts.pluck("last_name"); var simpsons = contacts.filter(function(contact) { return contact.get("last_name") === "Simpson"; });
74. Backbone.Collection • Array de modelos • Métodos utilitários (underscore.js) App.Collections.Contact = Backbone.Collection.extend({ model: App.Models.Contact, url: "/contacts" }); var contacts = new App.Collections.Contact(); contacts.fetch(); // GET /contacts var arthur = contacts.create({ first_name: "Arthur", last_name: "Zapparoli", email: "arthur@zapparo.li" }); // POST /contacts var familyNames = contacts.pluck("last_name"); var simpsons = contacts.filter(function(contact) { return contact.get("last_name") === "Simpson"; });
75. Backbone.Collection • Array de modelos • Métodos utilitários (underscore.js) App.Collections.Contact = Backbone.Collection.extend({ model: App.Models.Contact, url: "/contacts" }); var contacts = new App.Collections.Contact(); contacts.fetch(); // GET /contacts var arthur = contacts.create({ first_name: "Arthur", last_name: "Zapparoli", email: "arthur@zapparo.li" }); // POST /contacts var familyNames = contacts.pluck("last_name"); var simpsons = contacts.filter(function(contact) { return contact.get("last_name") === "Simpson"; });
76. Backbone.Collection • Array de modelos • Métodos utilitários (underscore.js) App.Collections.Contact = Backbone.Collection.extend({ model: App.Models.Contact, url: "/contacts" }); var contacts = new App.Collections.Contact(); contacts.fetch(); // GET /contacts var arthur = contacts.create({ first_name: "Arthur", last_name: "Zapparoli", email: "arthur@zapparo.li" }); // POST /contacts var familyNames = contacts.pluck("last_name"); var simpsons = contacts.filter(function(contact) { return contact.get("last_name") === "Simpson"; });
77. Backbone.Collection • Array de modelos • Métodos utilitários (underscore.js) App.Collections.Contact = Backbone.Collection.extend({ model: App.Models.Contact, url: "/contacts" }); var contacts = new App.Collections.Contact(); contacts.fetch(); // GET /contacts var arthur = contacts.create({ first_name: "Arthur", last_name: "Zapparoli", email: "arthur@zapparo.li" }); // POST /contacts var familyNames = contacts.pluck("last_name"); var simpsons = contacts.filter(function(contact) { return contact.get("last_name") === "Simpson"; });
78. Backbone.View
79. Backbone.View • Controller
80. Backbone.View • Controller • Trata os eventos do DOM
81. Backbone.View • Controller • Trata os eventos do DOM • Renderiza um Model ou Collection
82. Backbone.View • Controller • Trata os eventos do DOM • Renderiza um Model ou Collection App.Views.Contacts = Backbone.View.extend({ el: "#contacts" }); App.Views.Contact = Backbone.View.extend({ tagName: "tr", template: _.template($("#contact-template").html()), render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); contactView = new App.Views.Contact({model: homer}); $("tbody").append(contactView.render().el);
83. Backbone.View • Controller • Trata os eventos do DOM • Renderiza um Model ou Collection App.Views.Contacts = Backbone.View.extend({ el: $("#contacts") }); App.Views.Contact = Backbone.View.extend({ tagName: "tr", template: _.template($("#contact-template").html()), render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); contactView = new App.Views.Contact({model: homer}); $("tbody").append(contactView.render().el);
84. Backbone.View • Controller • Trata os eventos do DOM • Renderiza um Model ou Collection App.Views.Contacts = Backbone.View.extend({ el: $("#contacts") }); App.Views.Contact = Backbone.View.extend({ tagName: "tr", template: _.template($("#contact-template").html()), render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); contactView = new App.Views.Contact({model: homer}); $("tbody").append(contactView.render().el);
85. Backbone.View • Controller • Trata os eventos do DOM • Renderiza um Model ou Collection App.Views.Contacts = Backbone.View.extend({ el: $("#contacts") }); App.Views.Contact = Backbone.View.extend({ tagName: "tr", template: _.template($("#contact-template").html()), render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); contactView = new App.Views.Contact({model: homer}); $("tbody").append(contactView.render().el);
86. Backbone.View
87. Backbone.View
88. Backbone.View
89. Backbone.View
90. Backbone.View Collection View
91. Backbone.View Collection View
92. Backbone.View Collection View
93. Backbone.View Collection View
94. Backbone.View Collection View
95. Backbone.View Collection View Model View
96. Backbone.Router
97. Backbone.Router • Mapeia URLs para funções
98. Backbone.Router • Mapeia URLs para funções • HTML5 pushState-ready
99. Backbone.Router • Mapeia URLs para funções • HTML5 pushState-ready App.Router = Backbone.Router.extend({ routes: { "": "home", "/contact/:id": "showContact" }, home: function() { // Carrega a collection e renderiza a View na tela }, showContact: function(id) { // Carrega o model e renderiza a View na tela } });
100. Backbone.Events
101. Backbone.Events Respondendo a eventos do DOM
102. Backbone.Events App.Views.Contact = Backbone.View.extend({ events: { "click .delete": "destroy" }, destroy: function() { this.model.destroy(); } }); Respondendo a eventos do DOM
103. Backbone.Events
104. Backbone.Events Respondendo a eventos do Model/Collection
105. Backbone.Events Respondendo a eventos do Model/Collection App.Views.Contacts = Backbone.View.extend({ initialize: function() { this.collection.on("add", this.addOne, this); this.collection.on("reset", this.addAll, this); }, addOne: function(contact) { var view = new App.Views.Contact({ model: contact }); this.$("tbody").append(view.render().el); }, addAll: function() { this.collection.each(this.addOne); } }); App.Views.Contact = Backbone.View.extend({ initialize: function() { this.model.on("change", this.render, this); this.model.on("destroy", this.remove, this); } });
106. Demo
107. Perguntas?