My Backbone.js presentation at OpenFest 2011

1. Радослав Станков
OpenFest 05/11/2011

2. Кой съм аз?
@rstankov
http://rstankov.com
http://github.com/rstankov

15. Browser
Controller
Model View
Сървър

16. Browser
Controller
Model View
Сървър

17. Browser
Controller
Model View
Сървър

18. Browser
Controller
Model View
Сървър

19. Browser
Controller
Model View
Сървър

20. Browser
Controller
Model View
Сървър

21. Browser
Controller
Model View
Сървър

22. Browser
Controller
Model View
Сървър

23. Browser
Controller
Model View
Сървър

24. Browser
Controller
Model View
Сървър

25. Browser
Controller
Model View
Сървър

26. Browser
Controller
Model View
Сървър

27. Browser
Controller
Model View
Сървър

28. Browser
Dom
View
Model

29. Browser
Dom
View
Model

30. Browser
Dom
View
Model

31. Browser
Dom
View
Model

32. Browser
Dom
View
Model

33. Browser
Dom
View
Model

34. Browser
Dom
View
Model

35. Browser
Dom
View
Model

36. Browser
Dom
View
Model

37. Backbone.Events

38. var object = {};
$.extend(object, Backbone.Events);
object.bind('eventName', function() {
console.log('1');
});
object.bind('eventName', function() {
console.log('2');
});
object.trigger('eventName');
// prints '1' and '2'

39. var object = {};
$.extend(object, Backbone.Events);
object.bind('eventName', function() {
console.log('1');
});
object.bind('eventName', function() {
console.log('2');
});
object.trigger('eventName');
// prints '1' and '2'

40. var object = {};
$.extend(object, Backbone.Events);
object.bind('eventName', function() {
console.log('1');
});
object.bind('eventName', function() {
console.log('2');
});
object.trigger('eventName');
// prints '1' and '2'

41. var object = {};
$.extend(object, Backbone.Events);
object.bind('eventName', function() {
console.log('1');
});
object.bind('eventName', function() {
console.log('2');
});
object.trigger('eventName');
// prints '1' and '2'

42. var object = {};
$.extend(object, Backbone.Events);
object.bind('eventName', function() {
console.log('1');
});
object.bind('eventName', function() {
console.log('2');
});
object.trigger('eventName');
// prints '1' and '2'

43. Backbone.Model

44. var Person = Backbone.Model.extend({
initialize: function(){
console.log("I'm alive!");
}
});
new Person();

45. var Person = Backbone.Model.extend({
initialize: function(){
console.log("I'm alive!");
}
});
new Person();

46. var Person = Backbone.Model.extend({
initialize: function(){
console.log("I'm alive!");
}
});
new Person();

47. var Person = Backbone.Model.extend({});
var me = new Person({name: 'Radoslav'});
me.get('name'); // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName'); // Stankov

48. var Person = Backbone.Model.extend({});
var me = new Person({name: 'Radoslav'});
me.get('name'); // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName'); // Stankov

49. var Person = Backbone.Model.extend({});
var me = new Person({name: 'Radoslav'});
me.get('name'); // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName'); // Stankov

50. var Person = Backbone.Model.extend({});
var me = new Person({name: 'Radoslav'});
me.get('name'); // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName'); // Stankov

51. var Person = Backbone.Model.extend({});
var me = new Person({name: 'Radoslav'});
me.get('name'); // Radoslav
me.set({lastName: 'Stankov'});
me.get('lastName'); // Stankov

52. var Person = Backbone.Model.extend({
defaults: {
name: 'John',
lastName: 'Doe',
}
});
var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe

53. var Person = Backbone.Model.extend({
defaults: {
name: 'John',
lastName: 'Doe',
}
});
var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe

54. var Person = Backbone.Model.extend({
defaults: {
name: 'John',
lastName: 'Doe',
}
});
var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe

55. var Person = Backbone.Model.extend({
defaults: {
name: 'John',
lastName: 'Doe',
}
});
var me = new Person();
me.get('name'); // John
me.get('lastName'); // Doe

56. var Calculator = Backbone.Model.extend({
defaults: {
value: 0
},
value: function(){
return this.get('value');
},
sum: function(value){
this.set({value: value + this.get('value')});
},
reset: function(){
this.set({value: 0});
}
});

57. var Calculator = Backbone.Model.extend({
defaults: {
value: 0
},
value: function(){
return this.get('value');
},
sum: function(value){
this.set({value: value + this.get('value')});
},
reset: function(){
this.set({value: 0});
}
});

58. var Calculator = Backbone.Model.extend({
defaults: {
value: 0
},
value: function(){
return this.get('value');
},
sum: function(value){
this.set({value: value + this.get('value')});
},
reset: function(){
this.set({value: 0});
}
});

59. var Calculator = Backbone.Model.extend({
defaults: {
value: 0
},
value: function(){
return this.get('value');
},
sum: function(value){
this.set({value: value + this.get('value')});
},
reset: function(){
this.set({value: 0});
}
});

60. var Calculator = Backbone.Model.extend({
defaults: {
value: 0
},
value: function(){
return this.get('value');
},
sum: function(value){
this.set({value: value + this.get('value')});
},
reset: function(){
this.set({value: 0});
}
});

61. var cal = new Calculator();
cal.bind('change:value', function(model, value){
console.log(value);
});
cal.bind('change', function(model){
console.log(model.get('value'));
});
cal.bind('all', function(eventName) {
console.log('I see every thing!', eventName);
});

62. var cal = new Calculator();
cal.bind('change:value', function(model, value){
console.log(value);
});
cal.bind('change', function(model){
console.log(model.get('value'));
});
cal.bind('all', function(eventName) {
console.log('I see every thing!', eventName);
});

63. var cal = new Calculator();
cal.bind('change:value', function(model, value){
console.log(value);
});
cal.bind('change', function(model){
console.log(model.get('value'));
});
cal.bind('all', function(eventName) {
console.log('I see every thing!', eventName);
});

64. var cal = new Calculator();
cal.bind('change:value', function(model, value){
console.log(value);
});
cal.bind('change', function(model){
console.log(model.get('value'));
});
cal.bind('all', function(eventName) {
console.log('I see every thing!', eventName);
});

65. var cal = new Calculator();
cal.bind('myEvent', function(){
console.log('KaBoom....');
});
cal.trigger('myEvent');

66. var Product = Backbone.Model.extend({
urlRoot: '/products'
});
var chair = new Product({
name: 'chair',
price: 10
});
chair.save();
// POST /products

67. var Product = Backbone.Model.extend({
url: function(){
return '/products/' + (this.isNew() ? '' : this.id);
}
});
var chair = new Product({
id: 5,
name: 'chair',
price: 10
});
chair.save();
// PUT /products/1

68. http://documentcloud.github.com/backbone/#Model-save

69. И още...
• validate
• escape
• has
• unset
• clear
• hasChanged
• changedAttributes
• previousAttributes
• fetch
• toJSON
• clone

70. Backbone.View

72. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

73. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

74. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

75. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

76. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

77. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

78. var UserNameView = Backbone.View.extend({
tagName: 'input',
className: 'string optional',
id: 'user-name',
attributes: {
type: 'string',
name: 'user[name]'
}
});
var userName = new UserNameView();
console.log(userName.el);
<input type="string" name="user[name]" id="user-name" class="string optional">

79. var UsersListView = Backbone.View.extend({
el: '#users-list'
});
var userList = new UsersListView();
console.log(userList.el);

80. var EditBoxView = Backbone.View.extend({});
var element = $('#edit-box-view').get(0),
editBox = new EditBoxView({el: element});
console.log(editBox.el === element);

81. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

82. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

83. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

84. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

85. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

86. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

87. var DocumentView = Backbone.View.extend({
events: {
'dblclick': 'open',
'click .grid .doc': 'select',
'customEvent .title': 'custom'
},
open: function() {},
select: function() {},
custom: function() {}
});

88. <script type="text/template" id="news">
<h1><%= title %></h1>
<time><%= created_at %></time>
<p><%= text %></p>
</script>

89. var NewsView = Backbone.View.extend({
template: _.template($('#news').html()),
render: function() {
this.el.innerHTML = this.template(this.model);
return this;
}
});

90. var view = new NewsView({
model: {
title: "News Title",
created_at: "Today",
text: "Long text"
}
});
document.body.appendChild(view.render().el);

91. <script type="text/template" id="news">
<h1><%= title %></h1>
<time><%= created_at %></time>
<p><%= text %></p>
</script>

92. <div>
<h1>News Title</h1>
<time>Today</time>
<p>Long text</p>
</div>

93. View
Model DOM

94. View
Model DOM

95. View
Model DOM

96. View
Model DOM

97. View
Model DOM

98. View
Model DOM

99. View
Model DOM

100. View
Model DOM

101. View
Model DOM

102. View
Model DOM

103. View
Model DOM
View 2

104. View
Model DOM
View 2

105. View
Model DOM
View 2

106. View
Model DOM
View 2

107. View
Model DOM
View 2

108. View
Model DOM
View 2

109. View
Model DOM
View 2

110. View
Model DOM
View 2

111. View
Model DOM
View 2

112. View
Model DOM
View 2

113. View
View 2
Model DOM

114. View
View 2
Model DOM
View 3

115. View
View 2
Model DOM
View 3
View 4

116. View
View 2
Model DOM
View 3
View 4
View .. N

117. View
View 2
Model DOM
View 3
View 4
View .. N

118. View
View 2
Model DOM
View 3
View 4
View .. N

119. View
View 2
Model DOM
View 3
View 4
View .. N

120. View
View 2
Model DOM
View 3
View 4
View .. N

121. View
View 2
Model DOM
View 3
View 4
View .. N

122. View
View 2
Model DOM
View 3
View 4
View .. N

123. View
View 2
Model DOM
View 3
View 4
View .. N

124. View
View 2
Model DOM
View 3
View 4
View .. N

125. Demo

126. var Calculator = Backbone.Model.extend({
defaults: {
value: 0
},
increment: function() {
this.set({'value': this.get('value') + 1});
},
decrement: function() {
this.set({'value': this.get('value') - 1});
},
getValue: function() {
return this.get('value');
}
});

127. var ButtonsView = Backbone.View.extend({
events: {
'click .plus': 'plus',
'click .minus': 'minus'
},
plus: function() {
this.model.increment();
},
minus: function() {
this.model.decrement();
}
});

128. var DisplayView = Backbone.View.extend({
initialize: function() {
this.model.bind('change:value', this.render, this);
this.render();
},
render: function() {
this.el.innerHTML = this.model.getValue();
return this;
}
});

129. var cal = new Calculator();
new ButtonsView({model: cal, el: '.buttons'});
new DisplayView({model: cal, el: '.display'});

130. Backbone.Collection

131. var ProductsCollection = Backbone.Collection.extend({
model: Product
});
var products = new ProductsCollection();
products.fetch();
products.bind('reset', function(list) {
console.log('Loaded', list.length, 'records');
});

132. products.bind('add', function(model) {
console.log('new product added');
});
products.bind('remove', function(model) {
console.log('item product removed');
});

133. И още...
• Underscore Methods
• add / remove / at
• sort / comparator
• reset
• create
• url
• toJSON

134. Backbone.Router

136. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

137. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

138. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

139. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

140. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

141. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

142. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

143. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

144. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

145. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

146. var AppRouter = Backbone.Router.extend({
routes: {
'pages': 'index',
'pages/search/:q': 'search',
'pages/:id': 'show'
},
initialize: function() {
console.log('initialize');
},
index: function() { /* code */ },
search: function(query) { /* code */ },
show: function(id) { /* code */ }
});
var app = new AppRouter();
Backbone.history.start();

147. app.navigate('pages', true);
app.navigate('pages/search/title', true);
app.navigate('pages/3', true);

148. site.com/path#pages
site.com/path#pages/search/title
site.com/path#pages/3

150. Backbone.history.start({pushState: true});

151. site.com/path#pages
site.com/path#pages/search/title
site.com/path#pages/3

152. site.com/path/pages
site.com/path/pages/search/title
site.com/path/pages/3

160. Недостатъци

161. Алтернативи

162. Алтернативи

163. Алтернативи

164. Алтернативи

165. Въпроси?

166. Благодаря за вниманието
@rstankov