javascript code organizations, patterns slides - zach dennis

JAVASCRIPT CODE ORGANIZATION, PATTERNS

ZACH DENNIS

MUTUALLY HUMAN SOFTWARE

1Monday, March 28, 2011

INLINE JAVASCRIPTIS NOT SUSTAINABLE

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


POOR MODULARITY / REUSE

CODE MAINTENANCE PROBLEMS

LACK OF CACHING

DIFFICULTY SCALING TO LARGER APPS


UNOBTRUSIVE JAVASCRIPTPATHWAY TO THE GREAT VALLEY


2 TECHNIQUESSEPARATE CONTENT FROM BEHAVIOR,

REGISTER EVENT HANDLERS PROGRAMMATICALLY


SEPARATE BEHAVIOR FROM CONTENT

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

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

});

HTML

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 SEMANTICSELECTOR DRIVEN CODE


REINFORCE SEMANTIC MARKUP


}); JS

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

.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 JAVASCRIPTFORMED 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 OOAPPLYING TRIED AND TRUE TECHNIQUES WITH JAVASCRIPT


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

var prez = new Presentation(prez);

prez.play();

prez.stop();

JQUERY

USING THE CLASS


BENEFITS

DATA/BEHAVIOR ENCAPSULATION

CLEAR BOUNDARIES OF RESPONSIBILITIES

API DEFINITION

MODULAR / REUSABLE CODE


ASSIGN PSEUDO-PRIVATE VARIABLE


initialize: function(element) { this.play = element.find(“.play”); this.stop = element.find(“.stop”); this.play.bind(“click”, $.proxy(this.play, this)); this.stop.bind(“click”, $.proxy(this.stop, this)); }, play: function(){ // ... }, stop: function(){ // ... },});

this._element = element;

this._element.addClass(“playing”);

JQUERY



initialize: function(element) { this._element = element;

this.play.bind(“click”, $.proxy(this.play, this)); this.stop.bind(“click”, $.proxy(this.stop, this)); }, play: function(){ this._element.addClass(“playing”); // ... }, stop: function(){ // ... },});

this.play = element.find(“.play”);this.stop = element.find(“.stop”);

FIND AND ASSIGN ELEMENTS WE NEED ACCESS TO

JQUERY



initialize: function(element) { this._element = element; this.play = element.find(“.play”); this.stop = element.find(“.stop”);

}, play: function(){

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

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

JQUERY

REGISTER EVENT HANDLERS



initialize: function(element) { this._element = element; this.play = element.find(“.play”); this.stop = element.find(“.stop”);

}, play: function(){

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

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

JQUERY

KEEP REFERENCE TO THIS

$.proxy(this.play, this);$.proxy(this.stop, this)

this


FEELS A LITTLE HEAVYFEELS A LITTLE AWKWARD


SAME EXAMPLE,DIFFERENT PATTERN


FUNCTIONS, CLOSURESTAKING ADVANTAGE OF JAVASCRIPT


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

var prez = Presentation(prez);

prez.play();

prez.stop();

JQUERY

ONLY DIFFERENCE, NO “NEW”


FEELS MORE LIKE HOME


WHAT IF WE DIDN’T CARE ABOUT A

PUBLIC API?


CREATED A FUNCTION, EXECUTED IT

REMOVE UNNECESSARY VARS

RELY ON SELECTOR-DRIVEN EVENT HANDLERS

NO NEED TO MANUALLY BIND TO ELEMENTS

WHAT JUST HAPPENED?


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 JAVASCRIPTDECLARATIVELY READABLE SELECTOR DRIVEN CODE


6 GUIDELINES


MEANINGFUL FILE NAMES TO ORGANIZE BEHAVIOR

PRESENTER.JS

VIEWER.JS

SLIDES/

PRESENTER/

REMOTE-CONTROLS.JS

VIEWER/

RESIZING.JS

REMOTE-CONTROLS.JS

GRID.JS

*USE COMBINATOR, COMPRESSOR, MINIFIER FOR DEPLOYMENT


STRUCTURE RELIES ON FUNCTION SCOPE

(function(){

})(); MODULE

$(function(){

}); MODULE JQUERY

EXECUTES IMMEDIATELY

EXECUTES AFTER DOM READY

JS


DECLARE PAGE CHECKS FIRST

$(function(){ });

JQUERY

if(!$("html.presenter").length) return;PRESENTER.JS


DECLARE HANDLERS AND VARS SECOND

$(function(){ if(!$("html.presenter").length) return;

});

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

JQUERY

PRESENTER.JS


DECLARE FUNCTIONS LAST$(function(){ if(!$("html.presenter").length) return;

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(){ // ...

JQUERY

PRESENTER.JS


QUICKER TO SCAN. KEEPING DECLARATIONS ABOVE

FUNCTION DEFINITIONS CREATES MORE

READABLE CODE.


EVENTS DRIVE CROSS-CLOSURE COMMUNICATION

function nextSlide(){ var prez = $(this).parents('.presentation:first'); // ...

current_slide.removeClass('current'); next_slide.addClass('current');

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

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

THUMBNAIL-CONTROLS.JS

PRESENTER.JS

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

REMOTE-VIEWER-CONTROLS.JS

_ _ _


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

Technology