JAVASCRIPT BEST
PRACTICES & BACKBONE.JS
FOR THE PHP DEVELOPER
Ryan Weaver
@weaverryan
Thursday, May 24, 12

7 tips for writing JavaScript
like a jerk
+
What to take and leave in
Backbone.js
Thursday, May 24, 12

Who is this dude?
• Co-author of the Symfony2 Docs
• KnpLabs US - Symfony
consulting, training, Kumbaya
• Writer for KnpUniversity.com
screencasts
• Fiancee of the much more
talented @leannapelham
-----> June 9th, 2012!
http://www.knplabs.com/en
@weaverryan http://www.github.com/weaverryan
Thursday, May 24, 12

Chapter 1: Java$criptQuery
Look mom, I’m a JavaScript professional
@weaverryan
Thursday, May 24, 12

1. jQuery(document).ready(...)
2. 1500 lines, with deeply
nested anonymous functions
3. Profit! $$$
@weaverryan
Thursday, May 24, 12

Too soon?
... sry fb, luv u kthxbye
@weaverryan
Thursday, May 24, 12

The brains behind this
presentation...
Thursday, May 24, 12

source:
http://www.geeky-gadgets.com/super-mario-bros-matryoshka-dolls/
Thursday, May 24, 12

Thursday, May 24, 12

<div class="mario box">
.mario
<div class="luigi box">
.luigi
<div class="kick-butt">...</div>
<a href="#" class="peach box">
.peach
</a>
</div>
</div>
Thursday, May 24, 12

Let’s kick some arse!
jQuery(document).ready(function() {
var $luigi = $('.event-details .luigi');
$luigi.click(function() {
$(this).addClass('active');
return false;
});
});
Thursday, May 24, 12

DEMO!!!!!
http://bit.ly/php-js-demo
0 - The starting point
Thursday, May 24, 12

Princess Pro-tip
Instead of listening
to this guy drone on,
just find, fork and
play with the code
yourself!
http://bit.ly/php-js-play
Thursday, May 24, 12

‣ Click either .luigi or .peach
‣ the .luigi wrapper gets the active class
Thursday, May 24, 12

Mario’s bad JavaScript tip #1:
Ignore the jQuery “event” object,
it’s probably stupid...
http://bit.ly/php-js-demo
01 - The jQuery Event
@weaverryan
Thursday, May 24, 12

Events happen
Thursday, May 24, 12

Event
Click! 1) You click!
2) An event travels up the tree
Thursday, May 24, 12

Browser event
versus
jQuery event
‣ The browser event contains all the
information about what happened
‣the jQuery event cleans up cross-
browser compatibility ugliness
Thursday, May 24, 12

$luigi.click(function(event) {
// ...
});
‣ event.target: The actual element that
received the click
‣ event.currentTarget: The element that
this listener was attached to
Thursday, May 24, 12

$luigi.click(function(event) {
// ...
});
Our listener is registered
on .luigi
Thursday, May 24, 12

If you click .peach:
event.target: .peach
event.currentTarget: .luigi
Thursday, May 24, 12

If you click .luigi:
event.target: .luigi
event.currentTarget: .luigi
Thursday, May 24, 12

event.currentTarget
==
this
* unless you screw with scope, which we’ll see!
Thursday, May 24, 12

$luigi.click(function(event) {
// these are the same!
$(event.currentTarget)
.addClass('active');
$luigi.addClass('active');
});
Thursday, May 24, 12

Preventing the damn
“#” on the URL
$luigi.click(function() {
$(this).addClass('active');
return false;
});
Thursday, May 24, 12

Princess Pro-tip
return false stops
propagation, and is a
great way to screw
with your teammate’s
events
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
Thursday, May 24, 12

... but if you like your
coworkers...
$luigi.click(function(event) {
event.preventDefault();
// ...
});
The event keeps traveling up
the DOM
Thursday, May 24, 12

Bad JavaScript moral #1:
jQuery’s event object is a
dangerous source of useful
information and control
@weaverryan
Thursday, May 24, 12

Mario bad JavaScript tip #2:
Avoid using objects: they
threaten to organize your code...
and are creepy...
http://bit.ly/php-js-demo
02 - Basic jQuery Objects
@weaverryan
Thursday, May 24, 12

A PHP object
@weaverryan
Thursday, May 24, 12

<?php
class MagicBoxes
{
public function initializeClick($wrapper)
{
// ...
}
}
$magicBoxes = new MagicBoxes();
$magicBoxes->initializeClick('something');
Thursday, May 24, 12

A JavaScript object
@weaverryan
Thursday, May 24, 12

var MagicBoxes = {
someProperty: 0,
initializeClick: function($container) {
// ...
}
};
MagicBoxes.initializeClick(something);
Thursday, May 24, 12

Just like with PHP, you can
choose to organize your code
into objects and functions
@weaverryan
Thursday, May 24, 12

var MagicBoxes = {
initializeClick: function($container) {
$container.find('.luigi')
.click(this._handleLuigiClick);
},
_handleLuigiClick: function(event) {
event.preventDefault();
$luigi.addClass('active');
}
};
jQuery(document).ready(function() {
var $wrap = $('.mario-world');
MagicBoxes.initializeClick($wrap);
});
Thursday, May 24, 12

Princess Pro-tip
Be careful with
objects, they can
increase readability,
which threatens job
security
Thursday, May 24, 12

Objects: Advantages
‣ All of the logic of this “mini-app” is
wrapped up inside a named object
‣ The jQuery document.ready is skinny:
contains simple, descriptive calls to the
object
‣ The object methods are reusable
Thursday, May 24, 12

Object Scope
// hola! I’m just a local variable
var MagicBoxes = {
// ...
};
// I’m a global variable, available anywhere
window.MagicBoxes = {
};
Thursday, May 24, 12

the “window”
window.foo = 'foo-window';
console.log(foo);
// prints "foo-window"
bar = 'bar-global';
console.log(window.bar);
// prints "bar-global"
Thursday, May 24, 12

Bad JavaScript moral #2:
Using global objects risks
organizing your code into
separate, distinct units
@weaverryan
Thursday, May 24, 12

Mario’s bad JavaScript tip #3:
JavaScript’s “prototype” object
model is too scary to use
http://bit.ly/php-js-demo
03 - Intro to the JS Prototype
@weaverryan
Thursday, May 24, 12

Everything is an object
Thursday, May 24, 12

An object with a property
var object1 = {
fooProperty: 'foo!'
}
console.log(object1.fooProperty);
// prints “foo!”
Thursday, May 24, 12

Also an object with a property
var alsoAnObject = function() {
return 'foo-return!'
};
alsoAnObject.barProperty = 'bar!';
console.log(alsoAnObject.barProperty);
// prints “bar!”
console.log(alsoAnObject());
// prints “foo-return!”
Thursday, May 24, 12

In PHP, we can create a class
and then instantiate many
instances
@weaverryan
Thursday, May 24, 12

<?php
class MagicBoxes
{
public function __construct($option)
{
// ...
}
}
$magicBoxes1 = new MagicBoxes('foo');
$magicBoxes2 = new MagicBoxes('bar');
Thursday, May 24, 12

How can we do this in
JavaScript?
@weaverryan
Thursday, May 24, 12

Imagine if we could do this
craziness in PHP
@weaverryan
Thursday, May 24, 12

ImaginationLand PHP code
$magicBox = function($var) {
$this->var = $var;
$this->initialize();
};
$magicBox->prototype->initialize = function() {
var_dump($this->var);
};
$magicBoxObj = new $magicBox('something');
// causes "something" to be printed
Thursday, May 24, 12

Yep, that’s how it works in
JavaScript!
@weaverryan
Thursday, May 24, 12

#1: Create a function
window.MagicBoxes = function($container) {
this.$el = $container;
this.initialize();
};
Thursday, May 24, 12

#2: Add things to your future
object
MagicBoxes.prototype.initialize = function()
{
var $luigi = this.$el.find('.luigi');
$luigi.click(function(event) {
event.preventDefault();
$(this).toggleClass('active');
});
};
Thursday, May 24, 12

#2: Add things to your future
object
MagicBoxes.prototype.initialize = function()
The “prototype” is a magic place where
you stick “future” things that will become a
part of the eventual new object
Thursday, May 24, 12

#3: Instantiate your new object
jQuery(document).ready(function() {
var $mario = $('.mario-world');
var magicBoxApp = new MagicBoxes($mario);
});
Thursday, May 24, 12

#4: Beers!
@weaverryan
Thursday, May 24, 12

Princess Pro-tip
Your speaker is a
liar and a thief.
Using the prototype
is for sissies!
Thursday, May 24, 12

Bowser rebuttal
Don’t listen to her!
A gentleman and scholar named
Garrison Locke is going to
teach us the prototypical
object model of JavaScript
tomorrow at 11:30 AM
Thursday, May 24, 12

Peach come-back
No you didn’t! Mario and I
both agree that using objects
in JavaScript is all weird!
Viva the 1500 line jQuery
document.ready!
Thursday, May 24, 12

Bowser final word
Seriously, this is why I
fight against you guys
Thursday, May 24, 12

Bowser final word
Your ignorance may seem
blissful, but you work as a
detriment towards the
larger cause of evolving
and learning as
a community
Thursday, May 24, 12

Bowser final word
Thank God Garrison Locke
will be teaching us Object-
oriented JavaScript
tomorrow at 11:30 AM.
Thursday, May 24, 12

Bowser final word
He’s a much better speaker
than this guy
Thursday, May 24, 12

Ryan does damage control
on his presentation
Dude, I’m right here
Thursday, May 24, 12

Purple is a manly color
You really like that
shirt...
Thursday, May 24, 12

Bad JavaScript moral #3:
Don’t use jQuery’s prototype or
go to Garrison Locke’s
presentation tomorrow if you
want unreadable JavaScript
@weaverryan
Thursday, May 24, 12

Mario’s bad JavaScript tip #4:
“this” probably always means
“this”... don’t ask questions
http://bit.ly/php-js-demo
04 - Scoping Concerns
@weaverryan
Thursday, May 24, 12

ImaginationLand PHP code
$magicBox = new MagicBoxes('foo');
$foo = new Foo();
// imaginary PHP function
// this calls $magicBox->doSomething()
// BUT, forces $this to actual be $foo inside
// that object. Madness!
call_func($magicBox, 'doSomething', $foo);
Thursday, May 24, 12

With JavaScript objects, “this”
may not always be what you
think it is
@weaverryan
Thursday, May 24, 12

window.Boxes = function($container) {
this.$el = $container;
var $luigi = this.$el.find('.luigi');
$luigi.on('click', this._luigiClick);
};
Boxes.prototype._luigiClick = function(event) {
event.preventDefault();
this.luigiFights($(this));
};
Boxes.prototype.luigiFights = function($luigi) {
$luigi.toggleClass('active');
};
Thursday, May 24, 12

Is it our Boxes object?
Boxes.prototype._luigiClick = function(event) {
event.preventDefault();
this.luigiFights($(this));
};
Or is it the DOM element that
triggered the jQuery event?
Thursday, May 24, 12

“this” is actually the DOM element
that triggered the jQuery event
Boxes.prototype._luigiClick = function(event) {
event.preventDefault();
this.luigiFights($(this));
};
so “this” will not work pun intended...
Thursday, May 24, 12

window.Boxes = function($container) {
this.$el = $container;
var $luigi = this.$el.find('.luigi');
$luigi.on(
'click',
$.proxy(this._luigiClick, this)
);
};
Boxes.prototype._luigiClick = function(event) {
event.preventDefault();
this.makeLuigiFight($(event.currentTarget));
};
Thursday, May 24, 12

window.Boxes = function($container) {
this.$el = $container;
var $luigi = this.$el.find('.luigi');
$luigi.on(
'click',
$.proxy(this._luigiClick, this)
);
};
$.proxy forces _luigiClick
to have “this” as this
object when called
Thursday, May 24, 12

event.currentTarget returns
the element that was
registered on this event
(formerly “this”)
Boxes.prototype._luigiClick = function(event) {
event.preventDefault();
this.makeLuigiFight($(event.currentTarget));
};
Thursday, May 24, 12

Mario’s bad JavaScript tip #5:
Avoid jQuery.extend so that you
can repeat yourself as much as
possible: DRY*
* definitely repeat yourself
http://bit.ly/php-js-demo
@weaverryan 05 - jQuery extends
Thursday, May 24, 12

PHP ImaginationLand
// foo has printFoo() method on it
$foo = new Foo();
// bar has a printBar() method on it
$bar = new Bar();
// now $fooBar has both methods!
$fooBar = extend($foo, $bar);
$fooBar->printFoo();
$fooBar->printBar();
Thursday, May 24, 12

var foo = {
foo: function() {
return 'foo-string';
}
};
var bar = {
bar: function() {
return 'bar-string';
}
};
var fooBar = $.extend(foo, bar);
console.log(fooBar.foo(), fooBar.bar());
Thursday, May 24, 12

Writing bad JavaScript tip #6:
Avoid using “delegate” events,
and instead constantly worry
about re-attaching events to new
elements
http://bit.ly/php-js-demo
06 - Delegate events
@weaverryan
Thursday, May 24, 12

Can you see the difference?
this.$el.find('.luigi').on(
'click',
$.proxy(this._luigiClick, this)
);
this.$el.on(
'click',
'.luigi',
$.proxy(this._luigiClick, this)
);
Thursday, May 24, 12

this.$el.find('.luigi')on(
'click',
$.proxy(this._luigiClick, this)
);
Since the event is
registered specifically on
“.luigi”, if any new
“.luigi” elements are
added, they will not
response to this event
Thursday, May 24, 12

The event is registered on
the wrapper, but looks for
“.luigi”. If new “.luigi”
elements are added to the
wrapper, they will
automatically trigger the
event
this.$el.on(
'click',
'.luigi',
$.proxy(this._luigiClick, this)
);
Thursday, May 24, 12

jQuery.live?
$('.foo').live('click', ...);
really just means this
$('body').on('click', '.foo', ...);
Thursday, May 24, 12

Mario’s bad JavaScript tip #7:
Self-executing JavaScript blocks
are just plain scary looking
http://bit.ly/php-js-demo
07 - Self-executing blocks
@weaverryan
Thursday, May 24, 12

PHP Imaginationland
$dbConn = ''; // initialize this
$ourPreparedObject = (function($db) {
$a = 5;
$b = 10;
$db->execute('...');
// ... a lot more complex stuff
return $someObject;
})($dbConn);
$ourPreparedObject->callSomething();
Thursday, May 24, 12

JavaScript Real Life
window.MagicBoxes = (function($) {
return {
// do a bunch of craziness
};
})(jQuery);
MagicBoxes.someMethod();
Thursday, May 24, 12

This is just a function...
window.MagicBoxes = (function($) {
return {
// do a bunch of craziness
};
})(jQuery);
MagicBoxes.someMethod();
Thursday, May 24, 12

Then we execute it, and pass in an argument
window.MagicBoxes = (function($) {
return {
// do a bunch of craziness
};
})(jQuery);
MagicBoxes.someMethod();
Thursday, May 24, 12

The function does any craziness it
wants, but returns something
window.MagicBoxes = (function($) {
return {
// do a bunch of craziness
};
})(jQuery);
MagicBoxes.someMethod();
Thursday, May 24, 12

which we assign to a variable and then use
window.MagicBoxes = (function($) {
return {
// do a bunch of craziness
};
})(jQuery);
MagicBoxes.someMethod();
Thursday, May 24, 12

And that’s it!
‣ Makes isolated chunks of code
‣ Used by most JavaScript libraries to
isolate their code from yours
Thursday, May 24, 12

Backbone.js!
@weaverryan
Thursday, May 24, 12

Mario’s bad JavaScript tip #8:
Don’t use, or over-use
Backbone.js
http://bit.ly/php-js-demo
08 - A Backbone View
@weaverryan
Thursday, May 24, 12

What is Backbone?
‣ Set of tools for creating heavy front-
end applications:
* views
* models
* router
@weaverryan
Thursday, May 24, 12

Views
A formalized method for creating a
JavaScript object that “manages” a
DOM element
Thursday, May 24, 12

Views
We’ve been building an object that’s
very similar to a Backbone view
Thursday, May 24, 12

var MagicBoxes = Backbone.View.extend({
events: {
'click .luigi': '_luigiClick'
},
initialize: function() {
_.bindAll(this, '_luigiClick')
},
_luigiClick: function(event) {
event.preventDefault();
$(event.currentTarget)
.toggleClass('active');
}
});
var magicBoxApp = new MagicBoxes({
el: $('.mario-world')
});
Thursday, May 24, 12

var MagicBoxes = Backbone.View.extend({
events: {
'click .luigi': '_luigiClick'
},
initialize: function() {
_.bindAll(this, '_luigiClick')
}, That sure is a simple way to
bind to events. And thanks to
_luigiClick: function(event) {
“delegate” events, when the
event.preventDefault();
DOM updates, the events still
$(event.currentTarget)
fire on new elements!
.toggleClass('active');
}
});
var magicBoxApp = new MagicBoxes({
el: $('.mario-world')
});
Thursday, May 24, 12

var MagicBoxes = Backbone.View.extend({
events: {
'click .luigi': '_luigiClick'
},
initialize: function() {
_.bindAll(this, '_luigiClick')
},
_luigiClick: function(event) {
event.preventDefault();
$(event.currentTarget) automatically
initialize() is
.toggleClass('active');
called by Backbone.
}
});
var magicBoxApp = new MagicBoxes({
el: $('.mario-world')
});
Thursday, May 24, 12

var MagicBoxes = Backbone.View.extend({
events: {
'click .luigi': '_luigiClick'
},
initialize: function() {
_.bindAll(this, '_luigiClick')
},
_luigiClick: function(event) {
_.bindAll is from
event.preventDefault();
underscore.js - it does the
$(event.currentTarget)
same job as jQuery.proxy:
.toggleClass('active');
} guarantees that “this” is
}); this object in that function
var magicBoxApp = new MagicBoxes({
el: $('.mario-world')
});
Thursday, May 24, 12

var MagicBoxes = Backbone.View.extend({
events: {
'click .luigi': '_luigiClick'
},
initialize: function() {
_.bindAll(this, '_luigiClick') DOM
We attach a real
}, element to the view by
passing it into a pre-made
_luigiClick: function(event) {
constructor as “el”. In the
event.preventDefault();
object, it’s available via
$(event.currentTarget)
this.el
.toggleClass('active');
}
});
var magicBoxApp = new MagicBoxes({
el: $('.mario-world')
});
Thursday, May 24, 12

Models
A formalized object that just holds
key-value data on it
Thursday, May 24, 12

var Character = Backbone.Model.extend();
var mario = new Character({
'name': 'Mario'
});
var peach = new Character({
'name': 'Peach',
'status': 'captured'
});
// change some data
peach.set({
'status': 'rescued'
});
Thursday, May 24, 12

Events make them wonderful
peach.on('change', function(changedModel) {
var name = changedModel.get('name');
console.log(name + ' was updated!');
});
// will cause "Peach was updated" to log
peach.set({
'status': 'rescued'
});
Thursday, May 24, 12

var Character = Backbone.Model.extend();
var App = Backbone.View.extend({
initialize: function() {
_.bindAll(this, '_updateName');
this.model.on('change', this._updateName);
this._updateName();
},
_updateName: function() {
var name = this.model.get('name');
this.$('.name').html(name);
}
});
var mario = new Character({
'name': 'Mario'
});
var app = new App({
el: $('.mario-world'),
model: mario
});
Thursday, May 24, 12

var Character = Backbone.Model.extend();
var App = Backbone.View.extend({
initialize: function() {
_.bindAll(this, '_updateName');
this.model.on('change', this._updateName);
this._updateName();
},
_updateName: function() {
var name = this.model.get('name');
this.$('.name').html(name);
}
});
When the model changes, we
can update the DOM anywhere
that we’re listening for
that change
Thursday, May 24, 12

Backbone is a great solution
Thursday, May 24, 12

But do you have a problem?
Thursday, May 24, 12

Views: Easy win
‣ Easy event binding
‣ An object-oriented structure that’s
setup for you already
‣ “Patterns” to follow as you get
comfortable
@weaverryan
Thursday, May 24, 12

Views: Who Renders?
‣ There are 2 types of Views:
Easy 1) Views applied to existing elements
Win
in the DOM (like our example)
2) Views that are given an empty
Depends
element, and then render using client-
side templates and model data
@weaverryan
Thursday, May 24, 12

When to use Models + Views
‣ A highly interactive app that
communicates to a PHP API that is
never responsible for rendering any
HTML
@weaverryan
Thursday, May 24, 12

When *not* to use Models + Views
‣ An app where PHP renders HTML
‣ An app where the API isn’t robust
@weaverryan
Thursday, May 24, 12

Duplication
‣ If your PHP application renders
HTML and you also try to use
Backbone Views that render HTML,
you’ll need duplicate templates
‣ Do one or the other
@weaverryan
Thursday, May 24, 12

Duplication
You can potentially duplicate a lot of
work both on the client and server
sides:
‣ validation
‣ models
‣ templates
@weaverryan
Thursday, May 24, 12

Find your Comfort Zone
‣ Not really comfortable with a fully-
client side application? Use
Backbone views attached to existing
DOM element
‣ Feel pretty awesome about doing
everything in the browser? Dive in :)
@weaverryan
Thursday, May 24, 12

Thanks...
Ryan Weaver
@weaverryan
Thursday, May 24, 12

... and we love you!
http://joind.in/talk/view/6508
Ryan Weaver
@weaverryan
Ryan Weaver
@weaverryan
Thursday, May 24, 12