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

1. Interfaces ricas de forma clean

2. http://github.com/fellix
@rs_felix
http://www.crafters.com.br
@crafterstudio
http://blog.rollingwithcode.com

3. Backbone é uma estrutura para aplicações com uso pesado de
javascript
Provendo modelos (models) com binding “chave-valor” e
eventos customizados
Coleções (collections) com uma rica API de funções.
Views com simples declaração de eventos
Conecta 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.Model
Coração de uma
aplicação JavaScript

11. Backbone.Model
Coração de uma
aplicação JavaScript
Acesso 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.Model
Como funciona?

16. Backbone.Model
Como funciona?
save

17. Backbone.Model
Como funciona?
save model.save({title: "texto"});

18. Backbone.Model
Como funciona?
save model.save({title: "texto"});

19. Backbone.Model
Como funciona?
save model.save({title: "texto"});
url: function(){
return this.id ?
"/tasks/"+ this.id :
"/tasks/";
}

20. Backbone.Collection

21. Backbone.Collection
Coleçõ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.Router
Baseado em #fragment

27. Backbone.Router
Baseado em #fragment
Rotas

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.history
Global Router

32. Backbone.history
Global Router
start

33. Backbone.history
Global Router
start Backbone.history.start()

34. Backbone.View

35. Backbone.View
Organizaçã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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li",
className: "todo",
TodoView
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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. Exemplo
window.TodoView = Backbone.View.extend({
tagName: "li", keypress event
className: "todo",
TodoView
template: _.template("<input type='checkbox' class='todo-check' /><div
class='todo-content'></div><span class='todo-destroy'></span><input
type='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 TodoView
save 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. Exemplos
http://documentcloud.github.com/backbone/
https://github.com/jeromegn/localtodos
http://documentcloud.github.com/backbone/examples/todos
http://www.documentcloud.org/public/search/
http://www.linkedin.com/static?key=mobile
http://basecamphq.com/mobile
https://www.apptrajectory.com/

102. Obrigado!
http://github.com/fellix
@rs_felix
http://www.crafters.com.br
@crafterstudio
http://blog.rollingwithcode.com