Intro tobackbone

Put some Backbone.js in
your apps

Wednesday, March 13, 13

Sid Maestre
Platform Evangelist
@SidneyAllen


Agenda
•What, why and who
•Models & Collections
•Views & Templates
•Routers
•Events
•Data Persistence with StackMob
•Bonus! Require.js

What


Why

•Single Page Apps
•Structure
•Reuse
•Separation of roles of concerns


Who


MV* Landscape


TodoMVC

http://addyosmani.github.com/todomvc/


My Wine App


MVC
Controller

Model View


adding backbone
src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
src="http://static.stackmob.com/js/json2-min.js"></script>
src="http://static.stackmob.com/js/underscore-1.4.1-min.js"></script>
src="http://static.stackmob.com/js/backbone-0.9.2-min.js"></script>


Model


deﬁne

Wine = Backbone.Model.extend();

firstWine = new Wine({
name: 'Clos Pegase'
});

DEMO TIME!


Collections


Deﬁne

Wines = Backbone.Collection.extend({
Model: Wine,
url: "#"
});


Initialize

Model: Wine,
url: "#"
});

wines = new Wines([
{name: "Robert Mondovi"},
{ name: "CakeBread"}
]);

console.log(wines.toJSON());


Loop

Model: Wine,
url: "#"
});

wines = new Wines([
{name: "Robert Mondovi"},
{ name: "CakeBread"}
]);

wines.each( function(model) {
console.log(model.get('name'));
});

DEMO TIME!

View


deﬁne

HomeView = Backbone.View.extend({

});

DEMO TIME!

render


render: function() {
this.$el.append("<h1>My App</h1>");

return this;
}

});


initialize

initialize: function() {
this.render();
},


return this;
}

});

DEMO TIME!

el

el: 'body',

this.render();
},


this.$el.empty();


return this;
}
});

DEMO TIME!

list view
ListView = Backbone.View.extend({

tagName: 'ul',


},


this.$el.empty();
this.$el.append("<li>Hello</li>");
this.$el.append("<li>Goodbye</li>");

return this;
}

});


append

el: 'body',

this.render();
},


this.$el.empty();

this.listView = new ListView();
this.$el.append(this.listView.render().el);

return this;
}

DEMO TIME!

Templates


render
<script type="text/template" id="item-container">
<li><%= value %></li>
</script>


tagName: 'ul',

this.template = _.template($('#item-container').html());
},

...
this.$el.append(this.template({value : "Hello Backbone"}));

return this;
}
});


looping

...

var el = this.$el,
template = this.template;

el.empty();

wines.each(function(wine){
el.append(template( wine.toJSON() ));
});

return this;
}

});

DEMO TIME!

Routes


start
$(document).ready(function () {
wineApp = new AppRouter();
Backbone.history.start();
});


routes
AppRouter = Backbone.Router.extend({

routes:{
"":"home",
"add":"add",
"close":"home",
},

home:function () {
console.log('home');
new HomeView();
},

add:function () {
console.log('add');
new AddView();
}

});


methods

routes:{
"":"home",
"add":"add",
"cancel":"home",
},

home:function () {
console.log('home');
new HomeView();
},

add:function () {
console.log('add');
new AddView();
}

});


fragments

DEMO TIME!

events
AddView = Backbone.View.extend({

className:"span8",
tagName: "div",

events: {
"click #addBtn": "add",
...
},

...

add: function(e) {
e.preventDefault();

console.log($('#name').val());

return this;
}

});


model / collection


Model: Wine,
url: "#"
});

wines = new Wines();


add to collection

add: function(e) {
e.preventDefault();

var newWine = new Wine({name:$('#name').val() });

wines.add(newWine);

$('#name').val('');

return this;
}


render listView

...


var el = this.$el

el.empty();
el.append(this.template());

var listView = new ListView({collection:wines});
$('.span4').append(listView.render().el);

return this;
}

});


ListView

...
this.collection.bind('all', this.render,this);
this.template = _.template($('#item-list').html());
},

render:function (eventName) {
var template = this.template,
el = this.$el,
collection = this.collection;

$(".span4 ul").empty();

collection.each(function(wine){
el.append(template(wine.toJSON()));
});

...
}
});


event binding

DEMO TIME!

free course

Text

bit.ly/freebackbonejs


Easy to use SDKs


010101
010101
010101
010101
010101
010101


StackMob is REST
// REST
http://api.stackmob.com/user
                       ../user/1234
                       ../chatmessage
                       ../yourcustommethod


Let’s create an app


StackMob JS

src="/libs/jquery/1.8.2/jquery.min.js"></script>
src="/js/stackmob-js-0.8.0-bundled-min.js"></script>


Add Init

StackMob.init({
appName: "a_wineapp",
clientSubdomain: "stackmob339",
publicKey: "d235e941-2139-40e6-9d2f-5b50b705198c",
apiVersion: 0
});


model / collection
var Wine = StackMob.Model.extend({
schemaName: "wines"
});

var Wines = StackMob.Collection.extend({
model: Wine
});

var wines = new Wines();
wines.fetch({async: true});


model.create
save: function(e) {
var collection = this.collection;
e.preventDefault();

var wine = new Wine({name:$('#name').val() });

wine.create({
success: function(model){
collection.add(model);
}
});

$('#name').val('');

return this;
}


load model
<script type="text/template" id="item-list">
<li><a href="#update/<%= wines_id %>"><%= name %></a></li>
</script>


routes:{
"":"home",
"add":"add",
"update/:id":"update"
},

update:function(e) {
model = wines.get(e);
new UpdateView({model: model});
}
});


UpdateView
var UpdateView = Backbone.View.extend({
...
this.template = _.template($('#item-edit').html());
this.model = this.options.model;
this.render();
},

$('.span8').remove();
$(this.el).html(this.template(this.model.toJSON()));
$('.row').append(this.el);
return this;
},

save: function(e) {
e.preventDefault();
this.model.save({name:$('#name').val()},{
success: function(model) {

}
});
return this;
}
});


HTML5 Hosting

•Github Integration
•We host your app
•API is Free
•StackMob Marketplace


Backbone & Angular

bit.ly/bbangular

https://github.com/ericterpstra/ngSignIt


Developing Backbone.js Applications


Sid Maestre

Contact
sid@stackmob.com
@SidneyAllen


Intro tobackbone

More Related Content

Similar to Intro tobackbone (20)

Intro tobackbone