Upload
ross-bruniges
View
3.702
Download
0
Embed Size (px)
DESCRIPTION
Presented at London Web Standards Pick 'n' Mix, 18th January 2011 Numerous tips and advice on writing JavaScript code that avoids most common pitfalls, is unmaintainable, inaccessible or slow as a dog. Futher explanation and links to articles mentioned can be found at http://rossbruniges.posterous.com/
Citation preview
taken by Jeremy Keith - http://www.flickr.com/photos/adactio/
Writing jQuery JavaScript that doesn’t suck
Ross Bruniges
Introductions
Introductions
taken by Phil Whiteside - http://www.flickr.com/photos/philliecasablanca/
Ross Bruniges, Web Developer at Nature.com
Introductions
Ross Bruniges, Occasional Author
taken by Patrick Griffiths - http://www.flickr.com/photos/ptg/
Ross Bruniges, Regular drinker at Pub Standards
Introductions
taken by Caz Mockett - http://www.flickr.com/photos/rugbymadgirl/
So what am I going to be talking about?
Introductions
taken by PJ Barry - http://www.flickr.com/photos/actel/
A new years refresher after a long 2010
Introductions
taken by Julian Burgess - http://www.flickr.com/photos/aubergene/
A JavaScript mixed bag.
Introductions
Yes this is my wardrobe
Organisation
Remember to use eventDelegationLint your JavaScript
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 use eventDelegationBeware global variables, they are easy to overwrite
Organisation
application = some large JS app (global)
function eatMe() {
// accessing the global variable
application = false;
}
eatMe();
application.shouldWork();// now returns false
Remember to use eventDelegationBeware 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
Remember to use eventDelegationDon’t rely on semi-colon insertion to work
Organisation
return{ javascript : "fantastic"};
Example by Douglas Crockford
Remember to use eventDelegationDon’t rely on semi-colon insertion to work
Organisation
return; // Semicolon inserted, believing the statement has finished. Returns undefined{ // Considered to be an anonymous block, doing nothing javascript : "fantastic"};// Semicolon interpreted as an empty dummy line and moved down
Example by Douglas Crockford
Remember to use eventDelegationHug your brackets and remember to include your semi-colons
Organisation
return { javascript : "fantastic"};
Example by Douglas Crockford
Remember to use eventDelegationAlways use === and !==
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
Remember to use eventDelegationDo it for Douglas
Organisation
More Crockford facts at http://crockfordfacts.com/
Remember to use eventDelegationAvoid long chained statements - just because you can doesn’t mean that you should.
Organisation
$(‘#foo’).click(function(){console.log(‘please stop this madness’);}).end().filter(‘div.urgghhh’)
Pain for someone down the line
Remember to use eventDelegationEveryone likes a nice chain
Organisation
Remember to use eventDelegationBut you can end up looking like a douche if you get too much
Organisation
Remember to use eventDelegationThis works just fine
Organisation
$(‘#foo’)
.click(function(){
console.log(‘please stop this madness’);
})
.end()
.filter(‘div.urgghhh’);
Remember to use eventDelegationMake use of a JS Design Pattern
Organisation
Remember to use eventDelegationRevealing Module Pattern - clean, tidy and easy to understand
Organisation
var clean = function() {
var debug = false;
var init = function() {
console.log(‘fail’);
};
return {
init : init
};
}();
clean.init();
Remember to use eventDelegationFree book!
Organisation
http://addyosmani.com/blog/essentialjsdesignpatterns/
Remember to use eventDelegationAvoid over complication
Organisation
Remember to use eventDelegationJust because you THINK it might be cool doesn’t mean it will be. Especially if no one has asked for it.
Organisation
Remember to use eventDelegationDon’t stuff your functions until they burst
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}
Remember to use eventDelegationSmaller functions are easier to understand and more modular
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()}
Remember to use eventDelegationCustom events to allow for future development
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’);
});
Remember to use eventDelegationComment your code
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 stackoverflow thread - http://stackoverflow.com/questions/184618/
Remember to use eventDelegationJSDocToolkit - comments in, documentation out
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/
Remember to use eventDelegationDocumentation-Driven Design, document first code second
Organisation
full article by Frances Berriman at http://24ways.org/2010/documentation-driven-design-for-apis
/*@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 reindeerSled().reindeer(['Dasher', 'Dancer', 'Rudolph', 'Vixen']);*/
Remember to use eventDelegationWhatever you choose ensure you do it from the start.
Organisation
// TODO: Fix this. Fix what?
comment from stackoverflow thread - http://stackoverflow.com/questions/184618/
Remember to use eventDelegationKeep it up to date
Organisation
/** * Always returns true. */public boolean isAvailable() { return false;}
comment from stackoverflow thread - http://stackoverflow.com/questions/184618/
Performance
diagram from http://www.sapdesignguild.org/
Don’t prematurely optimise - you’re just ASSuming
Performance
taken by pi.kappa - http://www.flickr.com/photos/27890120@N08/
Write good selectors (sizzle parse right to left - in IE6 and 7)
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
Cache quicker for reuse
Performance
var expensive-selector = $(“.section:first”), reused-json-object = $.getJSON(‘docs.json’), reusable-regex = /d(b+)d/g;
Exit quickly to avoid silent fails
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.
Remember to use eventDelegation
Performance
from The Mysteries of JavaScript Fu, Dan Webb - http://www.slideshare.net/danwrong/java-script-fu-
Remember to use eventDelegation
PerformancePerformance
.live() example - quick and dirty
$('tr').live('click', function(event) { // this == tr element});
Remember to use eventDelegationCode examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
Remember to use eventDelegation
PerformancePerformance
.delegate() example - also chainable
$('table').delegate('tr', 'click', function(event){ // this == tr element});
Remember to use eventDelegationCode examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
Remember to use eventDelegation
PerformancePerformance
Handrolled example - maximum control
$('table').bind('click', function(event) { // this == table element var $tr = $(event.target).closest('tr');});
Remember to use eventDelegationCode examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
Remember to use eventDelegation
PerformancePerformance
Cause minimal reflows and repaints (especially in IE)
Remember to use eventDelegation
PerformancePerformance
RepaintsQuote from http://dev.opera.com/articles/view/efficient-javascript/?page=all
“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.”
Remember to use eventDelegationQuote from http://dev.opera.com/articles/view/efficient-javascript/?page=all
PerformancePerformance
Reflows
“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.”
taken by Drew McLellan - http://www.flickr.com/photos/drewm/
Don’t forget your accessibility
Don’t forget your accessibility
Don’t forget your focus (and blur)
If you use .bind (opposed to .click) you can include multiple events
Don’t forget your accessibility
$(‘#foo’).bind(‘mouseenter focus’, function(e) {code goes here
});
$(‘#foo’).bind(‘mouseleave blur’, function(e) {code goes here
});
Invalid mark-up is still invalid mark-up even when inserted via JS
Don’t forget your accessibility
Remember to update the screenreader buffer
Don’t forget your accessibility
The old(ish) way
Don’t forget your accessibility
1. Update the value of a hidden input field2. Ensure that you have a tabIndex value of -1 on the element that you’ve altered3. .focus() on the newly inserted content
The new(ish) way - ARIA live regions
Don’t forget your accessibility
“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 regionsRead more at https://developer.mozilla.org/en/AJAX/WAI_ARIA_Live_Regions
Don’t forget your accessibility
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
PerformanceDon’t forget your ‘edge cases’
Remember to use eventDelegationIf things can go wrong then normally will
Don’t forget your ‘edge cases’
Don’t forget your ‘edge cases’
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
Remember to use eventDelegation$.ajax to the rescue
Don’t forget your ‘edge cases’
$.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 to use eventDelegationMore information on the HTML5shiv at http://code.google.com/p/html5shiv/
Beware the HTML5 shiv
Don’t forget your ‘edge cases’
ALL current versions of IE can’t apply styles to the new HTML5 elements without the use of JavaScript.
Remember to use eventDelegationBeware the HTML5 shiv
Don’t forget your ‘edge cases’
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.
More information on the HTML5shiv at http://code.google.com/p/html5shiv/
Remember to use eventDelegationBeware the HTML5 shiv
Don’t forget your ‘edge cases’
So JS is being used to ensure CSS works.
More information on the HTML5shiv at http://code.google.com/p/html5shiv/
Remember to use eventDelegationFail?
Don’t forget your ‘edge cases’
Remember to use eventDelegationA safer way
Don’t forget your ‘edge cases’
<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 to use eventDelegationClients wouldn’t like their site looking like this...
Don’t forget your ‘edge cases’
Questions?
Remember to use eventDelegationCheers!Taken by Mark Klotz - http://www.flickr.com/photos/markklotz/