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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Backbone js

1,810

Published on

My Backbone.js presentation at OpenFest 2011

My Backbone.js presentation at OpenFest 2011

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,810
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
70
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

    ×