Your SlideShare is downloading. ×
  • Like
Backbone js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

My Backbone.js presentation at OpenFest 2011

My Backbone.js presentation at OpenFest 2011

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,723
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
69
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • Open-Close prinsible - open for extensions, close for modifications\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Радослав СтанковOpenFest 05/11/2011
  • 2. Кой съм аз?@rstankovhttp://rstankov.comhttp://github.com/rstankov
  • 3. Browser ControllerModel View Сървър
  • 4. Browser ControllerModel View Сървър
  • 5. Browser ControllerModel View Сървър
  • 6. Browser ControllerModel View Сървър
  • 7. Browser ControllerModel View Сървър
  • 8. Browser ControllerModel View Сървър
  • 9. Browser ControllerModel View Сървър
  • 10. Browser ControllerModel View Сървър
  • 11. Browser ControllerModel View Сървър
  • 12. Browser ControllerModel View Сървър
  • 13. Browser ControllerModel View Сървър
  • 14. Browser ControllerModel View Сървър
  • 15. Browser ControllerModel View Сървър
  • 16. BrowserDomViewModel
  • 17. BrowserDomViewModel
  • 18. BrowserDomViewModel
  • 19. BrowserDomViewModel
  • 20. BrowserDomViewModel
  • 21. BrowserDomViewModel
  • 22. BrowserDomViewModel
  • 23. BrowserDomViewModel
  • 24. BrowserDomViewModel
  • 25. Backbone.Events
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. Backbone.Model
  • 32. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); }});new Person();
  • 33. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); }});new Person();
  • 34. var Person = Backbone.Model.extend({ initialize: function(){ console.log("Im alive!"); }});new Person();
  • 35. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  • 36. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  • 37. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  • 38. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  • 39. var Person = Backbone.Model.extend({});var me = new Person({name: Radoslav});me.get(name); // Radoslavme.set({lastName: Stankov});me.get(lastName); // Stankov
  • 40. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  • 41. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  • 42. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  • 43. var Person = Backbone.Model.extend({ defaults: { name: John, lastName: Doe, }});var me = new Person();me.get(name); // Johnme.get(lastName); // Doe
  • 44. 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}); }});
  • 45. 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}); }});
  • 46. 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}); }});
  • 47. 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}); }});
  • 48. 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}); }});
  • 49. 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);});
  • 50. 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);});
  • 51. 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);});
  • 52. 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);});
  • 53. var cal = new Calculator();cal.bind(myEvent, function(){ console.log(KaBoom....);});cal.trigger(myEvent);
  • 54. var Product = Backbone.Model.extend({ urlRoot: /products});var chair = new Product({ name: chair, price: 10});chair.save();// POST /products
  • 55. 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
  • 56. http://documentcloud.github.com/backbone/#Model-save
  • 57. И още...• validate• escape• has• unset• clear• hasChanged• changedAttributes• previousAttributes• fetch• toJSON• clone
  • 58. Backbone.View
  • 59. 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">
  • 60. 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">
  • 61. 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">
  • 62. 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">
  • 63. 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">
  • 64. 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">
  • 65. 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">
  • 66. var UsersListView = Backbone.View.extend({ el: #users-list});var userList = new UsersListView();console.log(userList.el);
  • 67. var EditBoxView = Backbone.View.extend({});var element = $(#edit-box-view).get(0), editBox = new EditBoxView({el: element});console.log(editBox.el === element);
  • 68. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 69. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 70. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 71. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 72. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 73. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 74. var DocumentView = Backbone.View.extend({ events: { dblclick: open, click .grid .doc: select, customEvent .title: custom }, open: function() {}, select: function() {}, custom: function() {}});
  • 75. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p></script>
  • 76. var NewsView = Backbone.View.extend({ template: _.template($(#news).html()), render: function() { this.el.innerHTML = this.template(this.model); return this; }});
  • 77. var view = new NewsView({ model: { title: "News Title", created_at: "Today", text: "Long text" }});document.body.appendChild(view.render().el);
  • 78. <script type="text/template" id="news"> <h1><%= title %></h1> <time><%= created_at %></time> <p><%= text %></p></script>
  • 79. <div> <h1>News Title</h1> <time>Today</time> <p>Long text</p></div>
  • 80. ViewModel DOM
  • 81. ViewModel DOM
  • 82. ViewModel DOM
  • 83. ViewModel DOM
  • 84. ViewModel DOM
  • 85. ViewModel DOM
  • 86. ViewModel DOM
  • 87. ViewModel DOM
  • 88. ViewModel DOM
  • 89. ViewModel DOM
  • 90. ViewModel DOM View 2
  • 91. ViewModel DOM View 2
  • 92. ViewModel DOM View 2
  • 93. ViewModel DOM View 2
  • 94. ViewModel DOM View 2
  • 95. ViewModel DOM View 2
  • 96. ViewModel DOM View 2
  • 97. ViewModel DOM View 2
  • 98. ViewModel DOM View 2
  • 99. ViewModel DOM View 2
  • 100. View View 2Model DOM
  • 101. View View 2Model DOM View 3
  • 102. View View 2Model DOM View 3 View 4
  • 103. View View 2Model DOM View 3 View 4 View .. N
  • 104. View View 2Model DOM View 3 View 4 View .. N
  • 105. View View 2Model DOM View 3 View 4 View .. N
  • 106. View View 2Model DOM View 3 View 4 View .. N
  • 107. View View 2Model DOM View 3 View 4 View .. N
  • 108. View View 2Model DOM View 3 View 4 View .. N
  • 109. View View 2Model DOM View 3 View 4 View .. N
  • 110. View View 2Model DOM View 3 View 4 View .. N
  • 111. View View 2Model DOM View 3 View 4 View .. N
  • 112. Demo
  • 113. 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); }});
  • 114. var ButtonsView = Backbone.View.extend({ events: { click .plus: plus, click .minus: minus }, plus: function() { this.model.increment(); }, minus: function() { this.model.decrement(); }});
  • 115. 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; }});
  • 116. var cal = new Calculator();new ButtonsView({model: cal, el: .buttons});new DisplayView({model: cal, el: .display});
  • 117. Backbone.Collection
  • 118. var ProductsCollection = Backbone.Collection.extend({ model: Product});var products = new ProductsCollection();products.fetch();products.bind(reset, function(list) { console.log(Loaded, list.length, records);});
  • 119. products.bind(add, function(model) { console.log(new product added);});products.bind(remove, function(model) { console.log(item product removed);});
  • 120. И още...• Underscore Methods• add / remove / at• sort / comparator• reset• create• url• toJSON
  • 121. Backbone.Router
  • 122. 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();
  • 123. 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();
  • 124. 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();
  • 125. 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();
  • 126. 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();
  • 127. 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();
  • 128. 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();
  • 129. 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();
  • 130. 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();
  • 131. 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();
  • 132. 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();
  • 133. app.navigate(pages, true);app.navigate(pages/search/title, true);app.navigate(pages/3, true);
  • 134. site.com/path#pagessite.com/path#pages/search/titlesite.com/path#pages/3
  • 135. Backbone.history.start({pushState: true});
  • 136. site.com/path#pagessite.com/path#pages/search/titlesite.com/path#pages/3
  • 137. site.com/path/pagessite.com/path/pages/search/titlesite.com/path/pages/3
  • 138. Недостатъци
  • 139. Алтернативи
  • 140. Алтернативи
  • 141. Алтернативи
  • 142. Алтернативи
  • 143. Въпроси?
  • 144. Благодаря за вниманието@rstankov