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

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

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 <body> handler <div> <p> <a> click

EVENT DELEGATION

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 get much 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

BE CAREFUL WITH SELECTORS

THE 36 CHAMBERS OF SHAOLIN

You're going to need a 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?

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

2 comments

Notes on slide 1

10 Favorites