Crazy Hijax!

Clean up your code with smatterings of AJAX

Myles Eftos

MadPilot Productions

The holy trinity

…or the three stooges of web design

HTML — the eldest of the three. Gives structure to content
CSS — the baby. Makes everything look pretty
JavaScript — The black sheep. Provides browser side business logic

Hijax is about linking HTML and JavaScript

Keeping HTML & CSS a part is easy

So, you want to change the font size of text in a paragraph?

In the old days: Nyuck nyuck nyuck!
Then with styles: Nyuck nyuck nyuck!
But now with an external CSS files we can do: Nyuck nyuck nyuck! p { font-size: 120% }

Enter the selector

HTML allows us to apply IDs and class names to tags — and using CSS selectors allows us to manipulate them


					<div id="container">
						<p id="content" class="content">
							Piofect!
						</div>
					</div>


					#container p.content {
						font-face: bold;
					}

What about JavaScript?

We want to avoid this — it makes our html pages bigger, and it is ugly


					<a href="hello_world.html" onclick="alert('Hello World!'); return false;">Say Hello</a>

We want this:


					<a href="hello_world.html">Say Hello</a>

Let's revisit how CSS accomplishes this:

Include an external CSS file
Set the styles using selectors

The script tag lets us include a remote JS file, so we are half way there…

DOM the Christmas Donkey

Method #1 — DOM

Works on all browsers (well good browsers anyway)

HTML	CSS	JavaScript
`<div>Content</div>`	`div { color: #00F; }`	`document.getElementsByTagName('div');`
`<div id="myDiv">Content</div>`	`#myDiv { color: #00F; }`	`document.getElementById('myDiv');`
`<div class="myDiv">Content</div>`	`div.myDiv { color: #00F; }`	`document.getElementsByClassName('myDiv');^*`

* This method doesn't exist in HTML4 but looks like it'll end up in HTML5.

Some example goodness

This should add quotations around the text in all the blockquote tags


					var blockquotes = document.getElementsByTagName('blockquote');
					for(i = 0; i < blockquotes.length; i++) {
						var preQuote = document.createTextNode("&ldquo;");
						var postQuote = document.createTextNode("&rdquo;");
						blockquotes[i].insertBefore(preQuote, blockquotes[i].childNodes[0]);
						blockquotes[i].appendChild(postQuote);
					}

This set the class name of the paragraph with an id of “footer” to “green”


					var p = document.getElementById('footer');
					p.className = "green";

So slooooow

Walking the DOM tree is a slow exercise — especially on IE
Firefox and Opera 9 support XPath, makes finding nodes about 1000% faster!

HTML	XPath
`<div>Content</div>`	`document.evaluate("//div", document, null, XPathResult.ANY_TYPE, null);`
`<div id="myDiv">Content</div>`	`document.evaluate("//*[@id='myDiv']", document, null, XPathResult.ANY_TYPE, null);`
`<div class="myDiv">Content</div>`	`document.evaluate("//div[contains(@class, 'myDiv')]", document, null, XPathResult.ANY_TYPE, null);`

Note: All of these function return an Array, including the equivalent of document.getElementById()

Foiled by IE again! Almost…

IE doesn't support XPath. Phooey
IE CSS engine is about 4X faster than it‘s DOM engine. And supports JavaScript
Dirty hack ahead!


					var Selectors = {
						cache: {},
						store: function(selector, element) {
							this.cache[selector].push(element);
							element.runtimeStyle.behavior = "none";
						}
					}


					div.myDiv {
						behavior: expression(Selectors.store("div.myDiv", this));
					}

This only works during the loading phase of the page

Hijax

Hijax is a stupid name given to dynamically applying JavaScript events to Web pages.
JavaScript is event driven — onload, onmouseover, onkeypress
Hijax effectively “Hijacks” these actions


					function bind() {
					var element = document.getElementById('someAnchor');
					element.onclick = function() {
					alert('Bound!');
					}
					}

In a bind

All well and good, but we still need to run the bind() function
window.onload fires when the page has finished loading — delayed if there are images
Firefox & Opera 9 have a (undocumented) call back function: DOMContentLoaded
Internet Explorer has a spiffy little attribute to the script tag called defer
Safari had the document.readyState flag which we can poll

IE Hack #2


					// for Internet Explorer (using conditional comments)
					/*@cc_on @*/
					/*@if (@_win32)
					document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
					var script = document.getElementById("__ie_onload");
					script.onreadystatechange = function() {
						if (this.readyState == "complete") {
							bind(); // call the onload handler
						}
					};
					/*@end @*/

The defer function convieniently defers the execution of the supplied script until AFTER the DOM loads. Excellent!

Safari Hack #1


					if (/WebKit/i.test(navigator.userAgent)) { // sniff
						var _timer = setInterval(function() {
							if (/loaded|complete/.test(document.readyState)) {
								clearInterval(_timer);
								bind(); // call the onload handler
							}
						}, 10);
					}

This one just checks for the status of the document.readyState flag every 10 ms. Not great but works.

You know what? There are libraries for these sorts of things, out very own Andrew Tetlaw has a fine example: FastInit.

So what can we do?

Make improvements

Assume that the user doesn’t have JavaScript — use it to increase the user experience, not implement it
Good: check the strength of a password, display auto-complete list, auto-save a form, client-side validation
Bad: convert text link to submit (looking at you .NET), a replacement for server-side validation

Speed stuff up

By using XmlHttpRequest, you can make calls back to the server with out a refresh
Display error messages before (or rather whilst) they happen

Things to watch for

It's not all clam chowder

Accessing nodes by “walking the tree” — concrete implementations break when you least expect it
Not testing for null — JavaScript is fragile, and will usually stop running on errors
Not testing across browsers — each browser has it's own nuances. But you all know that.

The X Factor

Let's talk about AJAX
Suprised it wasn't on the top 10 most annoying web word list
Actually useful though
Based on the XmlHttpRequest function — we can thank Microsoft for this one
The flow:
1. Makes a request
2. Wait…
3. Process the response
4. Update the page

Lies!

The X part is a lie
Can return JSON, HTML or whatever
JSON parsing is faster (It's native)
HTML requires innerHTML — can be troublesome, both Firefox and IE bomb in certain situations

JSON and the argonauts

System for serialising and un-serialising JavaScript data
Parsed natively, so it is FAST
Very simple syntax


					var json = {
						id: 8,
						title: 'Object number 8',
						body: 'This is a serialised version of a JavaScript object',
						childIDs: [4, 6, 4, 7]
					};
					var instance = eval(json);

Some libraries

Behaviour

Allows you to reference nodes just like you would with CSS — via selectors.


					var rules = {
						'#navigation li' : function(element) {
							element.onclick = function() {
								alert('You clicked me!');
							}
						}
					};
					Behaviour.register(rules);

Makes applying rules super simple
Avoids concretitis

Some libraries

Wrapper libraries

Try to fix the discrepencies in browser implentations

Prototype
JQuery
Mootools

Some libraries

Visual effects

Make is easy to create animations and effects, such as drop and drag

script.aculo.us (Prototype based)
Moo.fx (Prototype or Mootools based)

window.unload = conclusion

Have you been paying attention?

Browser support sucks (CSS all over again)
Reusability
Cleaner markup

References

Behavioural Separation — Jeremy Keith
Executing JavaScript on page load — Simon Willison
Prototype JavaScript library — Sam Stephenson
Mootools — Valerio Proietti
Behaviour — Ben Nolan
script.aculo.us — Thomas Fuchs
The window.onload Problem - Solved! — Dean Edwards
Yet Another JavaScript Library Without Documentation — Dean Edwards

BarCamp Perth - 30 June 2007

Crazy Hijax!

Crazy Hijax!

Clean up your code with smatterings of AJAX

Myles Eftos

MadPilot Productions

The holy trinity

…or the three stooges of web design

Keeping HTML & CSS a part is easy

Enter the selector

What about JavaScript?

DOM the Christmas Donkey

Method #1 — DOM

Some example goodness

So slooooow

Foiled by IE again! Almost…

Hijax

In a bind

IE Hack #2

Safari Hack #1

So what can we do?

Make improvements

Speed stuff up

Things to watch for

It's not all clam chowder

The X Factor

Lies!

JSON and the argonauts

Some libraries

Behaviour

Some libraries

Wrapper libraries

Some libraries

Visual effects

window.unload = conclusion

Have you been paying attention?

References

Questions

Erm, questions?