JavaScript Best Practices, Backbone.js, and Mario for the PHP Develop

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


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

Chapter 1: Java$criptQuery
Look mom, I’m a JavaScript professional

@weaverryan

1. jQuery(document).ready(...)
2. 1500 lines, with deeply
nested anonymous functions
3. Profit! $$$

@weaverryan

Too soon?
... sry fb, luv u kthxbye
@weaverryan

The brains behind this
presentation...


source:
http://www.geeky-gadgets.com/super-mario-bros-matryoshka-dolls/


<div class="mario box">
.mario
<div class="luigi box">
.luigi
<div class="kick-butt">...</div>
<a href="#" class="peach box">
.peach
</a>
</div>
</div>


Let’s kick some arse!
jQuery(document).ready(function() {
var $luigi = $('.event-details .luigi');

$luigi.click(function() {
$(this).addClass('active');

return false;
});
});


DEMO!!!!!

http://bit.ly/php-js-demo

0 - The starting point


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

‣ Click either .luigi or .peach
‣ the .luigi wrapper gets the active class


Mario’s bad JavaScript tip #1:

Ignore the jQuery “event” object,
it’s probably stupid...

01 - The jQuery Event
@weaverryan

Events happen


Event

Click! 1) You click!
2) An event travels up the tree


Browser event
versus
jQuery event
‣ The browser event contains all the
information about what happened

‣the jQuery event cleans up cross-
browser compatibility ugliness


$luigi.click(function(event) {
// ...
});

‣ event.target: The actual element that
received the click

‣ event.currentTarget: The element that
this listener was attached to


// ...
});

Our listener is registered
on .luigi


If you click .peach:
event.target: .peach
event.currentTarget: .luigi


If you click .luigi:
event.target: .luigi
event.currentTarget: .luigi


event.currentTarget

==

this

* unless you screw with scope, which we’ll see!


// these are the same!
$(event.currentTarget)
.addClass('active');
$luigi.addClass('active');
});


Preventing the damn
“#” on the URL

$luigi.click(function() {
$(this).addClass('active');

return false;
});


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/

... but if you like your
coworkers...
event.preventDefault();

// ...
});

The event keeps traveling up
the DOM

Bad JavaScript moral #1:

jQuery’s event object is a
dangerous source of useful
information and control

@weaverryan

Mario bad JavaScript tip #2:

Avoid using objects: they
threaten to organize your code...
and are creepy...

02 - Basic jQuery Objects
@weaverryan

A PHP object

@weaverryan

<?php

class MagicBoxes
{
public function initializeClick($wrapper)
{
// ...
}
}

$magicBoxes = new MagicBoxes();
$magicBoxes->initializeClick('something');


A JavaScript object

@weaverryan

var MagicBoxes = {
someProperty: 0,

initializeClick: function($container) {
// ...
}
};

MagicBoxes.initializeClick(something);


Just like with PHP, you can
choose to organize your code
into objects and functions

@weaverryan

Princess Pro-tip

Be careful with
objects, they can
increase readability,
which threatens job
security


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


Object Scope
// hola! I’m just a local variable
var MagicBoxes = {
// ...
};

// I’m a global variable, available anywhere
window.MagicBoxes = {

};


the “window”
window.foo = 'foo-window';
console.log(foo);
// prints "foo-window"

bar = 'bar-global';
console.log(window.bar);
// prints "bar-global"



Using global objects risks
organizing your code into
separate, distinct units

@weaverryan


JavaScript’s “prototype” object
model is too scary to use

03 - Intro to the JS Prototype
@weaverryan

Everything is an object


An object with a property
var object1 = {
fooProperty: 'foo!'
}

console.log(object1.fooProperty);
// prints “foo!”


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!”


In PHP, we can create a class
and then instantiate many
instances

@weaverryan

<?php

class MagicBoxes
{
public function __construct($option)
{
// ...
}
}

$magicBoxes1 = new MagicBoxes('foo');

$magicBoxes2 = new MagicBoxes('bar');

How can we do this in
JavaScript?

@weaverryan

Imagine if we could do this
craziness in PHP

@weaverryan

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


Yep, that’s how it works in
JavaScript!

@weaverryan

#1: Create a function

window.MagicBoxes = function($container) {
this.$el = $container;
this.initialize();
};


#2: Add things to your future
object
MagicBoxes.prototype.initialize = function()
{
var $luigi = this.$el.find('.luigi');

$(this).toggleClass('active');
});
};


#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


#3: Instantiate your new object

var $mario = $('.mario-world');
var magicBoxApp = new MagicBoxes($mario);
});


#4: Beers!

@weaverryan

Princess Pro-tip

Your speaker is a
liar and a thief.
Using the prototype
is for sissies!


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


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!


Bowser ﬁnal word

Seriously, this is why I
fight against you guys


Bowser ﬁnal word

Your ignorance may seem
blissful, but you work as a
detriment towards the
larger cause of evolving
and learning as
a community


Bowser ﬁnal word

Thank God Garrison Locke
will be teaching us Object-
oriented JavaScript
tomorrow at 11:30 AM.


Bowser ﬁnal word

He’s a much better speaker
than this guy


Ryan does damage control
on his presentation

Dude, I’m right here


Purple is a manly color

You really like that
shirt...



Don’t use jQuery’s prototype or
go to Garrison Locke’s
presentation tomorrow if you
want unreadable JavaScript

@weaverryan


“this” probably always means
“this”... don’t ask questions

04 - Scoping Concerns
@weaverryan

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


With JavaScript objects, “this”
may not always be what you
think it is

@weaverryan

Is it our Boxes object?

};

Or is it the DOM element that
triggered the jQuery event?

“this” is actually the DOM element
that triggered the jQuery event

};

so “this” will not work pun intended...



$luigi.on(
'click',
$.proxy(this._luigiClick, this)
);
};

this.makeLuigiFight($(event.currentTarget));
};



$luigi.on(
'click',
);
};
$.proxy forces _luigiClick
to have “this” as this
object when called


event.currentTarget returns
the element that was
registered on this event
(formerly “this”)

this.makeLuigiFight($(event.currentTarget));
};



Avoid jQuery.extend so that you
can repeat yourself as much as
possible: DRY*

* definitely repeat yourself
@weaverryan 05 - jQuery extends

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


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

Writing bad JavaScript tip #6:

Avoid using “delegate” events,
and instead constantly worry
about re-attaching events to new
elements
06 - Delegate events
@weaverryan

Can you see the difference?

this.$el.find('.luigi').on(
'click',
);

this.$el.on(
'click',
'.luigi',
);

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


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

jQuery.live?

$('.foo').live('click', ...);

really just means this

$('body').on('click', '.foo', ...);



Self-executing JavaScript blocks
are just plain scary looking

07 - Self-executing blocks
@weaverryan

PHP Imaginationland
$dbConn = ''; // initialize this

$ourPreparedObject = (function($db) {
$a = 5;
$b = 10;
$db->execute('...');

// ... a lot more complex stuff

return $someObject;
})($dbConn);

$ourPreparedObject->callSomething();

JavaScript Real Life

window.MagicBoxes = (function($) {

return {
// do a bunch of craziness
};
})(jQuery);

MagicBoxes.someMethod();


This is just a function...


return {
};
})(jQuery);



Then we execute it, and pass in an argument


return {
};
})(jQuery);



The function does any craziness it
wants, but returns something

return {
};
})(jQuery);



which we assign to a variable and then use


return {
};
})(jQuery);



And that’s it!

‣ Makes isolated chunks of code

‣ Used by most JavaScript libraries to
isolate their code from yours


Backbone.js!

@weaverryan


Don’t use, or over-use
Backbone.js

08 - A Backbone View
@weaverryan

What is Backbone?

‣ Set of tools for creating heavy front-
end applications:
* views
* models
* router

@weaverryan

Views

A formalized method for creating a
JavaScript object that “manages” a
DOM element


Views

We’ve been building an object that’s
very similar to a Backbone view


events: {
},

}, That sure is a simple way to
bind to events. And thanks to
“delegate” events, when the
DOM updates, the events still
fire on new elements!
}
});
});

events: {
},

},

$(event.currentTarget) automatically
initialize() is
called by Backbone.
}
});
});

events: {
},

},

_.bindAll is from
underscore.js - it does the
same job as jQuery.proxy:
} guarantees that “this” is
}); this object in that function
});

events: {
},

_.bindAll(this, '_luigiClick') DOM
We attach a real
}, element to the view by
passing it into a pre-made
constructor as “el”. In the
object, it’s available via
this.el
}
});
});

Models

A formalized object that just holds
key-value data on it


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


var App = Backbone.View.extend({
_.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


Backbone is a great solution


But do you have a problem?


Views: Easy win

‣ Easy event binding

‣ An object-oriented structure that’s
setup for you already

‣ “Patterns” to follow as you get
comfortable
@weaverryan

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

When to use Models + Views

‣ A highly interactive app that
communicates to a PHP API that is
never responsible for rendering any
HTML

@weaverryan

When *not* to use Models + Views

‣ An app where PHP renders HTML

‣ An app where the API isn’t robust

@weaverryan

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

Duplication
You can potentially duplicate a lot of
work both on the client and server
sides:
‣ validation
‣ models
‣ templates

@weaverryan

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

Thanks...
Ryan Weaver
@weaverryan


... and we love you!
http://joind.in/talk/view/6508

Ryan Weaver
@weaverryan

Ryan Weaver
@weaverryan

JavaScript Best Practices, Backbone.js, and Mario for the PHP Develop

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (11)

Plus de Ryan Weaver

Plus de Ryan Weaver (18)

Dernier

Dernier (20)

JavaScript Best Practices, Backbone.js, and Mario for the PHP Develop