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

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

7 tips for writing JavaScript like a jerk + What to take and leave in Backbone.jsThursday, 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/weaverryanThursday, May 24, 12

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 functions 3. Profit! $$$ @weaverryanThursday, May 24, 12

Too soon? ... sry fb, luv u kthxbye @weaverryanThursday, 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 pointThursday, 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-playThursday, May 24, 12

‣ Click either .luigi or .peach ‣ the .luigi wrapper gets the active classThursday, 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 @weaverryanThursday, May 24, 12

Events happenThursday, May 24, 12

Event Click! 1) You click! 2) An event travels up the treeThursday, 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 uglinessThursday, 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 toThursday, May 24, 12

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

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

If you click .luigi: event.target: .luigi event.currentTarget: .luigiThursday, 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 DOMThursday, May 24, 12

Bad JavaScript moral #1: jQuery’s event object is a dangerous source of useful information and control @weaverryanThursday, 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 @weaverryanThursday, May 24, 12

A PHP object @weaverryanThursday, May 24, 12

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

A JavaScript object @weaverryanThursday, 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 @weaverryanThursday, May 24, 12

Princess Pro-tip Be careful with objects, they can increase readability, which threatens job securityThursday, 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 reusableThursday, 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 @weaverryanThursday, 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 @weaverryanThursday, May 24, 12

Everything is an objectThursday, 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 @weaverryanThursday, 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? @weaverryanThursday, May 24, 12

Imagine if we could do this craziness in PHP @weaverryanThursday, 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 printedThursday, May 24, 12

Yep, that’s how it works in JavaScript! @weaverryanThursday, 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 objectThursday, 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! @weaverryanThursday, 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 AMThursday, 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 ﬁnal word Seriously, this is why I fight against you guysThursday, May 24, 12

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

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

Bowser ﬁnal word He’s a much better speaker than this guyThursday, May 24, 12

Ryan does damage control on his presentation Dude, I’m right hereThursday, 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 @weaverryanThursday, 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 @weaverryanThursday, 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 @weaverryanThursday, 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 calledThursday, 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 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();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 @weaverryanThursday, 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 eventThursday, 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 @weaverryanThursday, 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 yoursThursday, May 24, 12

Backbone.js! @weaverryanThursday, 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 @weaverryanThursday, May 24, 12

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

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

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

Models A formalized object that just holds key-value data on itThursday, 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

Backbone is a great solutionThursday, 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 @weaverryanThursday, 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 @weaverryanThursday, 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 @weaverryanThursday, May 24, 12

When *not* to use Models + Views ‣ An app where PHP renders HTML ‣ An app where the API isn’t robust @weaverryanThursday, 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 @weaverryanThursday, May 24, 12

Duplication You can potentially duplicate a lot of work both on the client and server sides: ‣ validation ‣ models ‣ templates @weaverryanThursday, 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 :) @weaverryanThursday, May 24, 12

Thanks... Ryan Weaver @weaverryanThursday, May 24, 12

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

http://lanyrd.com	127
https://twitter.com	14
http://coderwall.com	6
http://samples.dev.talentlms.com	4
https://si0.twimg.com	4
http://us-w1.rockmelt.com	2
http://nodeslide.herokuapp.com	1
http://www.onlydoo.com	1
http://www.linkedin.com	1

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

by Ryan Weaver on May 24, 2012

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 160

Statistics

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