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

Like this? Share it with your network

Share

Javascript frameworks: Backbone.js

  • 1,467 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,467
On Slideshare
1,467
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
23
Comments
0
Likes
2

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

Transcript

  • 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() { this.name = ”Donut”; }, defaults: { name: ”empty” }})var bostonCream = new Donut({ name : "Bostan Cream", cream_filled : true});bostonCream.set({ sprinkles : true });bostonCream.get("name");bostonCream.save();
  • 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();donuts.at(0); -> 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