Downloaded 1,013 times
Uploaded byiloveigloo
Client-side MVC with Backbone.js
The document discusses client-side MVC with Backbone.js. It begins with an overview of Backbone.js and why it provides a useful structure for web applications. It then covers the main aspects of the Backbone architecture including models, collections, views, templates, and routers. Examples are provided for each component and how they work together. Real-world applications using Backbone, including for invoicing and social media analytics, are briefly described.
Client-side MVC with Backbone.js
- 2.
- 3. igloo igloolab.com michele.berto.li @iloveigloo @MicheleBertoli
- 4.
- 5. Lago di Garda jQuery HTML5 UPLOADER JOBBERONE igloolab.com/jquery-html5-uploader jobberone.com SHARP SQUARE igloolab.com/sharpsquare KOALA POMODORO WEBAPP koooala.com pomodorowebapp.com
- 6.
- 7. Why Backbone.js 06:00 min Architecture 14:00 min Real World 05:00 min Tips & Tricks 06:00 min Extras 04:00 min Questions 05:00 min
- 8.
- 9. Why Backbone.js From server-sideto client-side
- 10. Why Backbone.js From server-sideto client-side We need efficient tools
- 11. Why Backbone.js jQuery iscool but…
- 12. Why Backbone.js jQuery iscool but… We have to store object informations into the DOM var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list);
- 13. Why Backbone.js jQuery iscool but… We have to store object informations into the DOM var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list);
- 14. Why Backbone.js jQuery iscool but… jQuery callback hell $.getJSON("/Items", function (data) { var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list); $("li").click(function () { var $this = $(this); var id = $this.attr("id").replace("item-", ""); $.post("/Items", { id: id }, function () { $this.fadeOut(function () { $this.remove(); }); }); }); });
- 15. Why Backbone.js jQuery iscool but… jQuery callback hell $.getJSON("/Items", function (data) { var list = ""; $.each(data, function (index, value) { list += "<li id="item-" + value.Id + "">" + value.Name + "</li>"; }); $("ul").append(list); $("li").click(function () { var $this = $(this); var id = $this.attr("id").replace("item-", ""); $.post("/Items", { id: id }, function () { $this.fadeOut(function () { $this.remove(); }); }); }); });
- 16. Why Backbone.js “It's alltoo easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks.”
- 17. Why Backbone.js So, whatdo we need? • Abstraction. • Decoupling UI from Data. • No more callbacks.
- 18. Why Backbone.js So, whatdo we need? (More practically) • A RESTful service based data layer. • Events (to keep UI and data up-to-date). • A template engine. • A solid routing system. • All the above things wrapped into a lightweight JavaScript framework.
- 19. Why Backbone.js It exists and it’s called: Backbone.js
- 20.
- 21. Architecture Oct 13th, 2010 Jeremy Ashkenas
- 22.
- 23. Architecture Backbone.js gives structureto web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- 24. Architecture Backbone.js gives structureto web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- 25. Architecture Backbone.js gives structureto web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- 26. Architecture Backbone.js gives structureto web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- 27. Architecture Backbone.js gives structureto web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- 28. Architecture Backbone.js gives structureto web applications by providing models with key- value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
- 29. Architecture Dependencies: • jQuery orZepto • Underscore.js • Json2.js
- 30. Architecture MVC Model / Collection Template(View) View (Controller) Router
- 31. Architecture MVC Model / Collection Template(View) View (Controller) Router
- 32. Architecture MVC Model / Collection Template(View) View (Controller) Router
- 33. Architecture MVC Model / Collection Template(View) View (Controller) Router
- 34. Architecture MVC Model / Collection Template(View) View (Controller) Router
- 35. Model • Representing data (auto-generated). • Handling persistence. • Throws events. • Reusable.
- 36. Architecture Model / Collection- View - Template - Router - Utilities Model • Fetch HTTP GET /url • Save (new) HTTP POST /url • Save HTTP PUT /url/id • Destroy HTTP DELETE /url/id
- 37. Architecture Model / Collection- View - Template - Router - Utilities var Item = Backbone.Model.extend({ idAttribute: “Id”, urlRoot: “/Items” });
- 38. Architecture Model / Collection- View - Template - Router - Utilities var item = new Item(); item.set({ Name: “Igloo” }); // trigger change item.save(); // trigger sync
- 39. Architecture Model / Collection- View - Template - Router - Utilities Model • extend • toJSON • changedAttributes • constructor / initialize • fetch • previous • get • save • previousAttributes • set • destroy • escape • validate • has • isValid • unset • url • clear • urlRoot • id • parse • idAttribute • clone • cid • isNew • attributes • change • defaults • hasChanged
- 40. Collection • A list of models. • Underscore methods.
- 41. Architecture Model / Collection- View - Template - Router - Utilities var Items = Backbone.Collection.extend({ model: Item, url: "/Items" });
- 42. Architecture Model / Collection- View - Template - Router - Utilities var items = new Items(); items.fetch(); // trigger reset
- 43. Architecture Model / Collection- View - Template - Router - Utilities items.comparator = function(item) { return item.get("Name"); };
- 44. Architecture Model / Collection- View - Template - Router - Utilities Collection • extend • getByCid • etch • model • at • eset • constructor / initialize • length • create • models • comparator • toJSON • sort • add • pluck • remove • url • get • parse
- 45. Architecture Model / Collection- View - Template - Router - Utilities Collection • sortBy • groupBy • forEach (each) • sortedIndex • map • shuffle • reduce (foldl, inject) • toArray • reduceRight (foldr) • size • find (detect) • first • filter (select) • initial • reject • rest • every (all) • last • some (any) • without • include • indexOf • invoke • lastIndexOf • max • isEmpty • min • chain
- 46. View • Manipulates the DOM. • Delegates DOM events. • Has a Model / Collection.
- 47. Architecture Model / Collection- View - Template - Router - Utilities View View (Collection) View (Model)
- 48. Architecture Model / Collection- View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
- 49. Architecture Model / Collection- View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
- 50. Architecture Model / Collection- View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
- 51. Architecture Model / Collection- View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
- 52. Architecture Model / Collection- View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
- 53. Architecture Model / Collection- View - Template - Router - Utilities var ListView = Backbone.View.extend({ el: $("ul"), initialize: function () { this.collection.bind("reset", this.render, this); }, render: function () { this.collection.each(this.addItem, this); return this; }, addItem: function (item) { var itemView = new ItemView({ var ItemView = Backbone.View.extend({ model: item tagName: "li", }); render: function () { this.$el.append(itemView.el); this.$el.text(this.model.get("Name")); itemView.render(); return this; } } }); });
- 54. Architecture Model / Collection- View - Template - Router - Utilities var items = new Items(); var listView = new ListView({ collection: items }); items.fetch();
- 55. Architecture Model / Collection- View - Template - Router - Utilities View • $ (jQuery or Zepto) • extend • render • constructor / initialize • remove • el • make • $el • delegateEvents • setElement • undelegateEvents • attributes
- 56. Template (Underscore.js) Compiles JavaScript templates into functions that can be evaluated for rendering. • Mustache • jQuery-tmpl
- 57. Architecture Model / Collection- View - Template - Router - Utilities <script type="text/template" id="item-template"> <li> <%= Name %> </li> </script>
- 58. Architecture Model / Collection- View - Template - Router - Utilities var ItemView = Backbone.View.extend({ … template: _.template($("#item-template").html()), ... render: function () { this.$el.html(this.template(this.model.toJSON())); return this; } … });
- 59. Router • Maps urls to function. • Enable history / bookmarking.
- 60. Architecture Model / Collection- View - Template - Router - Utilities var AppRouter = Backbone.Router.extend({ routes: { "": "initialize“ }, initialize: function () { … } });
- 61. Architecture Model / Collection- View - Template - Router - Utilities window.AppRouter = Backbone.Router.extend({ routes: { "": "loadInvoices", "/add": "addInvoice", "/show/:id": "showInvoice", "/edit/:id": "editInvoice“ }, loadInvoices: function () { … }, addInvoice: function () { … }, showInvoice: function (id) { … }, editInvoice: function (id) { … } });
- 62. Architecture Model / Collection- View - Template - Router - Utilities Router • extend • routes • constructor / initialize • route • navigate
- 63. Utilities • History • Sync • Utility
- 64. Architecture Model /Collection Data Router View Source Template
- 65.
- 66. Real World Polar management •Smart invoicing web application Technologies • .NET RESTful Web Services / MS SQL • Backbone.js
- 67. Real World Polar management
- 68.
- 69.
- 70. Real World Polar management window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });
- 71. Real World Polar management window.AppRouter = Backbone.Router.extend({ routes: { … "/modifica/:id": "editInvoice“ }, editInvoice: function (id) { … } });
- 72. Real World Koala • Socialmedia analytics Technologies • NET RESTful Web Services / RavenDB • Backbone.js • Highcharts.js
- 73.
- 74.
- 75. Real World Koala window.Logs= Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
- 76. Real World Koala window.Logs= Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
- 77. Real World Koala window.Logs= Backbone.Collection.extend({ model: Log, url: "/Data", comparator: function (log) { return log.get("Date"); }, sum: function (field) { return this.reduce(function (memo, log) { return memo + log.get(field); }, 0); } });
- 78. Real World Linkedin
- 79. Real World FourSquare
- 80. Real World WunderKit
- 81. Real World Groupon
- 82. Real World Basecamp
- 83.
- 84. Tips & Tricks idAttribute idAttribute: “id” // CouchDB idAttribute: “_id” // .NET idAttribute: “Id”
- 85. Tips & Tricks Related Models
- 86. Tips & Tricks RelatedModels var Invoice = Backbone.Model.extend({ idAttribute: “Id” }); var Invoices = Backbone.Collection.extend({ model: Invoice, url: "/Invoices" });
- 87. Tips & Tricks Related Models
- 88. Tips & Tricks Related Models
- 89. Tips & Tricks RelatedModels var InvoiceDetail = Backbone.Model.extend({ idAttribute: “Id” }); var InvoiceDetails = Backbone.Collection.extend({ model: InvoiceDetail, url: "/InvoiceDetails“ });
- 90. Tips & Tricks RelatedModels var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });
- 91. Tips & Tricks Related Models
- 92. Tips & Tricks Related Models
- 93. Tips & Tricks RelatedModels var Invoice = Backbone.Model.extend({ idAttribute: "Id", initialize: function () { this.setInvoiceDetails(); this.bind("sync", this.setInvoiceDetails); }, setInvoiceDetails: function () { this.set({ InvoiceDetails: new InvoiceDetails(this.get("InvoiceDetails")) }); } });
- 94.
- 95. Extras Plugins • Backbone-Nested • Backbone.Memento •Backbone.Validations • Backbone.localStorage • backbone.couchdb.js • … https://github.com/documentcloud/backbone/wiki/Extensions%2C- Plugins%2C-Resources
- 96. Extras • http://sproutcore.com (Apple/iCloud) •http://knockoutjs.com • http://emberjs.com • http://batmanjs.org (Shopify)
- 97.
- 98. Backbone.js + • Lightweight • Powerful •Code is clean (and maintainable) - • Too verbose (for small applications)
- 99. 3 Lagodi Garda Questions ? Grazie www.igloolab.com @iloveigloo