the mysteries of javascript-fu (@media sf edition)
DESCRIPTION
The version of JS-fu as presented at @media SF. Contains a section on testing and debugging that isn't in the RailsConf version.TRANSCRIPT
About Me ❖ JavaScript hacker for
6 years
❖ Ruby/Rails for 2 years
❖ Author of Low Pro, DOM Builder, Sumo and other stuff
❖ Prototype Core Team
❖ http://danwebb.net
A peasant’s language
Web 2.0 has forced ‘real’ programmers to
master it
JavaScript-Fu is not easy to master
The web is awash with bad examples and
worse resources
Developers forced into refuge behind libraries
and frameworks
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!
TRANSLATED...
❖ Working with events
❖ Working with DOM elements
❖ Optimisation
❖ Testing and debugging
THE TAO OF THE EVENT HANDLER
The essence of browser scripting is defining
behaviour
Big differences in both browser implementation
and opinion
The main battle has always been in one
area...
INLINE VS SCRIPTED
INLINE EVENT HANDLERS
INLINE EVENT HANDLERS
Applied as soon as the browser loads the HTML
INLINE EVENT HANDLERS
But what happens when there is more than one....
Bad JavaScript-fu
SCRIPT-BASED EVENT HANDLERS
Attached after element has loaded
Very DRY
Separate JavaScript out in a similar way to CSS
Large numbers of event handlers choke browsers
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
EVENT BUBBLING
<a>
<p>
<div>
<body> handler
click
EVENT DELEGATION
BETTER INLINE HANDLERS
BETTER INLINE HANDLERS
5 METHODS OF DOM FIST
There are 5 methods for updating HTML
3 official methods (W3C)
$('kungfu').appendChild(node);
$('kungfu').insertBefore(node, child);
$('kungfu').replaceChild(node, child);
1 non-standard method (you guessed it, from IE)
DOM VS innerHTML
DOM METHODS
Insert elements with precision
But you need to create the nodes first...
ARGH!
LOWPRO’S DOM BUILDER
INNERHTML
Can shift large amount of HTML quickly...
...but you don't getmuch control
Incredibly simple to use with Ajax
WHICH WAY?
❖ No clear winner
❖ DOM is good for more surgical manipulation
❖ innerHTML is good for replacing large amounts of content or simple jobs
and the final method...
THE BASTARD SON
LIGHTNING SCRIPT STYLE
~134KB
5 HTTP requests
Takes time to download and evaluate script
The less JavaScript the better
Browsers normally only try to load 2 resources
concurrently
Combine .js files
Use GZIP compression not JS based minification
Make sure everything is cachable
FASTER LOOPS
FASTER LOOPS
BE CAREFUL WITH SELECTORS
THE 36 CHAMBERS OF SHAOLIN
You're going to needa few tools...
Buy a Mac
Parallels Workstation
PARALLELS WORKSTATION
Get Firebug
What about the other browsers?
And then there's testing...
SELENIUM
❖ Written by ThoughtWorks
❖ Implemented in HTML/CSS
❖ Test cases define a series of user actions (using HTML)
❖ Assertions check the correct results
LEARNING MORE
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/
QUESTIONS?