Writing JavaScript that doesn't suck

taken by Jeremy Keith - http://www.ﬂickr.com/photos/adactio/

Writing jQuery JavaScript that doesn’t suck

Introductions

Ross Bruniges

Introductions

taken by Phil Whiteside - http://www.ﬂickr.com/photos/philliecasablanca/

Ross Bruniges, Web Developer at Nature.com

Introductions

Ross Bruniges, Occasional Author

Introductions

taken by Patrick Grifﬁths - http://www.ﬂickr.com/photos/ptg/

Ross Bruniges, Regular drinker at Pub Standards

Introductions

taken by Caz Mockett - http://www.ﬂickr.com/photos/rugbymadgirl/

So what am I going to be talking about?

Introductions

taken by PJ Barry - http://www.ﬂickr.com/photos/actel/

A new years refresher after a long 2010

Introductions

taken by Julian Burgess - http://www.ﬂickr.com/photos/aubergene/

A JavaScript mixed bag.

Organisation

Yes this is my wardrobe

Organisation

JSLint is a JavaScript program that looks for
problems in JavaScript programs. It is a code
quality tool.

More information on the JS Lint at http://www.jslint.com/lint.html

Remember to useJavaScript
Lint your eventDelegation

Organisation

application = some large JS app (global)

function eatMe() {
// accessing the global variable
application = false;
}

eatMe();

application.shouldWork();// now returns false

Beware Remember to use eventDelegation
global variables, they are easy to overwrite

Organisation

application = some large JS app (global)

function eatMe() {
// now accessing a local variable
var application = false;
}

eatMe();

application.shouldWork()// now works

Beware Remember to use eventDelegation
global variables, they are easy to overwrite

Organisation

return
{
javascript : "fantastic"
};

Example by Douglas Crockford

Don’t rely on semi-colon insertion to work
Remember to use eventDelegation

Organisation

return; // Semicolon inserted, believing the
statement has finished. Returns undefined
{ // Considered to be an anonymous block, doing
nothing
};// Semicolon interpreted as an empty dummy line
and moved down


Don’t rely on semi-colon insertion to work

Organisation

return {
};


Hug your brackets and remember to include your semi-colons

Organisation

1 == true // returns true as 1 is a ‘truthy’
value and gets converted to such

1 === true // returns false as no conversion is
applied

Always use === and !==

Organisation

More Crockford facts at http://crockfordfacts.com/

Remember to for Douglas
Do it use eventDelegation

Organisation

$(‘#foo’).click(function(){console.log(‘please
stop this madness’);}).end().filter
(‘div.urgghhh’)

Pain for someone down the line

Avoid long chained statements use eventDelegation doesn’t mean
Remember to - just because you can
that you should.

Organisation

Remember to likes eventDelegation
Everyone use a nice chain

Organisation

But you can end up looking use eventDelegationget too much
Remember to like a douche if you

Organisation

$(‘#foo’)
.click(function(){
console.log(‘please stop this madness’);
})
.end()
.filter(‘div.urgghhh’);

This works just ﬁne

Organisation

Remember of a JS Design Pattern
Make use to use eventDelegation

Organisation

var clean = function() {
var debug = false;
var init = function() {
console.log(‘fail’);
};
return {
init : init
};
}();

clean.init();

Revealing Module Pattern - clean, tidy and easy to understand

Organisation

http://addyosmani.com/blog/essentialjsdesignpatterns/

Free book!

Organisation

Remember over complication
Avoid to use eventDelegation

Organisation

Just because you THINK it to use be cool doesn’t mean it will be.
Remember might eventDelegation
Especially if no one has asked for it.

Organisation

function poorlyThoughtOut() {
// OK I’m going to get some elements
// add a class or two
// parse some data from the elements
// remove some DOM elements
// parse some data from someplace else
// fade the background to yellow to highlight
the change
// update the screenreader buffer
}

Don’t stuff your functions until they burst

Organisation

function parseData() {}

function updateBuffer() {}

function betterPlanned() {
// OK I’m going to get some elements
// add a class or two
// parseData()
// remove some DOM elements
// parseData()
// updateBuffer()
}

Smaller functions are easier useunderstand and more modular
Remember to to eventDelegation

Organisation

In your code trigger an event
$.trigger(‘carousel_move’);

If someone needs it they can use it later
$.bind(‘carousel_move’, function(e) {
console.log(‘event functionality without
needing to alter the existing code base’);
});

Custom events to to use for future development
Remember allow eventDelegation

Organisation

//
// Dear maintainer:
//
// Once you are done trying to 'optimize' this
routine,
// and have realized what a terrible mistake that
was,
// please increment the following counter as a
warning
// to the next guy:
//
// total_hours_wasted_here = 39
//

comment from stackoverﬂow thread - http://stackoverﬂow.com/questions/184618/

Remember to useyour code
Comment eventDelegation

Organisation

/**
* Change the role of the employee.
* @param {integer} employeeId The id of the
employee.
* @param {string} [newRole] The new role of the
employee.
*/
function recast(employeeId, newRole) {
}

project homepage at http://code.google.com/p/jsdoc-toolkit/

JSDocToolkit - commentseventDelegation out
Remember to use in, documentation

Organisation

/*
@name vehicle.Sled#reindeer
@function
@description Set the reindeer that will pull
Santa's sled.
@param {string[]} reindeer A list of the
reindeer.
@example
// specifying some reindeer
Sled().reindeer(['Dasher', 'Dancer', 'Rudolph',
'Vixen']);
*/

full article by Frances Berriman at http://24ways.org/2010/documentation-driven-design-for-apis

Documentation-Driven Design,eventDelegationcode second
Remember to use document ﬁrst

Organisation

// TODO: Fix this. Fix what?


WhateverRemember to use eventDelegation the start.
you choose ensure you do it from

Organisation

/**
* Always returns true.
*/
public boolean isAvailable() {
return false;
}


Remember to it upeventDelegation
Keep use to date

Performance

diagram from http://www.sapdesignguild.org/

Performance

taken by pi.kappa - http://www.ﬂickr.com/photos/27890120@N08/

Don’t prematurely optimise - you’re just ASSuming

Performance

$(‘#foo div’) = bad, it will search first for ALL
divs in the document;

$(‘div.me’) is better it will only search for
divs with that specific class

$(‘div#me’) = best, all JS parses will look only
for that specific element

Write good selectors (sizzle parse right to left - in IE6 and 7)

Performance

var expensive-selector = $(“.section:first”),
reused-json-object = $.getJSON(‘docs.json’),
reusable-regex = /d(b+)d/g;

Cache quicker for reuse

Performance

Exit quickly to avoid silent fails

Performance

var elm = $(‘#findMe’);

if (!elm.length) { return false; }

We now know that this code will only be run if
the element actually exists.

Exit quickly to avoid silent fails

Performance

from The Mysteries of JavaScript Fu, Dan Webb - http://www.slideshare.net/danwrong/java-script-fu-


Performance

.live() example - quick and dirty

$('tr').live('click', function(event) {
// this == tr element
});

Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery


Performance

.delegate() example - also chainable

$('table').delegate('tr', 'click', function(event){
// this == tr element
});



Performance

Handrolled example - maximum control

$('table').bind('click', function(event) {
// this == table element
var $tr = $(event.target).closest('tr');
});



Performance

Cause minimal reﬂows use eventDelegation in IE)
Remember to and repaints (especially

Performance

“Repaint - also known as redraw - is what happens
whenever something is made visible when it was
not previously visible, or vice versa, without
altering the layout of the document.”

Quote from http://dev.opera.com/articles/view/efﬁcient-javascript/?page=all

Repaints

Performance

“whenever the DOM tree is manipulated, whenever a
style is changed that affects the layout,
whenever the className property of an element is
changed, or whenever the browser window size is
changed...

In many cases, they are equivalent to laying out
the entire page again.”

Quote from http://dev.opera.com/articles/view/efﬁcient-javascript/?page=all

Remember toReﬂows
use eventDelegation

Don’t forget your accessibility

taken by Drew McLellan - http://www.ﬂickr.com/photos/drewm/


Don’t forget your focus (and blur)


$(‘#foo’).bind(‘mouseenter focus’, function(e) {
code goes here
});

$(‘#foo’).bind(‘mouseleave blur’, function(e) {
code goes here
});

If you use .bind (opposed to .click) you can include multiple events


Invalid mark-up is still invalid mark-up even when inserted via JS


Remember to update the screenreader buffer


1. Update the value of a hidden input field
2. Ensure that you have a tabIndex value of -1 on
the element that you’ve altered
3. .focus() on the newly inserted content

The old(ish) way


“Live region markup allows web page authors to
specify when and how live changes to specific
areas of a web page should be spoken or shown on
a Braille display by a screen reader.”

Read more at https://developer.mozilla.org/en/AJAX/WAI_ARIA_Live_Regions

The new(ish) way - ARIA live regions


aria-live - sets the frequency of updates to AT

aria-controls - assosiates a control with an
area. All actions on that control are announced
by AT

aria-relevant - states what changes to the live
region are to be announced to AT

Read more at https://developer.mozilla.org/en/AJAX/WAI_ARIA_Live_Regions

The new(ish) way - ARIA live regions

Don’t forget
Performance your ‘edge cases’

Don’t forget your ‘edge cases’

If things can goto use eventDelegation
Remember wrong then normally will


Remember to code for when the server doesn’t return
a value - it might be down or the app might be
broken.

The server might take longer to reply than expected
and cause a timeout meaning an empty return value.

If things can go wrong then normally will

$.ajax is the backbone to all jQuery AJAX methods
like $.getScript or $.getJSON and allows for much
greater flexibility.

$.ajax({
url : “foo.php”,
dataType : “json”,
success : function(data) {
gets sent the JSON response
},
error : function() {
gets sent the error type and text
},
timeout : 1000
});

Remember toto the rescue
$.ajax use eventDelegation


ALL current versions of IE can’t apply styles to
the new HTML5 elements without the use of
JavaScript.

More information on the HTML5shiv at http://code.google.com/p/html5shiv/

Remember tothe HTML5 shiv
Beware use eventDelegation


Lots of clever people recommend the use of Remy
Sharps HTML5shiv to force IE into rendering these
elements after it was found that creating empty
pointers to them with JavaScript makes them
styleable.




So JS is being used to ensure CSS works.




Fail?


<div class=”section”>
<section>
</section>
</div>

You can now apply CSS to .section and be safe in
the knowledge that they will always be applied.

Remember A safereventDelegation
to use way


Clients wouldn’t like their site looking like this...

Taken by Mark Klotz - http://www.ﬂickr.com/photos/markklotz/

Remember toCheers!
use eventDelegation

Writing JavaScript that doesn't suck

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Writing JavaScript that doesn't suck (20)

Recently uploaded (20)

Writing JavaScript that doesn't suck