The Mysteries Of JavaScript-Fu (@media Europe Edition)

Slide 1: THE MYSTERIES OF JAVASCRIPT-FU Dan Webb (dan@danwebb.net)

Slide 2: A peasant’s language

Slide 3: Web 2.0 has forced ‘real’ programmers to master it

Slide 4: JavaScript-Fu is not easy to master

Slide 5: The web is awash with bad examples and worse resources

Slide 6: Developers forced into refuge behind libraries and frameworks

Slide 8: THE ANCIENT MANUALS OF JAVASCRIPT-FU The Tao Of The Event Handler! ❖ 5 Methods Of DOM Fist! ❖ Lightning Script Style! ❖ The 36 Chambers Of Shaolin! ❖

Slide 9: TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Testing and debugging ❖

Slide 10: THE TAO OF THE EVENT HANDLER

Slide 11: The essence of browser scripting is defining behaviour

Slide 12: Big differences in both browser implementation and opinion

Slide 13: The main battle has always been in one area...

Slide 14: INLINE VS SCRIPTED

Slide 15: INLINE EVENT HANDLERS

Slide 16: INLINE EVENT HANDLERS Applied as soon as the browser loads the HTML

Slide 17: INLINE EVENT HANDLERS But what happens when there is more than one....

Slide 19: Bad JavaScript-fu

Slide 20: SCRIPT-BASED EVENT HANDLERS

Slide 21: Attached after element has loaded

Slide 23: Very DRY

Slide 25: Separate JavaScript out in a similar way to CSS

Slide 26: Large numbers of event handlers choke browsers

Slide 27: WHICH WAY? Use script-based event handling by ❖ default If the page is large and this method ❖ results in unresponsiveness try event delegation If all else fails go for inline event ❖ handling

Slide 28: EVENT BUBBLING <body> handler <div> <p> <a> click

Slide 29: EVENT DELEGATION

Slide 30: BETTER INLINE HANDLERS

Slide 31: BETTER INLINE HANDLERS

Slide 32: 5 METHODS OF DOM FIST

Slide 33: There are 5 methods for updating HTML

Slide 34: 3 official methods (W3C)

Slide 35: $('kungfu').appendChild(node);

Slide 36: $('kungfu').insertBefore(node, child);

Slide 37: $('kungfu').replaceChild(node, child);

Slide 38: 1 non-standard method (you guessed it, from IE)

Slide 41: DOM VS innerHTML

Slide 42: DOM METHODS

Slide 43: Insert elements with precision

Slide 44: But you need to create the nodes first...

Slide 46: ARGH!

Slide 47: LOWPRO’S DOM BUILDER

Slide 48: INNERHTML

Slide 49: Can shift large amount of HTML quickly...

Slide 50: ...but you don't get much control

Slide 51: Incredibly simple to use with Ajax

Slide 52: WHICH WAY? No clear winner ❖ DOM is good for more surgical ❖ manipulation innerHTML is good for replacing large ❖ amounts of content or simple jobs

Slide 53: and the final method...

Slide 54: THE BASTARD SON

Slide 55: LIGHTNING SCRIPT STYLE

Slide 57: ~134KB

Slide 58: 5 HTTP requests

Slide 59: Takes time to download and evaluate script

Slide 60: The less JavaScript the better

Slide 61: Browsers normally only try to load 2 resources concurrently

Slide 62: Combine .js files

Slide 63: Use GZIP compression over JS based minification

Slide 64: Make sure everything is cachable

Slide 65: FASTER LOOPS

Slide 66: FASTER LOOPS

Slide 67: BE CAREFUL WITH SELECTORS

Slide 68: Use a just-in-time approach

Slide 71: THE 36 CHAMBERS OF SHAOLIN

Slide 73: You're going to need a few tools...

Slide 74: Buy a Mac

Slide 75: Parallels Workstation PARALLELS WORKSTATION

Slide 76: Get Firebug

Slide 78: What about the other browsers?

Slide 80: And then there's testing...

Slide 81: SELENIUM Written by ThoughtWorks ❖ Implemented in HTML/CSS ❖ Test cases define a series of user ❖ actions (using HTML) Assertions check the correct results ❖

Slide 84: LEARNING MORE

Slide 85: LEARNING MORE Dan Webb: http://www.danwebb.net ❖ Low Pro: http://www.danwebb.net/lowpro ❖ Parallels: http://parallels.com ❖ Firebug: http://getfirebug.com ❖ Selenium: http://www.openqa.org/ ❖ selenium/

Slide 86: QUESTIONS?

Slideshare.net (beta)