Javascript frameworks: Backbone.js
Upcoming SlideShare
Loading in...5

Javascript frameworks: Backbone.js






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Javascript frameworks: Backbone.js Javascript frameworks: Backbone.js Presentation Transcript

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