Backbone - TDC 2011 Floripa

Interfaces ricas de forma clean

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

Backbone é uma estrutura para aplicações com uso pesado dejavascriptProvendo modelos (models) com binding “chave-valor” eeventos customizadosColeções (collections) com uma rica API de funções.Views com simples declaração de eventosConecta usando uma interface RESTful JSON

Clean?

Não gera tags html

Não existem temas com tags pré deﬁnidas

Não mistura front-end com back-end

Componentes

Backbone.Model

Backbone.ModelCoração de umaaplicação JavaScript

Backbone.ModelCoração de umaaplicação JavaScriptAcesso a dados

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" }} });

Backbone.ModelComo funciona?

Backbone.ModelComo funciona? save

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.CollectionColeções de Modelos

Exemplo window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function(){ return this.ﬁlter(function(todo){ return todo.get("done"); }); } });

Exemplo window.TaskCollection = Backbone.Collection.extend({ model: Task, url: "/tasks" });

Backbone.Router

Backbone.RouterBaseado em #fragment

Backbone.RouterBaseado em #fragmentRotas

Exemplo window.Workspace = Backbone.Router.extend({ routes: { "help": "help", "search/:query": "search" }, help: function(){ ... }, search: function(query){ ... }, });

Exemplo window.Workspace = Backbone.Router.extend({ routes: { "help": "help", #help "search/:query": "search" }, #search/kiwis help: function(){ ... }, search: function(query){ ... }, });

Backbone.history

Backbone.historyGlobal Router

Backbone.historyGlobal Routerstart

Backbone.historyGlobal Routerstart Backbone.history.start()

Backbone.View

Backbone.ViewOrganização

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; } ... });

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 window.AppView = Backbone.View.extend({ el: $("todoapp"), ...});window.App = new AppView;

Exemplo

Exemplo TodoView TodoView TodoView

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>

Exemplowindow.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", TodoView TodoView template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=text class=todo-input />"), ... TodoView});

Exemplo TodoView TodoView TodoView

Exemplo keypress event TodoView click event TodoView dblclick event TodoView

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>

Exemplo keypress event TodoView window.AppView = Backbone.View.extend({ el: $("todoapp"), TodoView statsTemplate: _.template(...), click event events: { TodoView "keypress #new-todo" : "createOnEnter", ... dblclick event }, });

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

Exemplowindow.TodoView = Backbone.View.extend({ tagName: "li", keypress event className: "todo", TodoView template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=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" },...});

Exemplo keypress event TodoView toggleDone: function() { this.model.toggle(); } click event TodoView dblclick event TodoView

Exemplo keypress event TodoView toggle: function() { toggleDone: function() { this.model.toggle(); } click event TodoView this.save({done: !this.get("done")}); } dblclick event TodoView

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

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

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

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

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); }

Exemplowindow.TodoView = Backbone.View.extend({ tagName: "li", keypress event className: "todo", TodoView template: _.template("<input type=checkbox class=todo-check /><divclass=todo-content></div><span class=todo-destroy></span><inputtype=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" },...});

Exemplo keypress event edit: function() { TodoView $(this.el).addClass("editing"); } this.input.focus(); click event TodoView dblclick event TodoView

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

Exemplo keypress event close: function() { TodoView click event TodoView this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); } dblclick event TodoView

Exemplo keypress event close: function() { TodoView click event TodoView this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); } dblclick event TodoViewsave change render

Exemplo TodoList keypress event TodoView click event TodoView dblclick event TodoView

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>

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(); } });

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(); } });

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(); } });

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(); } });

Exemplos

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/

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

http://blog.crafters.com.br	620
http://feeds.feedburner.com	5
http://coderwall.com	3
https://twitter.com	1

Backbone - TDC 2011 Floripa

by Rafael Felix da Silva on Aug 20, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 629

Statistics

Backbone - TDC 2011 Floripa — Presentation Transcript