Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
TAMING YOUR JAVASCRIPT
WITH BACKBONE.JS
Slide 3
Slide 3 text
ALLOW MYSELF TO
INTRODUCE, MYSELF
Slide 4
Slide 4 text
(SEMI-FAMOUS...)
@frockenstein
Slide 5
Slide 5 text
SO, I'M BACK IN PHP LAND
Slide 6
Slide 6 text
BUT FIRST, A BRIEF, SORDID HISTORY
OF WEB PROGRAMMING...
Slide 7
Slide 7 text
IN THE BEGINNING THERE
WAS THE SERVER
AND IT WAS SLOOOOOOW
(BUT EASY)
Slide 8
Slide 8 text
JAVASCRIPT STARTS
TIPTOEING IN...
function preloader() {
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
function preloader() {
heavyImage = new Image();
heavyImage.src = "heavyimagefile.jpg";
}
Slide 9
Slide 9 text
THEN COMES AJAX
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
EMBRACE OUR CLIENT-SIDE
OVERLORDS
But how to deal with mountains of JavaScript, browser
quirks, etc...
Slide 12
Slide 12 text
JQUERY
Helps smooth out the browser problems, makes Ajax
much easier, makes client-side apps a reality for mortals
(ie: not Google), but...
Slide 13
Slide 13 text
JUNK DRAWER JS CODE
Slide 14
Slide 14 text
COLLISIONS WITH JS BAD
PARTS
var that = this;
'1' == true; // depends on what "is" is...
return
a + b; // whoops semi-colon insertion means no a + b
Slide 15
Slide 15 text
FRAMEWORKS TO TAME
THE JS
Slide 16
Slide 16 text
ENTER BACKBONE
Slide 17
Slide 17 text
AN INTERLUDE ON
JAVASCRIPT EVOLUTION
// kindergarten JS
function kissButt(who) {
switch (who) {
case 'boss': puckerUp('big'); break;
case 'meter maid': puckerUp('just a little'); break;
default: takeAHike(); break;
}
}
Slide 18
Slide 18 text
GETTIN' JIGGY
// object literal pattern
var protocol = {
kissButt: function(who) {
...
}, // don't forget!!
takeAHike: function() {
...
}
}; // forget this and you're DOA
// module pattern
(function(root, $) {
var protocol = {
init: function() {
$('body').whatever();
},
kissButt: function(who) { ... },
takeAHike: function() { ... },
};
// explicitly attach to global namespace
root.protocol = protocol;
})(this, jQuery);
Slide 19
Slide 19 text
SO BACKBONE...
Pretty simple system: Views, Models, Events,
Collections
Sprinkle in as little or as much as you like
Some needed structure to mountains of JS
Very agnostic about DOM util libs, template libs, code
patterns
Backbone != jQuery
Examples of using it
big players
Slide 20
Slide 20 text
BACKBONE MODELS
var Book = Backbone.Model.extend({
defaults: {
'inStock': true
},
initialize: function() {
// runs when model constructed
},
validate: function(attrs) {
if (attrs.inStock === false)
return 'No can do buddy-ro!'
if (attrs.price <= 0)
return "We're not running a charity here."
}
});
var fiftyShadesOfJavascript = new Book({
price: 14.99,
title: '50 Shades of Javascript'
});
fiftyShadesOfJavascript.set('price', -5); // validation error
Slide 21
Slide 21 text
BACKBONE VIEWS
var BookView = Backbone.View.extend({
tagName: 'div',
className: 'book',
events: {
'click .buyme': 'buyMe'
},
render: function() {
var template = '
{{title}}
\ Price: ${{price}}\ Buy Me!'; var html = Mustache.render(template, this.model.attributes); this.$el.append(html); return this; }, buyMe: function(e) { ... } }); var bookview = new BookView({ model: fiftyShadesOfJavascript }); $('.content').append(bookview.render().$el);Slide 22
Slide 22 text
BACKBONE VIEWS & EVENTS
var BookView = Backbone.View.extend({
initialize: function() {
// when title, changes, update DOM
this.model.on('change:title', function(model) {
this.$('.title').text(model.get('title'));
});
}
});
Slide 23
Slide 23 text
VIEWS IN ACTION
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
BACKBONE COLLECTIONS AND
EVENTS
var BookCollection = Backbone.Collection.extend({
model: Book
});
var library = new BookCollection();
library.on('add', function(book) {
var bookview = new BookView({ model: book });
$('.content').append(bookview.render().$el);
});
library.add(fiftyShadesOfJavascript);
Slide 26
Slide 26 text
BACKBONE & APIS
var Book = Backbone.Model.extend({
...
url: function() {
if (this.id) return '/books/' + this.id; // HTTP PUT
return '/books/'; // HTTP POST
}
});
var fifty = new Book({
price: 14.99,
title: '50 Shades of Javascript'
});
fifty.set('title', '50 Shades: Improved With 1 More Shade!');
fifty.save(); // triggers ajax POST to model.url()
Slide 27
Slide 27 text
BACKBONE & APIS
var BookCollection = Backbone.Collection.extend({
model: Book,
url: '/books/'
});
var library = new BookCollection();
library.fetch(); // HTTP GET all books
Slide 28
Slide 28 text
SUMMARY
JS & client-side dev is here to stay
Dev and maintenance of that JS is here to stay
LET BACKBONE GIVE YOUR JS SOME
MUCH-NEEDED STRUCTURE
Slide 29
Slide 29 text
No content