Javascript frameworks: Backbone.js


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Javascript frameworks: Backbone.js

  1. 1. Javascript frameworks Backbone.js Bring structure to the client side
  2. 2. The quick wayInclude jQueryBrowse its documentationStart codingIn minutes you get working resultsQuickly end up in a code full of DOM manipulation and callback chains
  3. 3. The quick way$(document).ready(function () { $("#newButton").click(function() { $.ajax({ url: "createNew.php", data: { "name": $("#nameField").val() }, success: function() { window.location = "edit.php"; } }); });});
  4. 4. ProsYou get it to work in minutes with nearly no knowledge about Javascript
  5. 5. ConsBuilding single page applications you end up in spaghetti code (callback chains, presentation and business logic mixed up all around)Strongly coupledWeak cohesionHard to maintainData stored in the HTML
  6. 6. But we want...Easily maintainableLoosly coupledStrong cohesionTestableArchitecture patternsSeparate logic from the view
  7. 7. MVC patternIf it works on the server side, why not use it on the client side?Separates presentation logic from business logic
  8. 8. Already many solutionsBackbone.jsGoogle ClosureEmber.jsSproutcoreKnockout.jsJavascript MVCSpine.js
  9. 9. Backbone.jsMVC patternLightweightPlays nicely with other librariesComes from the builder of CoffeeScript, Jeremy AskhenasDepends on Underscore.jsBig community, good documentation, many tutorials, used by by many sites (Groupon, Walmart, Foursquare, LinkedIn, etc.)
  10. 10. ModelRepresents a singular entityEncapsulates business logicMaintains persistance through RESTful API with JSONNot aware of presentationActiveRecord implementation
  11. 11. Modelvar Donut = Backbone.Model.extend({ initialize : function() { = ”Donut”; }, defaults: { name: ”empty” }})var bostonCream = new Donut({ name : "Bostan Cream", cream_filled : true});bostonCream.set({ sprinkles : true });bostonCream.get("name");;
  12. 12. CollectionCollection of models of the same typeUses the same event model as modelsCan be tied to the RESTful APIFilled with list functions of Underscore.js
  13. 13. Collectionvar Donuts = Backbone.Collection.extend({ model : Donut, url : "/donuts"});var donuts = new Donuts;donuts.fetch();; -> gets donuts by index.donuts.get(0); -> gets donuts by id.donuts.add(new Donut());
  14. 14. ViewRender the DOM elementListens to events thrown from DOM, models, collectionsModifies DOM on attribute changeMore than one View can be attached to the same modelTemplating: can be used with any templating library
  15. 15. ViewDonutView = Backbone.View.extend({ tagName : "div", className : "donut", template:_.template($(#tpl-donut-list-item).html()), initialize : function(options) { this.render = _.bind(this.render, this); this.model.bind(change:name, this.render); } render : function() { $(this.el).html(this.template(this.model.toJSON())); return this; }});
  16. 16. ControllerManages routing with hash fragmentsSite remains bookmarkableEncapsulates logic for each url ruleDoesnt brake back button in browser
  17. 17. Controllervar MyController = Backbone.Controller.extend({ routes : { "say/:something" : "say" }, say : function(something) { alert(something); }});var yC = new MyController;Backbone.history.start();
  18. 18. The dark sideLack of built-in UI Bindings, results in lot of boilerplateNo layout for viewsNo composed views
  19. 19. Further readingBackbone.js documentationUnderscore.js documentationJavascript MVC frameworks overviewTodos tutorialHello world tutorialIntroduction tutorial part 1, part 2, part 3Wine cellar tutorial
  20. 20. Books to mentionJavascript: The Good PartsJavascript Web ApplicationsJavascript PatternsHigh Performance JavascriptTest Driven Javascript Development