A Little Backbone For Your App

A Little

For Your App
Luca Mearelli

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


A quick poll

Using DOM libraries?
Using (end-to-end) frameworks?
Know or used backbone.js?


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


Backbone.js: what is it for?

Data heavy pages
Frontends to (JSON) web services
CRUD-kind web apps


Backbone.js: Model-View-Controller

model

view controller


Elements of backbone

Model
Collection
View
Controller


Elements of backbone (2)

Event
Sync
History


Model & Collection

Representing the data
Building the business logic
Handling persistence


The simplest model

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


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});
}
},
})


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


Custom functions


full_info: function(){
return this.get("title")+" by:"+this.get("speaker");
},

rate: function(stars){
if(_.isUndefined(this.get("rating"))){
this.save({rating: stars});
}
},

})


Validating models


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});


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';


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;


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


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" }
]);


Fetching a collection from the server

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)


Custom sorted collections

track_talks.comparator = function(talk) {
return talk.get("time");
}

track_talks.add(new Talk({time: 17,
title: "A Little Backbone"}));

title: "Faster Web Sites 2.0"}));

title: "JavaScript Survival Guide"}));

alert(track_talks.pluck('title'));

track_talks.sort();


Underscore.js goodies


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
});


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.
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
});


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) { },

});


Sub-view element selection

view.$(selector) // equivalent to $(selector, view.el)
this.$(".title").text()
this.$("li input[@name=email]")
this.$("div #start")


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 })


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;
},


Controllers

intra-page action routing
evented control ﬂow
stateful, bookmarkable sub-pages


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();


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){ ... });


Backbone.js: demo

A mobile note taking app
http://luca.github.com/jsday-demo/


In the end, what does it do?

JS data models
Event based
RESTful (JSON)
Intra page control ﬂow


And, why should I use it?

avoids spaghetti code
cleanly separates concerns
simple to integrate


thanks!

http://spazidigitali.com
@lmea

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


A Little Backbone For Your App

More Related Content

What's hot (20)

Similar to A Little Backbone For Your App (20)

More from Luca Mearelli (9)

Recently uploaded (20)

A Little Backbone For Your App