Backbone - TDC 2011 Floripa

  • View
    1.948

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of Backbone - TDC 2011 Floripa

  • 1.Interfaces ricas de forma clean

2. http://github.com/fellix@rs_felixhttp://www.crafters.com.br@crafterstudiohttp://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

Todos
Press Enter to create this task

42. Exemplo

Todos
Press Enter to create this task

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

Todos
TodoView TodoViewPress Enter to create this task
TodoView

47. Exemplo

Todos
TodoView TodoViewPress Enter to create this task
TodoView

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

Todos keypress event
TodoView click event TodoViewPress Enter to create this task
dblclick eventTodoView

52. Exemplo

Todos keypress event
TodoView click event TodoViewPress Enter to create this task
dblclick eventTodoView

53. Exemplo

Todos keypress event
TodoView click event TodoViewPress Enter to create this task
dblclick eventTodoView

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", "tod