Part 2 - Why Ajax? Why Now?

Alex Russell

OSCON

July 24th, 2007

Why Ajax? Why Now?
Definitions
Designing with Ajax
Ajax Patterns

Hitting the ceiling of HTML/CSS
UI as competitive differentiator
- Only makes sense at feature parity
- Similar to "speed" or "performance" in importance to end users
Complexity and cost
Avoids plugins

Complexity and cost
Browser quirks + upgrade cycles
JavaScript isn't a "normal" language
Is the Open Web evolving fast enough?

Early Prominent Ajax Apps Were in "Dead" Application Categories

UI Rarely "Right" The First Time

Design Is An Iterative Process

JJG defines it as using XHR+CSS+JS+DOM to "unblock" the user experience
Willingness to use browser to improve responsiveness
Less about technology, more about experience

Term has a life of its own
Definition is "mushy"
Much Focus on technology ignores user experience
Buzzword compliance checkbox

Improved responsiveness
Latency and bandwidth are limiting factors
Perceived lag is real lag

Ajax Can Reduce Latency By Making Actions Atomic

Improving Interactions Has Tremendous Value

Communicates what the system is and does
People who are paid to care about users
Interaction Design is a negotiation with system developers

Helps you better meet Interaction Design goals
System Model vs. User Model
Users expectations are the system

Borrowed from Jeff Veen:
- Discoverability
- Recoverability
- Context
- Feedback

Exploring Alternate Paths Faster Improves Discoverability

The CGI

#!/usr/bin/env python

import simplejson # download from the python cheeseshop
import sys, os, cgi, cgitb; cgitb.enable()

funcs = simplejson.load(open("funcnames.json"))
query = cgi.FieldStorage().getfirst("q", "")
result = [ key for key in funcs if key.startswith(query) ]
result.sort()
print """Content-Type: text/html\n\n"""
print simplejson.dumps(result)

Really! That's the whole thing!

The Client Side

var timer = null;
var lastq = null;
function startLiveSearch(query){
	if(timer){ clearTimeout(timer); }
	if(query == lastq){ return; }
	lastq = query;
	timer = setTimeout(function(){
		dojo.byId("status").innerHTML = "searching...";
		dojo.xhrGet( {
			url: "resources/funcnames.cgi",
			content: { q: query },
			handleAs: "json",
			load: function(data){
				dojo.byId("results").innerHTML = data.join("<br />");
				dojo.byId("status").innerHTML = "";
			}
		} );
	}, 200);
}

Recoverability Is Knowing That You Can Always "Go Back"

Special case of "undo"
Users already accept the pattern
- Most used UI element
Forms already recoverable, Ajax breaks this
Can't "hook into" the back button

Possible-ish, but hard
dojo.back
Brad Neuberg's "Really Simple History"
YUI

parent

children

Initial State

dojo.require("dojo.back");
dojo.back.init();
// initialize the "backstop" state to no-op's
// you could extend these to add "are you sure you want to go back"-style messages
dojo.back.setInitialState({ 
	back: function(){}, 
	forward: function(){}
});

Adding New State

function selectFuncItem(value, skipBack){
	var args = {
		url: "resources/funcnames.cgi", 
		content: { q: value }, 
		handleAs: "json",
		load: function(data){ populateOptionList("childList", data); },
	};
	var tmp = ""+lastSelectedValue;
	if(!skipBack){

		bindArgs.changeUrl = true; // create a new bookmarkable hash

		bindArgs.backButton = function(){ // respond to the back-button click
			if(tmp == ""){
				var cl = dojo.byId("childList");
				while(cl.firstChild){ cl.removeChild(cl.firstChild); }
			}else{
				selectFuncItem(tmp, true);
			}
		};

	}
	dojo.xhrGet(bindArgs);
	lastSelectedValue = value;
}

JavaScript can help users know "where" they are in data or in a process
Contextual information increases the utility of the interface
Provides points of comparison for important data
Not strictly "Ajax"

Pulling in all the data up front can be too expensive
Hierarchy can be navigation for many forms of data

The CGI

#!/usr/bin/env python

from lxml import etree
import simplejson, sys, os, cgi, cgitb; cgitb.enable()

nidStr = "{http://www.hyperscope.org/hyperscope/opml/public/2006/05/09}nid"
augEtree = etree.parse(open("augmentinghumanintellect.opml"))
query = cgi.FieldStorage().getfirst("q", "")

if len(query):
	nodes = [ child for child in augEtree.xpath("//outline") if child.attrib[nidStr] == query ]
else:
	nodes = augEtree.xpath("//body/outline")

result = []
for node in nodes:
	result.append({
		"text": node.attrib["text"], 
		"id": node.attrib[nidStr],
		"children": [ child.attrib[nidStr] for child in node ]
	})

print """Content-Type: text/html\n\n"""
print simplejson.dumps(result)

The Client Side

var chunks = {};
function getChunks(parent, pid){
	var cids = (chunks[pid] ? chunks[pid].children : [""]);
	dojo.forEach(cids, function(cid){ getChild(parent, cid); });
}

function getChild(parent, cid){
	dojo.xhrGet({
		url: "resources/augment.cgi",
		content: { q: cid||"" },
		handleAs: "json",
		load: function(data){
			dojo.forEach(data, function(item){
				if(chunks[item.id]){ return; }
				chunks[item.id] = item;
				var ctr = document.createElement("div");
				ctr.style.paddingLeft = "20px";
				parent.appendChild(ctr);
				ctr.innerHTML = "<p onclick='getChunks(this, \""+item.id+"\");'>"+item.text+"</p>";
			});
		}
	});
}

...um...well...
Ajax can actually hurt!
We're replacing an accepted state transition
Need to draw attention to new data and ease state changes
Ajax can help if system is Discoverable and Recoverable
"What happens when I start mashing buttons?"

Fades
Grow/Shrink
Wipe-in/Wipe-out
In-progress indication

dojo.require("dojo.fx");

function getAndFade(node, url){
	node = dojo.byId(node);
	dojo.xhrGet({
		url: url,
		load: function(type, data, obj){
			var fadeAnim  = dojo.fadeOut(node, 500);
			fo.connect("onEnd", function(){ node.innerHTML = data; });
			dojo.fx.chain(
				fadeAnim, dojo.fadeIn(node, 500)
			).play(100); // simulate a little lag
		}
	});
}

"By "augmenting human intellect" we mean increasing the capability of a man to approach a complex problem situation, to gain comprehension to suit his particular needs, and to derive solutions to problems. Increased capability in this respect is taken to mean a mixture of the following: more-rapid comprehension, better comprehension, the possibility of gaining a useful degree of comprehension in a situation that previously was too complex, speedier solutions, better solutions, and the possibility of finding solutions to problems that before seemed insoluble. And by "complex situations" we include the professional problems of diplomats, executives, social scientists, life scientists, physical scientists, attorneys, designers--whether the problem situation exists for twenty minutes or twenty years. We do not speak of isolated clever tricks that help in particular situations. We refer to a way of life in an integrated domain where hunches, cut-and-try, intangibles, and the human "feel for a situation" usefully co-exist with powerful concepts, streamlined terminology and notation, sophisticated methods, and high-powered electronic aids."

Yahoo Patterns Library
Ajaxpatterns.org
No definitive HIG's published yet