The Mysteries Of JavaScript-Fu (RailsConf Ediition)

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

“Ah, JavaScript, the language we all love to hate” Geoffrey Grosenbach, Peepcode

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! ❖ Lighting Script Style! ❖ Iron Ajax Technique! ❖

TRANSLATED... Working with events ❖ Working with DOM elements ❖ Optimisation ❖ Progressive enhancement ❖

THE TAO OF THE EVENT HANDLER

The essence of browser scripting is defining behavior

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

LIGHTENING SCRIPT STYLE

~134KB

5 HTTP requests

Takes time to download and evaluate script

The less JavaScript the better

Browser 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

IRON AJAX TECHNIQUE

RULE #1: BROWSERS SUCK

Main browsers are getting better quickly

But what about the others?

Corporate security and firewalls often block JavaScript

The traditional answer from Rails:

But why turn users away if you don’t have to?

PROGRESSIVE ENHANCEMENT 1. Start with a working plain HTML app 2. Test if necessary browser features are there (XMLHttpRequest, canvas etc) 3. If present then apply extra JS powered features to the UI

It's easy to apply this to Ajax

IRON AJAX action.rhtml respond_to :html POST Controller render :partial _partial.rhtml

IRON AJAX action.rhtml respond_to :html POST Controller render :partial Ajax POST respond_to :js _partial.rhtml

IRON AJAX action.rhtml respond_to :html POST Controller render :partial Ajax POST respond_to :js action.rjs

THE HTML

THE JAVASCRIPT

THE CONTROLLER

Easy

I know what you’re thinking

But it won’t work if...

Try progressive enhancement first

LEARNING MORE Dan Webb: http://www.danwebb.net ❖ Low Pro: http://www.danwebb.net/lowpro ❖

LEARNING MORE

QUESTIONS?

The Mysteries Of JavaScript-Fu (RailsConf Ediition)

0 comments

Notes on slide 1

2 Favorites & 1 Group