SlideShare une entreprise Scribd logo

Backbone - TDC 2011 Floripa

•
•
Rafael Felix da Silva
Rafael Felix da Silva

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

Technologie
1  sur  102
Télécharger pour lire hors ligne
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
Backbone.Model Coração de uma aplicação JavaScript
Backbone.Model Coração de uma aplicação JavaScript Acesso 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.Model Como funciona?
Backbone.Model Como funciona? save
Backbone.Model Como funciona? save model.save({title: "texto"});
Backbone.Model Como funciona? save model.save({title: "texto"});
Backbone.Model Como 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.Router Baseado em #fragment
Backbone.Router Baseado em #fragment Rotas
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.history Global Router
Backbone.history Global Router start
Backbone.history Global Router start Backbone.history.start()
Backbone.View
Backbone.View Organizaçã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>
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 });
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
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"     }, ... });
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"     }, ... });
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"     }, ... });
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"     }, ... });
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"     }, ... });
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
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"     }, ... });
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"     }, ... });
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 TodoView save 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
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/
Obrigado! http://github.com/fellix @rs_felix http://www.crafters.com.br @crafterstudio http://blog.rollingwithcode.com

Recommandé

Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneRafael Felix da Silva
 
Ruby - Design patterns tdc2011
Ruby - Design patterns tdc2011Ruby - Design patterns tdc2011
Ruby - Design patterns tdc2011Rafael Felix da Silva
 
Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologyDaniel Knell
 
50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 MinutesAzim Kurt
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQueryorestJump
 
Advanced Django
Advanced DjangoAdvanced Django
Advanced DjangoSimon Willison
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 

Recommandé

Aplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneAplicacoes dinamicas Rails com Backbone
Aplicacoes dinamicas Rails com BackboneRafael Felix da Silva
 
Ruby - Design patterns tdc2011
Ruby - Design patterns tdc2011Ruby - Design patterns tdc2011
Ruby - Design patterns tdc2011Rafael Felix da Silva
 
Backbone js
Backbone jsBackbone js
Backbone jsrstankov
 
Symfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologySymfony2 Building on Alpha / Beta technology
Symfony2 Building on Alpha / Beta technologyDaniel Knell
 
50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 Minutes50 Laravel Tricks in 50 Minutes
50 Laravel Tricks in 50 MinutesAzim Kurt
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQueryorestJump
 
Advanced Django
Advanced DjangoAdvanced Django
Advanced DjangoSimon Willison
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFelix Arntz
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPTDominic Arrojado
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 ViewsEyal Vardi
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Konstantin Kudryashov
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Treeadamlogic
 
Introduction to Zend Framework web services
Introduction to Zend Framework web servicesIntroduction to Zend Framework web services
Introduction to Zend Framework web servicesMichelangelo van Dam
 
jQuery Presentasion
jQuery PresentasionjQuery Presentasion
jQuery PresentasionMohammad Usman
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software CostsKonstantin Kudryashov
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuerysergioafp
 
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards06 jQuery #burningkeyboards
06 jQuery #burningkeyboardsDenis Ristic
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutesSimon Willison
 
05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboardsDenis Ristic
 
RichFaces: more concepts and features
RichFaces: more concepts and featuresRichFaces: more concepts and features
RichFaces: more concepts and featuresMax Katz
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js FundamentalsMark
 
Javascript
JavascriptJavascript
JavascriptorestJump
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile ProcessEyal Vardi
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICKonstantin Kudryashov
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxMichelangelo van Dam
 
Django quickstart
Django quickstartDjango quickstart
Django quickstartMarconi Moreto
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 
Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentationScott Messinger
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 

Contenu connexe

Tendances

Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web ComponentsFelix Arntz
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 ViewsEyal Vardi
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Konstantin Kudryashov
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Treeadamlogic
 
Introduction to Zend Framework web services
Introduction to Zend Framework web servicesIntroduction to Zend Framework web services
Introduction to Zend Framework web servicesMichelangelo van Dam
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuerysergioafp
 
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards06 jQuery #burningkeyboards
06 jQuery #burningkeyboardsDenis Ristic
 
05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboardsDenis Ristic
 
RichFaces: more concepts and features
RichFaces: more concepts and featuresRichFaces: more concepts and features
RichFaces: more concepts and featuresMax Katz
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js FundamentalsMark
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile ProcessEyal Vardi
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICKonstantin Kudryashov
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxMichelangelo van Dam
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 

Tendances (20)

Introduction to Web Components
Introduction to Web ComponentsIntroduction to Web Components
Introduction to Web Components
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 Views
 
Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015Min-Maxing Software Costs - Laracon EU 2015
Min-Maxing Software Costs - Laracon EU 2015
 
jQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a TreejQuery and Rails, Sitting in a Tree
jQuery and Rails, Sitting in a Tree
 
Introduction to Zend Framework web services
Introduction to Zend Framework web servicesIntroduction to Zend Framework web services
Introduction to Zend Framework web services
 
jQuery Presentasion
jQuery PresentasionjQuery Presentasion
jQuery Presentasion
 
Min-Maxing Software Costs
Min-Maxing Software CostsMin-Maxing Software Costs
Min-Maxing Software Costs
 
Advanced jQuery
Advanced jQueryAdvanced jQuery
Advanced jQuery
 
06 jQuery #burningkeyboards
06 jQuery #burningkeyboards06 jQuery #burningkeyboards
06 jQuery #burningkeyboards
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards05 JavaScript #burningkeyboards
05 JavaScript #burningkeyboards
 
RichFaces: more concepts and features
RichFaces: more concepts and featuresRichFaces: more concepts and features
RichFaces: more concepts and features
 
Angular.js Fundamentals
Angular.js FundamentalsAngular.js Fundamentals
Angular.js Fundamentals
 
Javascript
JavascriptJavascript
Javascript
 
AngularJS Compile Process
AngularJS Compile ProcessAngularJS Compile Process
AngularJS Compile Process
 
Decoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DICDecoupling with Design Patterns and Symfony2 DIC
Decoupling with Design Patterns and Symfony2 DIC
 
Unit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBeneluxUnit testing with zend framework PHPBenelux
Unit testing with zend framework PHPBenelux
 
Django quickstart
Django quickstartDjango quickstart
Django quickstart
 
Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 

Similaire à Backbone - TDC 2011 Floripa

Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentationScott Messinger
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoRob Bontekoe
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformanceJonas De Smet
 
How to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI ComponentsHow to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI Componentscagataycivici
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCpootsbook
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsCédric Hüsler
 
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF Luc Bors
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created itPaul Bearne
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScriptAndrew Dupont
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshowsblackman
 
Implement rich snippets in your webshop
Implement rich snippets in your webshopImplement rich snippets in your webshop
Implement rich snippets in your webshopArjen Miedema
 

Similaire à Backbone - TDC 2011 Floripa (20)

Knockout.js presentation
Knockout.js presentationKnockout.js presentation
Knockout.js presentation
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
jQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and PerformancejQuery: Tips, tricks and hints for better development and Performance
jQuery: Tips, tricks and hints for better development and Performance
 
How to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI ComponentsHow to Mess Up Your Angular UI Components
How to Mess Up Your Angular UI Components
 
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVCBackbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Backbone.js
Backbone.jsBackbone.js
Backbone.js
 
Clean Javascript
Clean JavascriptClean Javascript
Clean Javascript
 
Experience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - HighlightsExperience Manager 6 Developer Features - Highlights
Experience Manager 6 Developer Features - Highlights
 
course js day 3
course js day 3course js day 3
course js day 3
 
How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF How to Bring Common UI Patterns to ADF
How to Bring Common UI Patterns to ADF
 
JavaScript Refactoring
JavaScript RefactoringJavaScript Refactoring
JavaScript Refactoring
 
HirshHorn theme: how I created it
HirshHorn theme: how I created itHirshHorn theme: how I created it
HirshHorn theme: how I created it
 
Client Web
Client WebClient Web
Client Web
 
Writing Maintainable JavaScript
Writing Maintainable JavaScriptWriting Maintainable JavaScript
Writing Maintainable JavaScript
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Private slideshow
Private slideshowPrivate slideshow
Private slideshow
 
How te bring common UI patterns to ADF
How te bring common UI patterns to ADFHow te bring common UI patterns to ADF
How te bring common UI patterns to ADF
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
Implement rich snippets in your webshop
Implement rich snippets in your webshopImplement rich snippets in your webshop
Implement rich snippets in your webshop
 

Dernier

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 

Dernier (20)

Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 

Backbone - 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
  • 6. Não existem temas com tags pré definidas
  • 7. Não mistura front-end com back-end
  • 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" }} });
  • 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/"; }
  • 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" });
  • 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){ ... }, });
  • 33. Backbone.history Global Router start Backbone.history.start()
  • 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; } ... });
  • 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;
  • 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();     } });
  • 102. Obrigado! http://github.com/fellix @rs_felix http://www.crafters.com.br @crafterstudio http://blog.rollingwithcode.com