Philip Poots is a Ruby developer who works at Audacio.us. He focuses on structure frameworks, state applications, and speed with JavaScript.

2. Philip Poots
@pootsbook
Ruby Developer
Audacio.us
3
18
3

12. va Sc ri pt
Ja

13. Structure
State
Speed

14. Structure Framework
State Application
Speed Javascript

15. Structure Framework
State Application
Speed Javascript

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

17. STRUCTURE MVC Model View Controller
Pattern
—1979
Architecture
—Separate domain logic & UI
Server-Side MVC
—Ruby on Rails

18. STRUCTURE MVC on Server

19. STRUCTURE MVC on Client

20. STRUCTURE Backbone Model
window.Todo = Backbone.Model.extend({
defaults: {
done: false
},
toggle: function() {
this.save(
{done: !this.get("done")}
);
}
});

21. STRUCTURE Backbone Model
window.Todo = Backbone.Model.extend({
defaults: {
done: false
},
toggle: function() {
this.save(
{done: !this.get("done")}
);
}
});

22. STRUCTURE Backbone Model
window.Todo = Backbone.Model.extend({
defaults: {
done: false
},
toggle: function() {
this.save(
{done: !this.get("done")}
);
}
});

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

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

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

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

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

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

29. 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"
},

30. 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"
},

31. 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"
},

32. 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"
},

33. 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"
},

34. 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;
},

35. 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;
},

36. STRUCTURE Backbone View
toggleDone: function() {
this.model.toggle();
},

37. STRUCTURE Backbone Router
var Workspace =
Backbone.Router.extend({
routes: {
"help": "help" // #help
},
help: function() {
...
}
});

38. STRUCTURE Backbone Router
var Workspace =
Backbone.Router.extend({
routes: {
"help": "help" // #help
},
help: function() {
...
}
});

39. STRUCTURE Backbone Router
var Workspace =
Backbone.Router.extend({
routes: {
"help": "help" // #help
},
help: function() {
...
}
});

40. STRUCTURE Clean Code

41. Structure Framework
State Application
Speed Javascript

42. S TAT E HTTP/1.1
“It is a…stateless protocol”
—RFC 2616 (June 1999)

43. S TAT E HTTP/1.1
“It is a…stateless protocol”
—RFC 2616 (June 1999)
cookies
sessions
form variables
URI parameters

44. S TAT E Server Owns State
Client Server

45. S TAT E Request GET / HTTP/1.1
Client Server

46. S TAT E Response HTTP/1.1 200 OK
Client Server

47. S TAT E AJAX asynchronicity
Client Server

48. S TAT E Infrastructure
Client
Server

49. S TAT E Infrastructure
Client
Web Server

50. S TAT E Infrastructure
Client
Web Server
RESTful Application

51. S TAT E Infrastructure
Client
Web Server
RESTful Application
Database

52. S TAT E Infrastructure
Client
JavaScript MVC App.
Web Server
RESTful API / App.
Database

53. S TAT E Infrastructure
Client
JavaScript MVC App.
Local Storage
Bo nu s!

54. Structure Framework
State Application
Speed Javascript

55. 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

56. SPEED Data Transport
JSON data only
—no markup

57. 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>Twitter
handle:</dt>n<dd>@pootsbook</dd>n</dl>
n</div>"

58. Structure Framework
State Application
Speed Javascript

59. http://documentcloud.github.com/backbone/

60. JavaScript Web Apps
@maccman