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.comscreencasts

• Fiancee of the much more talented @leannapelham -----> June 9th, 2012!

http://www.knplabs.com/enhttp://www.github.com/weaverryan@weaverryan


http://www.knplabs.com/en

http://www.knplabs.com/en

http://www.github.com/weaverryan

http://www.github.com/weaverryan

Chapter 1: Java$criptQuery

Look mom, I’m a JavaScript professional

@weaverryanThursday, May 24, 12

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


@weaverryan

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


The brains behind this presentation...


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


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

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>


jQuery(document).ready(function() { var $luigi = $('.event-details .luigi');

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

Let’s kick some arse!


DEMO!!!!!

0 - The starting point

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




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...

@weaverryan

http://bit.ly/php-js-demo01 - The jQuery Event




Events happen


Click!

Event

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


Browser eventversus

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


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

Our listener is registeredon .luigi


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


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


event.currentTarget

==

this

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


$luigi.click(function(event) { // 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/




$luigi.click(function(event) { event.preventDefault();

// ...});

... but if you like your coworkers...

The event keeps traveling up the DOM


Bad JavaScript moral #1:

jQuery’s event object is a dangerous source of useful

information and control


Mario bad JavaScript tip #2:

Avoid using objects: they threaten to organize your code...

and are creepy...

@weaverryan

http://bit.ly/php-js-demo02 - Basic jQuery Objects




A PHP object


<?php

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

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


A JavaScript object


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


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


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


// hola! I’m just a local variablevar MagicBoxes = { // ...};

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

};

Object Scope


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

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

the “window”



Using global objects risks organizing your code into

separate, distinct units



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

@weaverryan

http://bit.ly/php-js-demo03 - Intro to the JS Prototype




Everything is an object


var object1 = { fooProperty: 'foo!'}

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

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

Also an object with a property


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

instances


<?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?


Imagine if we could do this craziness in PHP


$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

ImaginationLand PHP code


Yep, that’s how it works in JavaScript!


#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'); $luigi.click(function(event) { event.preventDefault();

$(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

jQuery(document).ready(function() { var $mario = $('.mario-world'); var magicBoxApp = new MagicBoxes($mario);});


#4: Beers!


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 final word

Seriously, this is why I fight against you guys


Bowser final word

Your ignorance may seem blissful, but you work as a

detriment towards the larger cause of evolving

and learning asa community


Bowser final word

Thank God Garrison Locke will be teaching us Object-

oriented JavaScript tomorrow at 11:30 AM.


Bowser final 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



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

@weaverryan

http://bit.ly/php-js-demo04 - Scoping Concerns




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

ImaginationLand PHP code


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

think it is


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



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...



var $luigi = this.$el.find('.luigi'); $luigi.on( 'click', $.proxy(this._luigiClick, this) );};

Boxes.prototype._luigiClick = function(event) { event.preventDefault(); this.makeLuigiFight($(event.currentTarget));};



var $luigi = this.$el.find('.luigi'); $luigi.on( 'click', $.proxy(this._luigiClick, this) );};

$.proxy forces _luigiClick to have “this” as this

object when called


Boxes.prototype._luigiClick = function(event) { event.preventDefault(); this.makeLuigiFight($(event.currentTarget));};

event.currentTarget returns the element that was

registered on this event (formerly “this”)



Avoid jQuery.extend so that you can repeat yourself as much as

possible: DRY*

@weaverryan

* definitely repeat yourselfhttp://bit.ly/php-js-demo

05 - jQuery extendsThursday, 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();


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

@weaverryan

http://bit.ly/php-js-demo06 - Delegate events




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

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

Can you see the difference?


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


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

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


jQuery.live?

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

really just means this

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



Self-executing JavaScript blocks are just plain scary looking

@weaverryan

http://bit.ly/php-js-demo07 - Self-executing blocks




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

window.MagicBoxes = (function($) {

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

MagicBoxes.someMethod();

JavaScript Real Life





This is just a function...





Then we execute it, and pass in an argument





The function does any craziness it wants, but returns something





which we assign to a variable and then use


And that’s it!

‣ Makes isolated chunks of code

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


Backbone.js!



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

@weaverryan

http://bit.ly/php-js-demo08 - A Backbone View




@weaverryan

‣ Set of tools for creating heavy front-end applications:

* views* models* router

What is Backbone?


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


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





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!





initialize() is automatically called by Backbone.





_.bindAll is from underscore.js - it does the same job as jQuery.proxy: guarantees that “this” is

this object in that function





We attach a real DOM 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


var Character = Backbone.Model.extend();

var mario = new Character({ 'name': 'Mario'});var peach = new Character({ 'name': 'Peach', 'status': 'captured'});

// change some datapeach.set({ 'status': 'rescued'});


peach.on('change', function(changedModel) { var name = changedModel.get('name'); console.log(name + ' was updated!');});

// will cause "Peach was updated" to logpeach.set({ 'status': 'rescued'});

Events make them wonderful


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


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


Backbone is a great solution


But do you have a problem?


@weaverryan

‣ Easy event binding

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

‣ “Patterns” to follow as you get comfortable

Views: Easy win


@weaverryan

‣ There are 2 types of Views:

1) Views applied to existing elements in the DOM (like our example)

2) Views that are given an empty element, and then render using client-side templates and model data

Views: Who Renders?

Easy Win

Depends


@weaverryan

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

When to use Models + Views


@weaverryan

‣ An app where PHP renders HTML

‣ An app where the API isn’t robust

When *not* to use Models + Views


@weaverryan

‣ 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

Duplication


@weaverryan

You can potentially duplicate a lot of work both on the client and server sides:

‣ validation‣ models‣ templates

Duplication


@weaverryan

‣ 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 :)

Find your Comfort Zone


Thanks...



... and we love you!



http://joind.in/talk/view/6508




Technology

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