• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Writing JavaScript that doesn't suck
 

Writing JavaScript that doesn't suck

on

  • 3,538 views

Presented at London Web Standards Pick 'n' Mix, 18th January 2011 ...

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/

Statistics

Views

Total Views
3,538
Views on SlideShare
3,264
Embed Views
274

Actions

Likes
5
Downloads
42
Comments
2

8 Embeds 274

http://rossbruniges.posterous.com 154
http://lanyrd.com 65
http://conservinfo.org 40
http://blog.cincijs.com 9
http://www.linkedin.com 3
http://www.slideshare.net 1
http://creator.zoho.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hilarious. 'Do your chain hang low?'
    Are you sure you want to
    Your message goes here
    Processing…
  • Links to all articles and resources mentioned in the talk can be found at http://rossbruniges.posterous.com/

    Hope you enjoyed watching.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Writing JavaScript that doesn't suck Writing JavaScript that doesn't suck Presentation Transcript

    • taken by Jeremy Keith - http://www.flickr.com/photos/adactio/Writing jQuery JavaScript that doesn’t suck
    • Introductions Ross Bruniges
    • Introductions taken by Phil Whiteside - http://www.flickr.com/photos/philliecasablanca/ Ross Bruniges, Web Developer at Nature.com
    • Introductions Ross Bruniges, Occasional Author
    • Introductions 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.
    • 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 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 eventDelegation
    • Organisation return { javascript : "fantastic" }; Example by Douglas Crockford Hug your brackets and remember to include your semi-colons Remember to use eventDelegation
    • 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 !==
    • 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’); Remember to use eventDelegation This works just fine
    • 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 Remember to use eventDelegation
    • Organisation http://addyosmani.com/blog/essentialjsdesignpatterns/ Remember to use eventDelegation 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 Remember to use eventDelegation
    • 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 stackoverflow thread - http://stackoverflow.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 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 first
    • Organisation // TODO: Fix this. Fix what? comment from stackoverflow thread - http://stackoverflow.com/questions/184618/ WhateverRemember to use eventDelegation the start. you choose ensure you do it from
    • Organisation /** * Always returns true. */ public boolean isAvailable() { return false; } comment from stackoverflow thread - http://stackoverflow.com/questions/184618/ Remember to it upeventDelegation Keep use to date
    • Performance diagram from http://www.sapdesignguild.org/
    • Performance taken by pi.kappa - http://www.flickr.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- Remember to use eventDelegation
    • 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 eventDelegation
    • 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 eventDelegation
    • 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 eventDelegation
    • Performance Cause minimal reflows 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/efficient-javascript/?page=all Remember to use eventDelegation 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/efficient-javascript/?page=all Remember toReflows use eventDelegation
    • Don’t forget your accessibility taken by Drew McLellan - http://www.flickr.com/photos/drewm/
    • Don’t forget your accessibility Don’t forget your focus (and blur)
    • 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 events
    • Don’t forget your accessibility 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 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
    • 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 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 Read more at https://developer.mozilla.org/en/AJAX/WAI_ARIA_Live_Regions The new(ish) way - ARIA live regions
    • Don’t forgetPerformance your ‘edge cases’
    • Don’t forget your ‘edge cases’ Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery If things can goto use eventDelegation Remember wrong then normally will
    • 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. Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery If things can go wrong then normally will
    • 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 }); Code examples from http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery Remember toto the rescue $.ajax use eventDelegation
    • 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. More information on the HTML5shiv at http://code.google.com/p/html5shiv/ Remember tothe HTML5 shiv Beware use eventDelegation
    • 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 tothe HTML5 shiv Beware use eventDelegation
    • 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 tothe HTML5 shiv Beware use eventDelegation
    • Don’t forget your ‘edge cases’ Remember to use eventDelegation Fail?
    • 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 A safereventDelegation to use way
    • Don’t forget your ‘edge cases’ Clients wouldn’t like their site looking like this... Remember to use eventDelegation
    • Questions?
    • Taken by Mark Klotz - http://www.flickr.com/photos/markklotz/Remember toCheers! use eventDelegation