Backbone - TDC 2011 Floripa

1.Interfaces ricas de forma clean

2. http://github.com/[email protected]_felixhttp://[email protected]://blog.rollingwithcode.com 3. Backbone uma estrutura para aplicaes com uso pesado dejavascriptProvendo modelos (models) com binding chave-valor eeventos customizadosColees (collections) com uma rica API de funes.Views com simples declarao de eventosConecta usando uma interface RESTful JSON 4. Clean? 5. No gera tags html 6. No existem temas com tags pr denidas 7. No mistura front-end com back-end 8. Componentes 9. Backbone.Model 10. Backbone.ModelCorao de umaaplicao JavaScript 11. Backbone.ModelCorao de umaaplicao JavaScriptAcesso a dados 12. Exemplowindow.Todo = Backbone.Model.extend({toggle: function(){ this.save({done: !this.get("done")});},clear: function(){ this.destroy(); $(this.view.el).dispose();}}); 13. Exemplowindow.Task = Backbone.Model.extend({url: function(){ return this.id ? "/tasks/"+ this.id : "/tasks/";},defaults:{ task: { title: "nothing"}}}); 14. Exemplowindow.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? savemodel.save({title: "texto"}); 18. Backbone.ModelComo funciona? savemodel.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.CollectionColees de Modelos 22. Exemplowindow.TodoList = Backbone.Collection.extend({model: Todo,localStorage: new Store("todos"),done: function(){ return this.lter(function(todo){ return todo.get("done"); });}}); 23. Exemplowindow.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"}); 24. Exemplowindow.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.ViewOrganizao 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

42. Exemplo

43. Exemplowindow.AppView = Backbone.View.extend({el: $("todoapp"),...});window.App = new AppView; 44. Exemplo 45. ExemploTodoViewTodoViewTodoView 46. Exemplo

47. Exemplo

48. Exemplowindow.TodoView = Backbone.View.extend({tagName: "li",className: "todo", TodoView TodoViewtemplate: _.template(""),... TodoView}); 49. ExemploTodoViewTodoViewTodoView 50. Exemplo keypress event TodoView click event TodoViewdblclick event TodoView 51. Exemplo

52. Exemplo

53. Exemplo

54. Exemplo keypress event TodoViewwindow.AppView = Backbone.View.extend({el: $("todoapp"), TodoViewstatsTemplate: _.template(...), click eventevents: { TodoView"keypress #new-todo" : "createOnEnter",...dblclick event},}); 55. Exemplo keypress event TodoViewwindow.AppView = Backbone.View.extend({el: $("todoapp"), TodoViewstatsTemplate: _.template(...), click eventevents: { TodoView"keypress #new-todo" : "createOnEnter",...dblclick event},}); 56. Exemplo keypress event TodoViewwindow.AppView = Backbone.View.extend({el: $("todoapp"), TodoViewstatsTemplate: _.template(...), click eventevents: { TodoView"keypress #new-todo" : "createOnEnter",...dblclick event},}); 57. Exemplo keypress event TodoViewwindow.AppView = Backbone.View.extend({el: $("todoapp"), TodoViewstatsTemplate: _.template(...), click eventevents: { TodoView"keypress #new-todo" : "createOnEnter",...dblclick event},}); 58. Exemplo keypress eventcreateOnEnter: function(e) {if (e.code != 13) return;Todos.create({ TodoViewdone:}); false click eventcontent: this.input.getProperty("value"), TodoView dblclick eventthis.input.setProperty("value", "");}TodoView 59. Exemplo keypress eventcreateOnEnter: function(e) {if (e.code != 13) return;Todos.create({ TodoViewdone:}); false click eventcontent: this.input.getProperty("value"), TodoView dblclick eventthis.input.setProperty("value", "");}TodoView 60. Exemplo keypress eventcreateOnEnter: function(e) {if (e.code != 13) return;Todos.create({ TodoViewdone:}); false click eventcontent: this.input.getProperty("value"), TodoView dblclick eventthis.input.setProperty("value", "");}TodoView 61. Exemplo keypress eventcreateOnEnter: function(e) {if (e.code != 13) return;Todos.create({ TodoViewdone:}); false click eventcontent: this.input.getProperty("value"), TodoView dblclick eventthis.input.setProperty("value", "");}TodoView 62. Exemplo keypress event TodoView click event TodoViewdblclick event TodoView 63. Exemplowindow.TodoView = Backbone.View.extend({tagName: "li", keypress eventclassName: "todo", TodoViewtemplate: _.template(""), 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 eventclassName: "todo", TodoViewtemplate: _.template(""), 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 eventclassName: "todo", TodoViewtemplate: _.template(""), 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 eventclassName: "todo", TodoViewtemplate: _.template(""), 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 eventclassName: "todo", TodoViewtemplate: _.template(""), events: { click event TodoView"click .todo-check""dblclick .todo-content""click .todo-destroy" : : : dblclick event "toggleDone", "edit", "clear", TodoView"keypress .todo-input" : "updateOnEnter"},...}); 68. Exemplokeypress eventTodoViewtoggleDone: function() {this.model.toggle();}click event TodoView dblclick event TodoView 69. Exemplokeypress eventTodoView 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 eventTodoView 71. Exemplo keypress eventrender: 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 eventTodoView 72. Exemplo keypress eventrender: 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 eventTodoView 73. Exemplo keypress eventwindow.TodoView = Backbone.View.extend({ TodoViewrender: 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 eventTodoView 74. Exemplo keypress eventrender: 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 eventTodoView 75. Exemplo keypress eventrender: 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 eventTodoView 76. ExemplosetContent: 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 eventTodoView $(this.el).removeClass("done"); } this.input = this.$(".todo-input"); this.input.addEvent(blur, this.close); } 77. Exemplo keypress event TodoView click event TodoViewdblclick event TodoView 78. Exemplowindow.TodoView = Backbone.View.extend({tagName: "li", keypress eventclassName: "todo", TodoViewtemplate: _.template(""), 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 eventclassName: "todo", TodoViewtemplate: _.template(""), 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 eventedit: function() { TodoView$(this.el).addClass("editing");} this.input.focus(); click event TodoView dblclick eventTodoView 81. Exemplokeypress eventsetContent: 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 eventclose: function() { TodoView click event TodoViewthis.model.save({content: this.input.getProperty("value")});$(this.el).removeClass("editing");} dblclick eventTodoView 83. Exemplokeypress event close: function() {TodoViewclick event TodoView this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); }dblclick eventTodoViewsavechange render 84. Exemplo keypress event TodoView click event TodoViewdblclick event TodoView 85. ExemploTodoList keypress event TodoView click event TodoViewdblclick event TodoView 86. Exemplo

87. Exemplo

88. Exemplowindow.AppView = Backbone.View.extend({keypress event initialize: function() { _.bindAll(this, addOne, addAll, render); TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoView Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render); TodoView Todos.fetch();}}); 89. Exemplowindow.AppView = Backbone.View.extend({keypress event initialize: function() { _.bindAll(this, addOne, addAll, render); TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoView Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render); TodoView Todos.fetch();}}); 90. Exemplowindow.AppView = Backbone.View.extend({keypress event initialize: function() { _.bindAll(this, addOne, addAll, render); TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoView Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render); TodoView Todos.fetch();}}); 91. Exemplowindow.AppView = Backbone.View.extend({keypress event initialize: function() { _.bindAll(this, addOne, addAll, render); TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoView Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render); TodoView Todos.fetch();}}); 92. Exemplowindow.AppView = Backbone.View.extend({keypress event initialize: function() { _.bindAll(this, addOne, addAll, render); TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoView Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render); TodoView Todos.fetch();}}); 93. Exemplowindow.AppView = Backbone.View.extend({keypress event initialize: function() { _.bindAll(this, addOne, addAll, render); TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoViewaddAll: function() { Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render);}TodoView Todos.each(this.addOne); Todos.fetch();}}); 94. Exemplo addOne: function(todo) { keypress eventwindow.AppView = Backbone.View.extend({TodoView({model: todo}).render().el;var view = newthis.$("#todo-list").grab(view); initialize: function() {... _.bindAll(this, addOne, addAll, render);}TodoView this.input = this.$("#new-todo"); Todos.bind(add, click eventthis.addOne);TodoView addAll: function() { Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render); TodoViewTodos.each(this.addOne); } Todos.fetch();}}); 95. Exemplo addOne: function(todo) {keypress eventwindow.AppView = Backbone.View.extend({TodoView({model: todo}).render().el;var view = newthis.$("#todo-list").grab(view); initialize: function() {...TodoView _.bindAll(this, addOne, addAll, render);} this.input = this.$("#new-todo"); Todos.bind(add,

click eventthis.addOne); TodoView addAll: function() { Todos.bind(refresh, this.addAll); Todos.bind(all, dblclick eventthis.render);TodoViewTodos.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

Backbone - TDC 2011 Floripa

Technology

Transcript of Backbone - TDC 2011 Floripa

TDC 2015 Floripa - Criando ambientes de forma simples com Docker e Ansible

Palestra de Asp.Net 5 no TDC floripa e DotnetFloripa

Informe floripa issuu294

Apresentação AWS - TDC Floripa

Redes de Alto Desempenho Novo Backbone da CemigTelecom · Implantação do backbone DWDM PADTEC Implantação Backbone Transporte MPLS-TP – ZTE Interfaces de 100Mbps e 1Gbps ~20G

Topologia Malha e Backbone

Floripa Rapidão

Wtp floripa web

Redes de Alto Desempenho Novo Backbone da … · Ampliação do backbone DWDM HUAWEI e PADTEC Ativação primeira interface 100Gbps de serviço Implantação backbone Transporte IP/MPLS

Tese Floripa

Migrações de dados sem downtimes!...Migrações de dados sem downtimes! Truques e lições aprendidas com PostgreSQL na Olist Jéssica Bonson, desenvolvedora no Olist TDC Floripa

TDC Floripa 2016 - Decolando seus micro-serviços na Spring Cloud

TDC 2010 Floripa-SC SharePoint 2010: Novidades para os desenvolvedores .net

floripa baladas

TDC Floripa 2015 - Branding, UX e Marketing

TDC Floripa 2016 - Modelagem de Negócio: Preparando a Organização para a Mudança

Código Floripa

Apresentação TDC

Floripa Social 2012

revista floripa