Philip Poots     @pootsbook     Ruby Developer     Audacio.us3183
va Sc ri ptJa
StructureStateSpeed
Structure FrameworkState ApplicationSpeed Javascript
Structure FrameworkState ApplicationSpeed Javascript
$.getJSON("http://example.com/?feed=json&jsonp=?", function(data){    $(#content).html("<a href=""+ data[0].permalink + ""...
STRUCTURE   MVC Model View Controller            Pattern            —1979            Architecture            —Separate dom...
STRUCTURE   MVC on Server
STRUCTURE   MVC on Client
STRUCTURE   Backbone Model window.Todo = Backbone.Model.extend({      defaults: {         done: false      },       toggle...
STRUCTURE   Backbone Model window.Todo = Backbone.Model.extend({      defaults: {         done: false      },       toggle...
STRUCTURE   Backbone Model window.Todo = Backbone.Model.extend({      defaults: {         done: false      },       toggle...
STRUCTURE   Backbone Collection window.TodoList = Backbone.Collection.extend({    model: Todo,    localStorage: new Store(...
STRUCTURE   Backbone Collection window.TodoList = Backbone.Collection.extend({    model: Todo,    localStorage: new Store(...
STRUCTURE   Backbone Collection window.TodoList = Backbone.Collection.extend({    model: Todo,    localStorage: new Store(...
STRUCTURE   Backbone Collection window.TodoList = Backbone.Collection.extend({    model: Todo,    localStorage: new Store(...
STRUCTURE   Backbone Collection window.TodoList = Backbone.Collection.extend({    model: Todo,    localStorage: new Store(...
STRUCTURE   Backbone Collection window.TodoList = Backbone.Collection.extend({    model: Todo,    localStorage: new Store(...
STRUCTURE   Backbone View window.TodoView = Backbone.View.extend({     tagName: "li",     template: $("#item-template").te...
STRUCTURE   Backbone View window.TodoView = Backbone.View.extend({     tagName: "li",     template: $("#item-template").te...
STRUCTURE   Backbone View window.TodoView = Backbone.View.extend({     tagName: "li",     template: $("#item-template").te...
STRUCTURE   JS Template window.TodoView = Backbone.View.extend({     tagName: "li",     template: $("#item-template").temp...
STRUCTURE   Backbone View window.TodoView = Backbone.View.extend({     tagName: "li",     template: $("#item-template").te...
STRUCTURE   Backbone View initialize: function() {   _.bindAll(this, render, close, remove, edit);   this.model.bind(chang...
STRUCTURE   Backbone View initialize: function() {   _.bindAll(this, render, close, remove, edit);   this.model.bind(chang...
STRUCTURE   Backbone View toggleDone: function() {       this.model.toggle();     },
STRUCTURE   Backbone Router var Workspace = Backbone.Router.extend({    routes: {      "help": "help" // #help   },    hel...
STRUCTURE   Backbone Router var Workspace = Backbone.Router.extend({    routes: {      "help": "help" // #help   },    hel...
STRUCTURE   Backbone Router var Workspace = Backbone.Router.extend({    routes: {      "help": "help" // #help   },    hel...
STRUCTURE   Clean Code
Structure FrameworkState ApplicationSpeed Javascript
S TAT E   HTTP/1.1          “It is a…stateless protocol”           —RFC 2616 (June 1999)
S TAT E   HTTP/1.1          “It is a…stateless protocol”           —RFC 2616 (June 1999)          cookies          session...
S TAT E   Server Owns State          Client     Server
S TAT E   Request GET   / HTTP/1.1          Client         Server
S TAT E   Response HTTP/1.1   200 OK          Client       Server
S TAT E   AJAX asynchronicity          Client     Server
S TAT E   Infrastructure                 Client                 Server
S TAT E   Infrastructure                 Client               Web Server
S TAT E   Infrastructure                  Client                Web Server            RESTful Application
S TAT E   Infrastructure                  Client                Web Server            RESTful Application                 ...
S TAT E   Infrastructure                   Client            JavaScript MVC App.                Web Server             RES...
S TAT E   Infrastructure                  Client            JavaScript MVC App.               Local Storage          Bo nu...
Structure FrameworkState ApplicationSpeed Javascript
SPEED   JavaScript is Fast        Google v8 JS engine        —focus on optimizing speed        It runs in the browser     ...
SPEED   Data Transport        JSON data only        —no markup
SPEED   Data Transport          JSON data only          —no markup{ "id": 1,   "first_name": "Philip",   "last_name": "Poo...
Structure FrameworkState ApplicationSpeed Javascript
http://documentcloud.github.com/backbone/
JavaScript Web Apps@maccman
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Backbone.js — Introduction to client-side JavaScript MVC
Upcoming SlideShare
Loading in …5
×

Backbone.js — Introduction to client-side JavaScript MVC

5,697 views
5,487 views

Published on

Using Backbone.js to move state to the client-side and the benefits of using a JavaScript MVC framework.

Delivered at SuperMondays, Newcastle upon Tyne, on 26th September 2011.

Published in: Technology, Business
2 Comments
3 Likes
Statistics
Notes
  • Hey Nicolas, the list of data is implied, i.e. it defaults to the collection’s model data. If you look at the implementation here: http://backbonejs.org/docs/backbone.html#section-121

    It simply uses the Underscore.js method, and adds this.models as the first argument automatically.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • on page 28, why there the filter() function. Why there is no list of data to pass to this function?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,697
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
62
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Backbone.js — Introduction to client-side JavaScript MVC

  1. 1. Philip Poots @pootsbook Ruby Developer Audacio.us3183
  2. 2. va Sc ri ptJa
  3. 3. StructureStateSpeed
  4. 4. Structure FrameworkState ApplicationSpeed Javascript
  5. 5. Structure FrameworkState ApplicationSpeed Javascript
  6. 6. $.getJSON("http://example.com/?feed=json&jsonp=?", function(data){ $(#content).html("<a href=""+ data[0].permalink + "">" +data[0].title + "</a>"); $(#Date).html(data[0].date); $(#Excerpt).html(data[0].excerpt); $(#Excerpt).after("<a href="" + data[0].permalink + ""class="more">read on &raquo;</a>"); });
  7. 7. STRUCTURE MVC Model View Controller Pattern —1979 Architecture —Separate domain logic & UI Server-Side MVC —Ruby on Rails
  8. 8. STRUCTURE MVC on Server
  9. 9. STRUCTURE MVC on Client
  10. 10. STRUCTURE Backbone Model window.Todo = Backbone.Model.extend({ defaults: { done: false }, toggle: function() { this.save( {done: !this.get("done")} ); } });
  11. 11. STRUCTURE Backbone Model window.Todo = Backbone.Model.extend({ defaults: { done: false }, toggle: function() { this.save( {done: !this.get("done")} ); } });
  12. 12. STRUCTURE Backbone Model window.Todo = Backbone.Model.extend({ defaults: { done: false }, toggle: function() { this.save( {done: !this.get("done")} ); } });
  13. 13. STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });
  14. 14. STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });
  15. 15. STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });
  16. 16. STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });
  17. 17. STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });
  18. 18. STRUCTURE Backbone Collection window.TodoList = Backbone.Collection.extend({ model: Todo, localStorage: new Store("todos"), done: function() { return this.filter(function(todo) { return todo.get(done); }); }, remaining: function() { return this.without.apply( this, this.done()); } });
  19. 19. STRUCTURE Backbone View window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },
  20. 20. STRUCTURE Backbone View window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },
  21. 21. STRUCTURE Backbone View window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },
  22. 22. STRUCTURE JS Template window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },
  23. 23. STRUCTURE Backbone View window.TodoView = Backbone.View.extend({ tagName: "li", template: $("#item-template").template(), events: { "change .check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "destroy", "keypress .todo-input" : "updateOnEnter", "blur .todo-input" : "close" },
  24. 24. STRUCTURE Backbone View initialize: function() { _.bindAll(this, render, close, remove, edit); this.model.bind(change, this.render); this.model.bind(destroy, this.remove); }, render: function() { var element = jQuery.tmpl(this.template, this.model.toJSON()); $(this.el).html(element); this.input = this.$(".todo-input"); return this; },
  25. 25. STRUCTURE Backbone View initialize: function() { _.bindAll(this, render, close, remove, edit); this.model.bind(change, this.render); this.model.bind(destroy, this.remove); }, render: function() { var element = jQuery.tmpl(this.template, this.model.toJSON()); $(this.el).html(element); this.input = this.$(".todo-input"); return this; },
  26. 26. STRUCTURE Backbone View toggleDone: function() { this.model.toggle(); },
  27. 27. STRUCTURE Backbone Router var Workspace = Backbone.Router.extend({ routes: { "help": "help" // #help }, help: function() { ... } });
  28. 28. STRUCTURE Backbone Router var Workspace = Backbone.Router.extend({ routes: { "help": "help" // #help }, help: function() { ... } });
  29. 29. STRUCTURE Backbone Router var Workspace = Backbone.Router.extend({ routes: { "help": "help" // #help }, help: function() { ... } });
  30. 30. STRUCTURE Clean Code
  31. 31. Structure FrameworkState ApplicationSpeed Javascript
  32. 32. S TAT E HTTP/1.1 “It is a…stateless protocol” —RFC 2616 (June 1999)
  33. 33. S TAT E HTTP/1.1 “It is a…stateless protocol” —RFC 2616 (June 1999) cookies sessions form variables URI parameters
  34. 34. S TAT E Server Owns State Client Server
  35. 35. S TAT E Request GET / HTTP/1.1 Client Server
  36. 36. S TAT E Response HTTP/1.1 200 OK Client Server
  37. 37. S TAT E AJAX asynchronicity Client Server
  38. 38. S TAT E Infrastructure Client Server
  39. 39. S TAT E Infrastructure Client Web Server
  40. 40. S TAT E Infrastructure Client Web Server RESTful Application
  41. 41. S TAT E Infrastructure Client Web Server RESTful Application Database
  42. 42. S TAT E Infrastructure Client JavaScript MVC App. Web Server RESTful API / App. Database
  43. 43. S TAT E Infrastructure Client JavaScript MVC App. Local Storage Bo nu s!
  44. 44. Structure FrameworkState ApplicationSpeed Javascript
  45. 45. SPEED JavaScript is Fast Google v8 JS engine —focus on optimizing speed It runs in the browser —cuts out server requests —spares server resources —instantaneous UI
  46. 46. SPEED Data Transport JSON data only —no markup
  47. 47. SPEED Data Transport JSON data only —no markup{ "id": 1, "first_name": "Philip", "last_name": "Poots", "twitter": "@pootsbook"} vs."<div id="user_1">n<dl>n<dt>Name</dt>n<dd>Philip Poots</dd>n<dt>Twitterhandle:</dt>n<dd>@pootsbook</dd>n</dl>n</div>"
  48. 48. Structure FrameworkState ApplicationSpeed Javascript
  49. 49. http://documentcloud.github.com/backbone/
  50. 50. JavaScript Web Apps@maccman

×