JavaScript Code Organizations, Patterns Slides - Zach Dennis

JAVASCRIPT CODE
ORGANIZATION, PATTERNS
ZACH DENNIS
MUTUALLY HUMAN SOFTWARE

Monday, March 28, 2011 1

<div class="presentation">
<a onclick="playPresentation()">
Play Presentation
</a>
</div>

INLINE JAVASCRIPT
IS NOT SUSTAINABLE


POOR MODULARITY / REUSE

CODE MAINTENANCE PROBLEMS

LACK OF CACHING

DIFFICULTY SCALING TO LARGER APPS


UNOBTRUSIVE JAVASCRIPT
PATHWAY TO THE GREAT VALLEY


2 TECHNIQUES
SEPARATE CONTENT FROM BEHAVIOR,
REGISTER EVENT HANDLERS PROGRAMMATICALLY


SEPARATE BEHAVIOR FROM
CONTENT

<a class="play">
Play Presentation
</a>
</div>

HTML

$(“.presentation .play”).click(function(){
// ...
});

JS


REGISTER HANDLERS
PROGRAMMATICALLY
// ...
}); JQUERY

$(“.presentation .play”).addEvent(“click”, function(){
// ...
});
MOOTOOLS

var el = dojo.query(“.presentation .play”);
el.connect(“click”, function(){
// ...
});
DOJO


THE GREAT VALLEY EFFECT


A BETTER VANTAGE POINT

SEE PATTERNS

CODE DECOMPOSITION

CODE ORGANIZATION

APPLY PATTERNS


DRIVES SEMANTIC
SELECTOR DRIVEN CODE


REINFORCE SEMANTIC MARKUP

<a class="play">
Play Presentation
</a>
</div> HTML

// ...
});
JS

.presentation .play {
background-image: url(...);
font-size: 1.em;
} CSS


SELECTOR DRIVEN CODE

IT CAN BE SCANNED AND
RE-ORGANIZED MORE
EFFECTIVELY. IT’S EASIER TO
VISUALIZE AND MANIPULATE.


BUT THEN


$(".presentation .play").click(function(){
var presentation = $(this).parents('.presentation:first');
presentation.addClass('playing');
selectSlide(presentation.find(".slides:first"));
});

$(".presentation .stop").click(function(){
$(this).parents('.deck:first').addClass('stopping');
});

$('.presentation a.destroy').live('ajax:success', function(data){
var deck = $(this).parents('.deck:first');
deck.fadeOut('fast', deck.remove);
});

$('#grid .slide a:last').click(function(){
selectSlide($(this).parents(".slide:first"));
return false;
});

$('img.slide').live("slide:loaded", function(){
resizeSlide($(this));
});

// any time the window resizes, resize the main slide
$(window).resize(function(){
resizeSlide($(".slide_viewer img.slide"));
});

function resizeSlide(img) {
var viewer_width = $('.slide_viewer').width();
var viewer_height = $('.slide_viewer').height();

// Use original width and height since the image may be scaled
// down to a smaller size, and we want to use the original size to scale
// the image rather than the size it is currently scaled to
var slide_width = img.data('original_width');
var slide_height = img.data('original_height');

if(slide_width > viewer_width){
ratio = viewer_width / slide_width;
$('.slide_viewer img.slide').css({width: viewer_width, height: slide_height * ratio});
}
}

page 1 of 22


MONOLITHIC JAVASCRIPT
FORMED OF A SINGLE LARGE FILE.


CODE MONOLITHS

GREAT FOR DEPLOYMENT

BAD FOR DEVELOPMENT

LOSES CONTEXT, HIERARCHY, SCOPE

VISUALLY HARD TO SCAN

CODE WITH DIFFERENT BEHAVIORS OR REASONS TO
EXIST, CO-EXIST

EXCEPT VERY SMALL SITES / APPS


PATTERNS FOR AVOIDING
MONOLITHS

TRADITIONAL CLASS-BASED OO

FUNCTIONS, CLOSURES

EVENT-DRIVEN JAVASCRIPT


TRADITIONAL CLASS-BASED OO
APPLYING TRIED AND TRUE TECHNIQUES WITH JAVASCRIPT


var Presentation = $.Class.create({

initialize: function(element) {
},

play: function(){
// ...
},

stop: function(){
// ...
},

});
JQUERY


USING THE CLASS

var el = $(“.presentation:first”);

var prez = new Presentation(prez);

prez.play();

prez.stop();

JQUERY


BENEFITS

DATA/BEHAVIOR ENCAPSULATION

CLEAR BOUNDARIES OF RESPONSIBILITIES

API DEFINITION

MODULAR / REUSABLE CODE


ASSIGN PSEUDO-PRIVATE VARIABLE

},

play: function(){
// ...
},

stop: function(){
// ...
},
}); JQUERY


FIND AND ASSIGN ELEMENTS WE NEED ACCESS TO

},

play: function(){
// ...
},

stop: function(){
// ...
},
}); JQUERY


REGISTER EVENT HANDLERS

},

play: function(){
// ...
},

stop: function(){
// ...

JQUERY


KEEP REFERENCE TO THIS

this.play.bind(“click”, $.proxy(this.play, this); );
this.stop.bind(“click”, $.proxy(this.stop, this) );
},

play: function(){
this ._element.addClass(“playing”);
// ...
},

stop: function(){
// ...

JQUERY


FEELS A LITTLE HEAVY
FEELS A LITTLE AWKWARD


SAME EXAMPLE,
DIFFERENT PATTERN


FUNCTIONS, CLOSURES
TAKING ADVANTAGE OF JAVASCRIPT


FUNCTIONS, SCOPE, CLOSURES
var Presentation = function(element){
var presentation = element;
presentation.delegate(".play", "click", play);
presentation.delegate(".stop", "click", stop);

function play(){
presentation.addClass(“playing”);
// ...
}

function stop(){
// ...
}

return {
play: play,
stop: stop
}
};
JQUERY


ONLY DIFFERENCE, NO “NEW”

var el = $(“.presentation:first”);

var prez = Presentation(prez);

prez.play();

prez.stop();

JQUERY


ACCESSIBLE PRIVATE VARIABLES

function play(){
// ...
}

function stop(){
// ...
}

return {
play: play,
stop: stop
}
}; JQUERY


STRAIGHT FORWARD EVENT DELEGATION

function play(){
// ...
}

function stop(){
// ...
}

return {
play: play,
stop: stop
}
}; JQUERY


API DEFINITION

function play(){
// ...
};

function stop(){
// ...
};

return {
play: play,
stop: stop
};
}; JQUERY


FEELS MORE LIKE HOME


WHAT IF WE DIDN’T
CARE ABOUT A
PUBLIC API?


SHORTER. SIMPLER. SWEETER.

(function(){
$(".presentation").delegate(".play", "click", play);
$(".presentation").delegate(".stop", "click", stop);

function play(){
$(this).parents(“.presentation:first”).addClass(“playing”);
// ...
}

function stop(){
// ...
}
})();
JQUERY


WHAT JUST HAPPENED?

CREATED A FUNCTION, EXECUTED IT

REMOVE UNNECESSARY VARS

RELY ON SELECTOR-DRIVEN EVENT HANDLERS

NO NEED TO MANUALLY BIND TO ELEMENTS


CLASS-BASED FUNCTION, CLOSURES EVENT-DRIVEN

var Presentation = $.Class.create({ var Presentation = (function(element){ function(){
var presentation = element; $(".presentation").delegate(".play", "click", play);
initialize: function(element) { presentation.delegate(".play", "click", play); $(".presentation").delegate(".stop", "click", stop);
this._element = element; presentation.delegate(".stop", "click", stop);
this.play = element.find(“.play”); function play(){
this.stop = element.find(“.stop”); function play(){ $(this).parents(“.presentation:first”).addClass(“playing”);
this.play.bind(“click”, $.proxy(this.play, this)); presentation.addClass(“playing”); // ...
this.stop.bind(“click”, $.proxy(this.stop, this)); // ... }
}, }
function stop(){
play: function(){ function stop(){ // ...
this._element.addClass(“playing”); // ... }
// ... } }();
},
return {
stop: function(){ play: playPresentation,
// ... stop: stopPresentation
} }
}); });


FUNCTIONS, CLOSURES RECAP

USE FUNCTIONS AND CLOSURES TO CREATE SCOPE

PRESERVE PRIVATE METHODS AND PROPERTIES WITH
VAR STATEMENTS

RETURN PUBLIC METHODS, PROPERTIES (OPTIONAL)

AND WE DON’T POLLUTE GLOBAL NAMESPACE


ONE STEP FURTHER


EVENT-DRIVEN JAVASCRIPT
DECLARATIVELY READABLE SELECTOR DRIVEN CODE


6 GUIDELINES


MEANINGFUL FILE NAMES TO
ORGANIZE BEHAVIOR
PRESENTER.JS
PRESENTER/
GRID.JS
REMOTE-CONTROLS.JS

VIEWER.JS
VIEWER/
REMOTE-CONTROLS.JS

SLIDES/
RESIZING.JS
*USE COMBINATOR, COMPRESSOR, MINIFIER FOR DEPLOYMENT


STRUCTURE RELIES ON
FUNCTION SCOPE
EXECUTES IMMEDIATELY
(function(){

})();
JS MODULE

EXECUTES AFTER DOM READY
$(function(){

});
JQUERY MODULE


DECLARE PAGE CHECKS FIRST

$(function(){
if(!$("html.presenter").length) return;
PRESENTER.JS
});
JQUERY


DECLARE HANDLERS AND VARS
SECOND
$(function(){

var presentation = $(“.presentation”),
attendee_count = 0;

presentation.delegate(“.play”, “click”, play);
presentation.delegate(“.stop”, “click”, stop);
presentation.delegate(“.slide .next”, “click”, nextSlide);
presentation.delegate(“.slide .prev”, “click”, prevSlide);
}); PRESENTER.JS

JQUERY


DECLARE FUNCTIONS LAST
$(function(){

var presentation = $(“.presentation”),
attendee_count = 0;

presentation.delegate(“.play”, “click”, play);
presentation.delegate(“.stop”, “click”, stop);
presentation.delegate(“.slide .next”, “click”, nextSlide);
presentation.delegate(“.slide .prev”, “click”, prevSlide);

function play(){
// ...
};

function stop(){
PRESENTER.JS
// ...
JQUERY


QUICKER TO SCAN. KEEPING
DECLARATIONS ABOVE
FUNCTION DEFINITIONS
CREATES MORE
READABLE CODE.


EVENTS DRIVE CROSS-CLOSURE
COMMUNICATION
PRESENTER.JS

function nextSlide(){
var prez = $(this).parents('.presentation:first'); _
// ... _
_
current_slide.removeClass('current');
next_slide.addClass('current');

prez.trigger('slide:changed', { slide: next_slide });
};

THUMBNAIL-CONTROLS.JS

$("body").delegate(".presentation", "slide:changed", transitionToSlide);

REMOTE-VIEWER-CONTROLS.JS

$("body").delegate(".presentation", "slide:changed", changeSlideOnRemoteViewers);


BENEFITS

FUNCTIONS AND CLOSURES ALLOW GROUPING OF
COMMON BEHAVIOR AND DATA

CUSTOM EVENTS ARE AWESOME

NO NEED TO HAVE REFERENCES TO EXTERNAL
OBJECTS THROUGHOUT OUR APP

LOOSER COUPLING

EASIER TO HOOK IN NEW PARTS OF OUR APP WITH
MINIMAL IMPACT TO EXISTING CODE


EVENT-DRIVEN HOW WE GOT THERE

MEANINGFUL DIRECTORY AND FILE NAMES

FOLLOW MODULE OR SIMILAR CLOSURE-PATTERN

GENERAL GUIDELINES FOR READABILITY:

DECLARE PAGE CHECKS FIRST

DECLARE HANDLERS AND VARS SECOND

DECLARE FUNCTIONS LAST

USE EVENTS TO DRIVE CROSS-CLOSURE
COMMUNICATION


IN SUMMARY
INLINE JAVASCRIPT IS NOT A SUSTAINABLE APPROACH.

UNOBTRUSIVE JAVASCRIPT IS A PATH TO “THE GREAT VALLEY”

MONOLITHIC UJS WORKS FINE FOR SMALL APPS, BUT DOESN’T SCALE WELL.
FORTUNATELY SELECTOR-DRIVEN JS IS EASIER TO MANIPULATE AND
REORGANIZE.

TRADITIONAL CLASS-BASED OO + UJS WORKS WELL, BUT CAN AT TIMES BE A
BIT HEAVY

FUNCTION/CLOSURES ARE A LIGHTER WEIGHT APPROACH THAN TRADITIONAL
OO. FEELS MORE JAVASCRIPTY.

EVENT-DRIVEN APPROACH WITH EMPHASIS ON FUNCTION/CLOSURES FOR SCOPE
AND DECLARATIVE SELECTOR-DRIVEN CODE IS LEANER, SCALABLE AND
PROMOTES LOOSE COOUPLING


JavaScript Code Organizations, Patterns Slides - Zach Dennis

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to JavaScript Code Organizations, Patterns Slides - Zach Dennis

Similar to JavaScript Code Organizations, Patterns Slides - Zach Dennis (20)

More from Zach Dennis

More from Zach Dennis (6)

Recently uploaded

Recently uploaded (20)

JavaScript Code Organizations, Patterns Slides - Zach Dennis