• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Backbone - TDC 2011 Floripa
 

Backbone - TDC 2011 Floripa

on

  • 2,064 views

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

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

Statistics

Views

Total Views
2,064
Views on SlideShare
1,427
Embed Views
637

Actions

Likes
4
Downloads
32
Comments
0

4 Embeds 637

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Backbone - TDC 2011 Floripa Backbone - TDC 2011 Floripa Presentation Transcript

    • 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é definidas
    • 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" }} });
    • 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.CollectionColeçõ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 #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 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 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
    • 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 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>
    • 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<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<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 TodoView   window.AppView = Backbone.View.extend({      el: $("todoapp"), TodoView    statsTemplate: _.template(...),   click event    events: { TodoView      "keypress #new-todo" : "createOnEnter",      ... dblclick event    }, });
    • 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 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
    • 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
    • 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
    • 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
    • Exemplo keypress event TodoView click event TodoView dblclick event 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"    },...});
    • 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"    },...});
    • 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"    },...});
    • 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"    },...});
    • 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      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 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);     }
    • Exemplo keypress event TodoView click event TodoView dblclick event 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"    },...});
    • 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 keypress event TodoView click event TodoView dblclick event TodoView
    • 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<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       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       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       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       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
    • Exemplos
    • Exemplos
    • Exemplos
    • 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