A Little

For Your AppLuca Mearelli

@lmea #jsday http://joind.in/3360

var Luca = (function(){ var me = {}; me.is = 'craftsman'; me.twitter = '@lmea'; me.did = ['http://miojob.repubblica.it', 'http://kiaraservice.com', '...']; me.uses = function(tool){ _.indexOf(['ruby', 'rails', 'javascript'], tool)>=0; } me.used = function(tool){ _.indexOf(['c++', 'python', 'java'], tool)>=0; } return me;})()

@lmea #jsday http://joind.in/3360

http://github.com/documentcloud/backbone/

@lmea #jsday http://joind.in/3360

A quick poll

Using DOM libraries?

Using (end-to-end) frameworks?

Know or used backbone.js?

@lmea #jsday http://joind.in/3360

Backbone.js: what is it?

A lightweight collection of tools

giving enough structure to help

building apps in the browser

without getting in the way

@lmea #jsday http://joind.in/3360

Backbone.js: what is it for?

Data heavy pages

Frontends to (JSON) web services

CRUD-kind web apps

@lmea #jsday http://joind.in/3360

Backbone.js: Model-View-Controller

controller

model

view

@lmea #jsday http://joind.in/3360

Elements of backbone

ModelCollectionViewController

@lmea #jsday http://joind.in/3360

Elements of backbone (2)

EventSyncHistory

@lmea #jsday http://joind.in/3360

Model & Collection

Representing the data

Building the business logic

Handling persistence

@lmea #jsday http://joind.in/3360

The simplest model

var Talk = Backbone.Model.extend({})

@lmea #jsday http://joind.in/3360

Initializing & setting defaults

var Talk = Backbone.Model.extend({

// Default attributes for Talk defaults: { title: "a talk", speaker: "me", lenght: 60 },

intialize: function(){ if (this.length>10) { this.set({"lightining": false}); } },})

@lmea #jsday http://joind.in/3360

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.idmy_talk.cid

@lmea #jsday http://joind.in/3360

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://joind.in/3360

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://joind.in/3360

Saving models

// delegates to Backbone.syncmy_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://joind.in/3360

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 + parameterBackbone.emulateHTTP = true;

@lmea #jsday http://joind.in/3360

Models collection

var Track = Backbone.Collection.extend({ model: Talk});

var track_talks = new Track([talk1, talk2, talk3]);track_talks.get(talk2.id); // gets talk2track_talks.at(0); // gets talk1track_talks.lenght; // is 3

@lmea #jsday http://joind.in/3360

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://joind.in/3360

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://joind.in/3360

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://joind.in/3360

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://joind.in/3360

Views

is a small chunk of the page

has declarative event handling

acts like a view controller

@lmea #jsday http://joind.in/3360

A basic view

// The DOM element for a talkvar 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://joind.in/3360

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://joind.in/3360

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://joind.in/3360

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://joind.in/3360

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://joind.in/3360

Controllers

intra-page action routing

evented control flow

stateful, bookmarkable sub-pages

@lmea #jsday http://joind.in/3360

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://joind.in/3360

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://joind.in/3360

Backbone.js: demo

A mobile note taking app

http://luca.github.com/jsday-demo/

@lmea #jsday http://joind.in/3360

In the end, what does it do?

JS data models

Event based

RESTful (JSON)

Intra page control flow

@lmea #jsday http://joind.in/3360

And, why should I use it?

avoids spaghetti code

cleanly separates concerns

simple to integrate

@lmea #jsday http://joind.in/3360

thanks!

http://spazidigitali.com

@lmea

http://www.slideshare.net/lucamea/a-little-backbone-for-your-app