Published on May 22, 2007
A peasant’s language
Web 2.0 has forced ‘real’ programmers to master it
The web is awash with bad examples and worse resources
Developers forced into refuge behind libraries and frameworks
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....
SCRIPT-BASED EVENT HANDLERS
Attached after element has loaded
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
BETTER INLINE HANDLERS
BETTER INLINE HANDLERS
5 METHODS OF DOM FIST
There are 5 methods for updating HTML
3 official methods (W3C)
1 non-standard method (you guessed it, from IE)
DOM VS innerHTML
Insert elements with precision
But you need to create the nodes first...
LOWPRO’S DOM BUILDER
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
5 HTTP requests
Takes time to download and evaluate script
Browser normally only try to load 2 resources concurrently
Combine .js files
Use GZIP compression not JS based minification
Make sure everything is cachable
BE CAREFUL WITH SELECTORS
IRON AJAX TECHNIQUE
RULE #1: BROWSERS SUCK
Main browsers are getting better quickly
But what about the others?
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
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 ❖
ZoomInfo Community Edition; ZoomInfo Connect; ZoomInfo API; ZoomInfo for Salesforce; Pricing; Pricing; About. Our Company; ... RailsConf, and The Ajax ...