Backbone - TDC 2011 Floripa
-
Upload
rafael-felix-da-silva -
Category
Technology
-
view
1.960 -
download
0
description
Transcript of Backbone - TDC 2011 Floripa
Interfaces ricas de forma clean
http://github.com/fellix
@rs_felix
http://www.crafters.com.br @crafterstudio
http://blog.rollingwithcode.com
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
Clean?
Não gera tags html
Não existem temas com tags pré definidas
Não mistura front-end com back-end
Componentes
Backbone.Model
Coração de uma aplicação JavaScript
Backbone.Model
Coração de uma aplicação JavaScript
Acesso a dados
Backbone.Model
Exemplo
window.Todo = Backbone.Model.extend({toggle: function(){
this.save({done: !this.get("done")});},clear: function(){
this.destroy();$(this.view.el).dispose();
}});
Exemplo
window.Task = Backbone.Model.extend({url: function(){
return this.id ? "/tasks/"+ this.id : "/tasks/";
},defaults:{ task: {
title: "nothing"} }
});
Exemplo
window.Task = Backbone.Model.extend({url: function(){
return this.id ? "/tasks/"+ this.id : "/tasks/";
},defaults:{ task: {
title: "nothing"} }
});
Backbone.ModelComo funciona?
Backbone.ModelComo funciona?
save
Backbone.ModelComo funciona?
save model.save({title: "texto"});
Backbone.ModelComo funciona?
save model.save({title: "texto"});
Backbone.ModelComo funciona?
save model.save({title: "texto"});
url: function(){return this.id ? "/tasks/"+ this.id : "/tasks/";
}
Backbone.Collection
Backbone.Collection
Coleções de Modelos
Exemplo
window.TodoList = Backbone.Collection.extend({model: Todo,localStorage: new Store("todos"),done: function(){
return this.filter(function(todo){return todo.get("done");
});}
});
Exemplo
window.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"
});
Exemplo
window.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"
});
Backbone.Router
Backbone.RouterBaseado em #fragment
Backbone.RouterBaseado em #fragment
Rotas
Exemplowindow.Workspace = Backbone.Router.extend({
routes: {"help": "help","search/:query": "search"
},help: function(){
...},search: function(query){
...},
});
Exemplowindow.Workspace = Backbone.Router.extend({
routes: {"help": "help","search/:query": "search"
},help: function(){
...},search: function(query){
...},
});
#help
#search/kiwis
Backbone.history
Backbone.historyGlobal Router
Backbone.historyGlobal Router
start
Backbone.historyGlobal Router
start Backbone.history.start()
Backbone.View
Backbone.ViewOrganização
Exemplowindow.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;
}...});
Exemplowindow.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;
}...});
Exemplowindow.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;
}...});
Exemplo
Exemplo
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>
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>
Exemplo
window.AppView = Backbone.View.extend({ el: $("todoapp"),
...});
window.App = new AppView;
Exemplo
Exemplo
TodoViewTodoViewTodoView
Exemplo
TodoViewTodoViewTodoView
<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>
Exemplo
TodoViewTodoViewTodoView
<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>
Exemplo
TodoViewTodoViewTodoView
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
...});
Exemplo
TodoViewTodoViewTodoView
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<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>
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<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>
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<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>
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
toggleDone: function() { this.model.toggle(); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
toggleDone: function() { this.model.toggle(); }
toggle: function() { this.save({done: !this.get("done")}); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
toggleDone: function() { this.model.toggle(); }
initialize: function() { _.bindAll(this, 'render', 'close'); this.model.bind('change', this.render); this.model.view = this; }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo"
...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
setContent: function() { var content = this.model.get('content'); this.$('.todo-content').set("html", content); this.$('.todo-input').setProperty("value", content); if (this.model.get('done')) { this.$(".todo-check").setProperty("checked", "checked"); $(this.el).addClass("done"); } else { this.$(".todo-check").removeProperty("checked"); $(this.el).removeClass("done"); } this.input = this.$(".todo-input"); this.input.addEvent('blur', this.close); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", 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 .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
edit: function() { $(this.el).addClass("editing");
this.input.focus(); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
edit: function() { $(this.el).addClass("editing");
this.input.focus(); }
setContent: function() { ... this.input.addEvent('blur', this.close); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
close: function() { this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
close: function() { this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); }
save change render
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
TodoList
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<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>
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<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>
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
addAll: function() { Todos.each(this.addOne); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
addOne: function(todo) { var view = new TodoView({model: todo}).render().el; this.$("#todo-list").grab(view); ... }
addAll: function() { Todos.each(this.addOne); }
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
addOne: function(todo) { var view = new TodoView({model: todo}).render().el; this.$("#todo-list").grab(view); ... }
addAll: function() { Todos.each(this.addOne); }
<ul id='todo-list'></ul>
Exemplos
Exemplos
Exemplos
Exemplos
Exemplos
Exemplos
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/
http://documentcloud.github.com/backbone/
https://github.com/jeromegn/localtodos
Obrigado!http://github.com/fellix
@rs_felix
http://www.crafters.com.br @crafterstudio
http://blog.rollingwithcode.com