A LittleFor Your App   Luca Mearelli
A quick poll          Using DOM libraries?          Using (end-to-end) frameworks?                                 @lmea #...
Backbone.js: what is it?          A lightweight collection of tools          giving enough structure to help          buid...
Backbone.js: what is it for?          Data heavy pages          Frontends to (JSON) web services          CRUD-kind web ap...
Backbone.js: Model-View-Controller                                     model               view                           ...
Elements of backbone         Model         Collection         View         Controller                       @lmea #jsday  ...
Elements of backbone (2)         Event         Sync         History                           @lmea #jsday   http://jsday....
Model & Collection          Representing the data          Building the business logic          Handling persistence      ...
The simplest model     var Talk = Backbone.Model.extend({})                                            @lmea #jsday   http...
Initializing & setting defaults      var Talk = Backbone.Model.extend({           // Default attributes for Talk          ...
Assorted CRUD methods     var my_talk = new Talk({title: "A Little Backbone"});     my_talk.get("title");     my_talk.set(...
Custom functions     var Talk = Backbone.Model.extend({          full_info: function(){            return this.get("title"...
Validating models      var Talk = Backbone.Model.extend({        validate: function(attrs) {          if (_.isEmpty(attrs....
Saving models     // delegates to Backbone.sync     my_talk.save(); // if my_talk.isNew() -> ‘create’ (HTTP “POST”)     my...
Backbone.sync   Backbone.sync = function(method, model, options) {        switch   (method) {          case   "read":    ....
Models collection      var Track = Backbone.Collection.extend({        model: Talk      });      var track_talks = new Tra...
Collection: adding and removing models   track_talks.add(      {title:"JavaScript Survival Guide",speaker:"Giordano Scalzo...
Fetching a collection from the server      var Track = Backbone.Collection.extend({        url: function(){          retur...
Custom sorted collections    track_talks.comparator = function(talk) {      return talk.get("time");    }    track_talks.a...
Underscore.js goodies    var Track = Backbone.Collection.extend({      future: function() {        return this.filter(func...
Views        is a small chunk of the page        has declarative event handling        acts like a view controller        ...
A basic view    // The DOM element for a talk    var TalkView = Backbone.View.extend({       //... is a div tag.       tag...
Declarative event handling    var TalkView = Backbone.View.extend({      // The DOM events specific to a talk.      events...
Sub-view element selection    view.$(selector) // equivalent to $(selector, view.el)    this.$(".title").text()    this.$(...
Binding model events    var TrackView = Backbone.View.extend({      initialize: function() {        _.bindAll(this, addOne...
Rendering templates    <script type="text/template" id="talk-template">    <div class="talk <%= lightining ? ltalk :  %>">...
Controllers          intra-page action routing          evented control flow          stateful, bookmarkable sub-pages     ...
Controller example    var ConferenceController = Backbone.Controller.extend({      routes: {         "!help":            "...
Controller routes    routes: {      "help/:page":            "help",      "slides/*path":          "downloadSlides",      ...
Backbone.js: demo         A mobile note taking app                            @lmea #jsday   http://jsday.it/2011
In the end, what does it do?          JS data models          Event based          RESTful (JSON)          Intra page cont...
And, why should I use it?          avoids spaghetti code          cleanly separates concerns          simple to integrate ...
thanks!http://spazidigitali.com@lmea                     @lmea #jsday   http://jsday.it/2011
A Little Backbone For Your App
A Little Backbone For Your App
Upcoming SlideShare
Loading in...5
×

A Little Backbone For Your App

7,389

Published on

Backbone.js presentation at JSDay 2011: http://www.jsday.it/2011/archive/talk/a-little-backbone-for-your-app

Published in: Technology, Business
0 Comments
20 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,389
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
125
Comments
0
Likes
20
Embeds 0
No embeds

No notes for slide

A Little Backbone For Your App

  1. 1. A LittleFor Your App Luca Mearelli
  2. 2. A quick poll Using DOM libraries? Using (end-to-end) frameworks? @lmea #jsday http://jsday.it/2011
  3. 3. Backbone.js: what is it? A lightweight collection of tools giving enough structure to help buiding apps in the browser without getting in the way @lmea #jsday http://jsday.it/2011
  4. 4. Backbone.js: what is it for? Data heavy pages Frontends to (JSON) web services CRUD-kind web apps @lmea #jsday http://jsday.it/2011
  5. 5. Backbone.js: Model-View-Controller model view controller @lmea #jsday http://jsday.it/2011
  6. 6. Elements of backbone Model Collection View Controller @lmea #jsday http://jsday.it/2011
  7. 7. Elements of backbone (2) Event Sync History @lmea #jsday http://jsday.it/2011
  8. 8. Model & Collection Representing the data Building the business logic Handling persistence @lmea #jsday http://jsday.it/2011
  9. 9. The simplest model var Talk = Backbone.Model.extend({}) @lmea #jsday http://jsday.it/2011
  10. 10. Initializing & setting defaults var Talk = Backbone.Model.extend({ // Default attributes for Talk defaults: { title: "a talk", speaker: "me", lenght: 60 }, intialize: function(){ if (this.lenght>10) { this.set({"lightining": false}); } }, }) @lmea #jsday http://jsday.it/2011
  11. 11. Assorted CRUD methods var my_talk = new Talk({title: "A Little Backbone"}); my_talk.get("title"); my_talk.set({"speaker":"Luca Mearelli"}); if(my_talk.has("video")){ //... }; my_talk.unset("speaker") my_talk.id my_talk.cid @lmea #jsday http://jsday.it/2011
  12. 12. Custom functions var Talk = Backbone.Model.extend({ full_info: function(){ return this.get("title")+" by:"+this.get("speaker"); }, rate: function(stars){ if(_.isUndefined(this.get("rating"))){ this.save({rating: stars}); } }, }) @lmea #jsday http://jsday.it/2011
  13. 13. Validating models var Talk = Backbone.Model.extend({ validate: function(attrs) { if (_.isEmpty(attrs.title)) { return "The title should be defined"; } if (attrs.lenght>60) { return "The maximum lenght is 60 minutes"; } } }); my_talk.bind("error", function(model, error) { alert(model.full_info() + " " + error); }); my_talk.set({"lenght":120}); @lmea #jsday http://jsday.it/2011
  14. 14. Saving models // delegates to Backbone.sync my_talk.save(); // if my_talk.isNew() -> ‘create’ (HTTP “POST”) my_talk.save({title:"ahah"}) // otherwise ‘update’ (HTTP “PUT”) my_talk.save({...}, { success: function(model, resp, xhr){...}, error: function(model, errormsg){...} }); my_talk.url(); // /[collection.url]/[id] or /[urlRoot]/[id] Talk.urlRoot = /talks; @lmea #jsday http://jsday.it/2011
  15. 15. Backbone.sync Backbone.sync = function(method, model, options) { switch (method) { case "read": ... break; // read ! GET /collection[/id] case "create": ... break; // create ! POST /collection case "update": ... break; // update ! PUT /collection/id case "delete": ... break; // delete ! DELETE /collection/id } }; // to emulate put & delete with post + parameter Backbone.emulateHTTP = true; @lmea #jsday http://jsday.it/2011
  16. 16. Models collection var Track = Backbone.Collection.extend({ model: Talk }); var track_talks = new Track([talk1, talk2, talk3]); track_talks.get(talk2.id); // gets talk2 track_talks.at(0); // gets talk1 track_talks.lenght; // is 3 @lmea #jsday http://jsday.it/2011
  17. 17. Collection: adding and removing models track_talks.add( {title:"JavaScript Survival Guide",speaker:"Giordano Scalzo " } ); track_talks.add([ {title: "Faster Web Sites 2.0", speaker: "Steve Souders" }, {title: "HTML5, the current status", speaker:"Patrick H. Lauke"} ]); track_talks.remove(talk1); track_talks.remove([talk2, talk3]); track_talks.refresh([ {title:"Javascript the New Parts",speaker: "Federico Galassi" } ]); @lmea #jsday http://jsday.it/2011
  18. 18. Fetching a collection from the server var Track = Backbone.Collection.extend({ url: function(){ return "/tracks/"+this.get("number"); }, // or simply url: "/talks" }); var track_talks = new Track({number: 1}) track_talks.fetch(); // calls model.parse(response) @lmea #jsday http://jsday.it/2011
  19. 19. Custom sorted collections track_talks.comparator = function(talk) { return talk.get("time"); } track_talks.add(new Talk({time: 17, title: "A Little Backbone"})); track_talks.add(new Talk({time: 9, title: "Faster Web Sites 2.0"})); track_talks.add(new Talk({time: 10, title: "JavaScript Survival Guide"})); alert(track_talks.pluck(title)); track_talks.sort(); @lmea #jsday http://jsday.it/2011
  20. 20. Underscore.js goodies var Track = Backbone.Collection.extend({ future: function() { return this.filter(function(talk){ return todo.get(time)>(new Date()).getHours(); }); }, next: function() { return this.first.apply(this, this.future()); } // forEach (each), map, reduce (foldl, inject), // reduceRight (foldr), find (detect), filter (select), // reject, every (all), some (any), include, invoke, max, // min, sortBy, sortedIndex, toArray, size, first, rest, // last, without, indexOf, lastIndexOf, isEmpty, chain }); @lmea #jsday http://jsday.it/2011
  21. 21. Views is a small chunk of the page has declarative event handling acts like a view controller @lmea #jsday http://jsday.it/2011
  22. 22. A basic view // The DOM element for a talk var TalkView = Backbone.View.extend({ //... is a div tag. tagName: "div", className: "a-talk-row", render: function() { $(this.el).html(this.model.full_info()); return this; }, }); v = new TalkView({ model:my_talk, id: talk-+my_talk.id }); @lmea #jsday http://jsday.it/2011
  23. 23. Declarative event handling var TalkView = Backbone.View.extend({ // The DOM events specific to a talk. events: { "click .title" : "rateIt", "click span.edit" : "edit", "keypress input.title" : "saveOnEnter" }, edit: function() { $(this.el).addClass("editing"); this.$(input.title).focus(); }, saveOnEnter: function(e) { }, rateIt: function(e) { }, }); @lmea #jsday http://jsday.it/2011
  24. 24. Sub-view element selection view.$(selector) // equivalent to $(selector, view.el) this.$(".title").text() this.$("li input[@name=email]") this.$("div #start") @lmea #jsday http://jsday.it/2011
  25. 25. Binding model events var TrackView = Backbone.View.extend({ initialize: function() { _.bindAll(this, addOne, addAll, render); this.collection.bind(add, this.addOne); this.collection.bind(refresh, this.addAll); this.collection.bind(all, this.render); this.collection.fetch(); }, }); var current_track = new Track(...); var track_view = new TrackView({collection: current_track }) @lmea #jsday http://jsday.it/2011
  26. 26. Rendering templates <script type="text/template" id="talk-template"> <div class="talk <%= lightining ? ltalk : %>"> <div class="talk-title"><%= title %></div> <span class="talk-speaker"><%= speaker %></span> <% for (i=0;i<rating;i++) { %><img src="star.png" /><% } %> </div> </script> render: function() { $(this.el).html(this.template(this.model.toJSON())); return this; }, @lmea #jsday http://jsday.it/2011
  27. 27. Controllers intra-page action routing evented control flow stateful, bookmarkable sub-pages @lmea #jsday http://jsday.it/2011
  28. 28. Controller example var ConferenceController = Backbone.Controller.extend({ routes: { "!help": "help", // #!help "!track/:number": "search", // #!track/1 }, help: function() { }, search: function(number) { } }); new ConferenceController(); Backbone.history.start(); @lmea #jsday http://jsday.it/2011
  29. 29. Controller routes routes: { "help/:page": "help", "slides/*path": "downloadSlides", "talk/:track/:talk": "showTalk", "speaker/:name/talks": "speakerTalks" "speaker/:name": "speaker" } // Matches #video/10, passing "10" this.route("video/:number", "video", function(number){ ... }); // Matches #talk/203/rate/2, passing "203" and "5" this.route(/^talk/(.*?)/rate/([1-5])$/, "rate", function(id,vote){ ... }); @lmea #jsday http://jsday.it/2011
  30. 30. Backbone.js: demo A mobile note taking app @lmea #jsday http://jsday.it/2011
  31. 31. In the end, what does it do? JS data models Event based RESTful (JSON) Intra page control flow @lmea #jsday http://jsday.it/2011
  32. 32. And, why should I use it? avoids spaghetti code cleanly separates concerns simple to integrate @lmea #jsday http://jsday.it/2011
  33. 33. thanks!http://spazidigitali.com@lmea @lmea #jsday http://jsday.it/2011
  1. A particular slide catching your eye?

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

×