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 ...
The quick way$(document).ready(function () {      $("#newButton").click(function() {            $.ajax({                  ...
ProsYou get it to work in minutes with nearly no knowledge about Javascript
ConsBuilding single page applications you end up in spaghetti code (callback chains, presentation and business logic mixed...
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 ...
Already many solutionsBackbone.jsGoogle ClosureEmber.jsSproutcoreKnockout.jsJavascript MVCSpine.js
Backbone.jsMVC patternLightweightPlays nicely with other librariesComes from the builder of CoffeeScript, Jeremy AskhenasD...
ModelRepresents a singular entityEncapsulates business logicMaintains persistance through RESTful API with JSONNot aware o...
Modelvar Donut = Backbone.Model.extend({      initialize : function() {           this.name = ”Donut”;      },      defaul...
CollectionCollection of models of the same typeUses the same event model as modelsCan be tied to the RESTful APIFilled wit...
Collectionvar Donuts = Backbone.Collection.extend({ model : Donut, url : "/donuts"});var donuts = new Donuts;donuts.fetch(...
ViewRender the DOM elementListens to events thrown from DOM, models,  collectionsModifies DOM on attribute changeMore than...
ViewDonutView = Backbone.View.extend({ tagName : "div", className : "donut", template:_.template($(#tpl-donut-list-item).h...
ControllerManages routing with hash fragmentsSite remains bookmarkableEncapsulates logic for each url ruleDoesnt brake bac...
Controllervar MyController = Backbone.Controller.extend({ routes : {      "say/:something" : "say" }, say : function(somet...
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 w...
Books to mentionJavascript: The Good PartsJavascript Web ApplicationsJavascript PatternsHigh Performance JavascriptTest Dr...
Upcoming SlideShare
Loading in...5
×

Javascript frameworks: Backbone.js

1,105

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
24
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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() { 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. 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();donuts.at(0); -> 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×