Writing jQuery that doesn't suck - London jQuery

taken by Jeremy Keith - http://www.ﬂickr.com/photos/adactio/ Writing jQuery JavaScript that doesn’t suckMonday, 4 July 2011

Introductions Ross BrunigesMonday, 4 July 2011

Introductions taken by Mike Morgan - http://www.ﬂickr.com/photos/morgamic/ Ross Bruniges, Web Developer at MozillaMonday, 4 July 2011

Introductions careers.mozilla.com We’re hiring!Monday, 4 July 2011

Introductions taken by Mike Morgan - http://www.ﬂickr.com/photos/morgamic/ Ross Bruniges, Regular drinker at Pub StandardsMonday, 4 July 2011

Introductions taken by Caz Mockett - http://www.ﬂickr.com/photos/rugbymadgirl/ So what am I going to be talking about?Monday, 4 July 2011

Introductions taken by Julian Burgess - http://www.ﬂickr.com/photos/aubergene/ A JavaScript mixed bag.Monday, 4 July 2011

Organisation Leaving things as you would like them to be foundMonday, 4 July 2011

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 eventDelegationMonday, 4 July 2011

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 overwriteMonday, 4 July 2011

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 overwriteMonday, 4 July 2011

Organisation return { javascript : "fantastic" }; Example by Douglas Crockford Don’t rely on semi-colon insertion to work Remember to use eventDelegationMonday, 4 July 2011

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 Don’t rely on semi-colon insertion to work Remember to use eventDelegationMonday, 4 July 2011

Organisation return { javascript : "fantastic" }; Example by Douglas Crockford Hug your brackets and remember to include your semi-colons Remember to use eventDelegationMonday, 4 July 2011

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 eventDelegation Always use === and !==Monday, 4 July 2011

Organisation More Crockford facts at http://crockfordfacts.com/ Remember to for Douglas Do it use eventDelegationMonday, 4 July 2011

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.Monday, 4 July 2011

Organisation Remember to likes eventDelegation Everyone use a nice chainMonday, 4 July 2011

Organisation But you can end up looking use eventDelegationget too much Remember to like a douche if youMonday, 4 July 2011

Organisation $(‘#foo’) .click(function(){ console.log(‘please stop this madness’); }) .end() .filter(‘div.urgghhh’); Remember to use eventDelegation This works just ﬁneMonday, 4 July 2011

Organisation Remember of a JS Design Pattern Make use to use eventDelegationMonday, 4 July 2011

Organisation http://addyosmani.com/blog/essentialjsdesignpatterns/ Remember to use eventDelegation Free book!Monday, 4 July 2011

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 Remember to use eventDelegationMonday, 4 July 2011

Organisation Remember to well eventDelegation Modules play use with JS loadersMonday, 4 July 2011

Organisation Remember over complication Avoid to use eventDelegationMonday, 4 July 2011

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.Monday, 4 July 2011

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 Remember to use eventDelegationMonday, 4 July 2011

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 eventDelegationMonday, 4 July 2011

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 eventDelegationMonday, 4 July 2011

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 eventDelegationMonday, 4 July 2011

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, documentationMonday, 4 July 2011

Organisation /* @name vehicle.Sled#reindeer @function @description Set the reindeer that will pull Santas 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 ﬁrstMonday, 4 July 2011

Organisation // TODO: Fix this. Fix what? comment from stackoverﬂow thread - http://stackoverﬂow.com/questions/184618/ WhateverRemember to use eventDelegation the start. you choose ensure you do it fromMonday, 4 July 2011

Organisation /** * Always returns true. */ public boolean isAvailable() { return false; } comment from stackoverﬂow thread - http://stackoverﬂow.com/questions/184618/ Remember to it upeventDelegation Keep use to dateMonday, 4 July 2011

Performance diagram from http://www.sapdesignguild.org/Monday, 4 July 2011

Performance taken by pi.kappa - http://www.ﬂickr.com/photos/27890120@N08/ Don’t prematurely optimise - you’re just ASSumingMonday, 4 July 2011

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)Monday, 4 July 2011

Performance var expensive-selector = $(“.section:first”), reused-json-object = $.getJSON(‘docs.json’), reusable-regex = /d(b+)d/g; Cache quicker for reuseMonday, 4 July 2011

Performance Exit quickly to avoid silent failsMonday, 4 July 2011

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 failsMonday, 4 July 2011

Performance from The Mysteries of JavaScript Fu, Dan Webb - http://www.slideshare.net/danwrong/java-script-fu- Remember to use eventDelegationMonday, 4 July 2011

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 Remember to use eventDelegationMonday, 4 July 2011

Performance .delegate() example - also chainable $(table).delegate(tr, click, function(event){ // this == tr element }); Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery Remember to use eventDelegationMonday, 4 July 2011

Performance Handrolled example - maximum control $(table).bind(click, function(event) { // this == table element var $tr = $(event.target).closest(tr); }); Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery Remember to use eventDelegationMonday, 4 July 2011

Performance Cause minimal reﬂows use eventDelegation in IE) Remember to and repaints (especiallyMonday, 4 July 2011

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 Remember to use eventDelegation RepaintsMonday, 4 July 2011

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 eventDelegationMonday, 4 July 2011

Performance Remember to use eventDelegation Use the latest version of jQuery!Monday, 4 July 2011

Don’t forget your accessibility taken by Drew McLellan - http://www.ﬂickr.com/photos/drewm/Monday, 4 July 2011

Don’t forget your accessibility Don’t forget your focus (and blur)Monday, 4 July 2011

Don’t forget your accessibility $(‘#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 eventsMonday, 4 July 2011

Don’t forget your accessibility Invalid mark-up is still invalid mark-up even when inserted via JSMonday, 4 July 2011

Don’t forget your accessibility Remember to update the screenreader bufferMonday, 4 July 2011

Don’t forget your accessibility 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) wayMonday, 4 July 2011

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 regionsMonday, 4 July 2011

Don’t forget your accessibility aria-live - sets the frequency of updates to AT aria-controls - associates 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 regionsMonday, 4 July 2011

Don’t forgetPerformance your ‘edge cases’Monday, 4 July 2011

Don’t forget your ‘edge cases’ If things can goto use eventDelegation Remember wrong then normally willMonday, 4 July 2011

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 willMonday, 4 July 2011

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 toto the rescue $.ajax use eventDelegationMonday, 4 July 2011

Don’t forget your ‘edge cases’ - like other browsers! Remember toause eventDelegation jQuery isn’t 100% magic bulletMonday, 4 July 2011

Thanks for listening! http://bit.ly/ross-london-jquery Remember to use eventDelegation Looking for the links?Monday, 4 July 2011

Taken by Mark Klotz - http://www.ﬂickr.com/photos/markklotz/ Remember toCheers! use eventDelegationMonday, 4 July 2011

http://www.thecssdiv.co.uk	359
http://lanyrd.com	23
http://dev.thecssdiv.co.uk	2
http://translate.googleusercontent.com	1

Writing jQuery that doesn't suck - London jQuery

by Ross Bruniges

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 385

Statistics

Writing jQuery that doesn’t suck - London jQuery Presentation Transcript