Your SlideShare is downloading. ×
Javascript frameworks: Backbone.js
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Javascript frameworks Backbone.js Bring structure to the client side
  • 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. The quick way$(document).ready(function () { $("#newButton").click(function() { $.ajax({ url: "createNew.php", data: { "name": $("#nameField").val() }, success: function() { window.location = "edit.php"; } }); });});
  • 4. ProsYou get it to work in minutes with nearly no knowledge about Javascript
  • 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. But we want...Easily maintainableLoosly coupledStrong cohesionTestableArchitecture patternsSeparate logic from the view
  • 7. MVC patternIf it works on the server side, why not use it on the client side?Separates presentation logic from business logic
  • 8. Already many solutionsBackbone.jsGoogle ClosureEmber.jsSproutcoreKnockout.jsJavascript MVCSpine.js
  • 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. ModelRepresents a singular entityEncapsulates business logicMaintains persistance through RESTful API with JSONNot aware of presentationActiveRecord implementation
  • 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. 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. 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. 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. 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. ControllerManages routing with hash fragmentsSite remains bookmarkableEncapsulates logic for each url ruleDoesnt brake back button in browser
  • 17. Controllervar MyController = Backbone.Controller.extend({ routes : { "say/:something" : "say" }, say : function(something) { alert(something); }});var yC = new MyController;Backbone.history.start();
  • 18. The dark sideLack of built-in UI Bindings, results in lot of boilerplateNo layout for viewsNo composed views
  • 19. Further readingBackbone.js documentationUnderscore.js documentationJavascript MVC frameworks overviewTodos tutorialHello world tutorialIntroduction tutorial part 1, part 2, part 3Wine cellar tutorial
  • 20. Books to mentionJavascript: The Good PartsJavascript Web ApplicationsJavascript PatternsHigh Performance JavascriptTest Driven Javascript Development