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