View
12.212
Download
0
Category
Tags:
Preview:
DESCRIPTION
Dan Webb's 'The Mysteries Of JavaScript-Fu' as presented at RailsConf 2007.
Citation preview
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
<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
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
FASTER LOOPS
BE CAREFUL WITH SELECTORS
IRON AJAXTECHNIQUE
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
Controller
action.rhtml
_partial.rhtml
respond_to :html
render :partial
POST
IRON AJAX
Controller
action.rhtml
_partial.rhtml
respond_to :html
render :partial
POST
Ajax POST
respond_to :js
IRON AJAX
Controller
action.rhtml
action.rjs
respond_to :html
render :partial
POST
Ajax POST
respond_to :js
THE HTML
THE HTML
THE JAVASCRIPT
THE CONTROLLER
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?
Recommended