A Little Backbone For Your App

A LittleFor Your App Luca Mearelli

A quick poll Using DOM libraries? Using (end-to-end) frameworks? @lmea #jsday http://jsday.it/2011

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

Backbone.js: what is it for? Data heavy pages Frontends to (JSON) web services CRUD-kind web apps @lmea #jsday http://jsday.it/2011

Backbone.js: Model-View-Controller model view controller @lmea #jsday http://jsday.it/2011

Elements of backbone Model Collection View Controller @lmea #jsday http://jsday.it/2011

Elements of backbone (2) Event Sync History @lmea #jsday http://jsday.it/2011

Model & Collection Representing the data Building the business logic Handling persistence @lmea #jsday http://jsday.it/2011

The simplest model var Talk = Backbone.Model.extend({}) @lmea #jsday http://jsday.it/2011

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

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

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

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

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

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

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

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

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

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

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

Views is a small chunk of the page has declarative event handling acts like a view controller @lmea #jsday http://jsday.it/2011

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

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

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

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

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

Controllers intra-page action routing evented control ﬂow stateful, bookmarkable sub-pages @lmea #jsday http://jsday.it/2011

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

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

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 control ﬂow @lmea #jsday http://jsday.it/2011

And, why should I use it? avoids spaghetti code cleanly separates concerns simple to integrate @lmea #jsday http://jsday.it/2011

thanks!http://spazidigitali.com@lmea @lmea #jsday http://jsday.it/2011

http://www.jsday.it	137
http://luca.im.dev	77
http://luca.im	10
http://twitter.com	8
https://twitter.com	5
http://a0.twimg.com	1
http://zootool.com	1
https://twimg0-a.akamaihd.net	1

A Little Backbone For Your App

by Luca Mearelli on May 10, 2011

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 240

Statistics

A Little Backbone For Your App Presentation Transcript