State of Ajax
Dion Almaer and Ben Galbraith
Co-founders, Ajaxian.com

“Google Suggest
and Google Maps are two
examples of a new approach
to web applications that we at
Adaptive Path have been calling
Ajax. The name is shorthand for
igne
r! Asynchronous JavaScript + XML,
Des
and it represents a fundamental
shift in what’s possible
on the Web.”
Jesse James Garrett
Co-founder, Adaptive Path

Compelling User Experience

Make Your User’s Happy

Managing Expectations

Top Grossing Film of 1957 Top Grossing Film of 2007

“Wow” Factor
Bertrand Serlet
Senior VP, Software
Apple, Inc.
WWDC 2006

First Wave of Ajax:
Making JavaScript Better
and Web App Development Suck Less

XHR

The Old Taxonomy
Prototype
dojo
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
Your Soup-to-Nuts Ajax/Javascript
Platform
jQuery
New, DOM-centric JavaScript helper

The New Taxonomy
Script.aculo.us jQuery UI dijit
Plug-in Community Plug-in Community Plug-in Community
scripteka.com plugins.jquery.com dojox
Prototype jQuery Dojo Core

<script type=\"text/javascript\">
function getCityByZip(zip) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
processResults(xhr);
}
xhr.open(\"GET\", \"/fun.endpoint?zip=\" + zip);
xhr.send(null);
}
function processResults(xhr) {
if (xhr.readyState == 4) {
var parent = document.getElementById(\"cityParent\");
parent.innerHTML = xhr.responseText;
}
}
</script>

Easy Remoting
<script type=\"text/javascript\">
function getCityByZip(zip) {
new Ajax.Request(\"/fun.endpoint?zip=\" + zip, {
method: \"get\",
onSuccess: function(xhr) {
$(\"city\").value = xhr.responseText;
}
});
}
</script>

CSS and Animations
dojo.query(\"#nav > .focusable\").
attr(\"tabIndex\", 0).
style(\"border\", \"1px solid transparent\").
anim({
\"borderColor\": { start: \"yellow\",
end: \"white\" }
});

DOM Goodness
$(document).bind(\"ready\", function() {
$(\"div\").bind(\"mousewheel\", function(event, delta) {
if (delta < 0) {
$(this).append(\"up\");
} else {
$(this).append(\"down\");
}
);
});

Dojo Charting
Dojo Grid
Processing.js

Second Wave of Ajax:
GUI Toolkits for the Web, or
The Browser as Universal Run-time

Mobile Me / SproutCore
280 Slides / Objective-J

Jef Raskin
Noted Usability Expert “ e quality of any [so ware] is
ultimately determined by the
quality of the interaction between
The Humane Interface one human and one system.”

“If a system’s one-on-one
Jef Raskin interaction with its human user is
Noted Usability Expert
not pleasant and facile, the
resulting de ciency will poison
The Humane Interface
the performance of the entire
system, however ne that system
might be in its other aspects.

User Interface
Visual Design
Interaction Design

Jakob Nielsen
Noted Usability Expert
“ e basic advice regarding
response times has been about the
same for thirty years:

“0.1 second is about the limit for
Jakob Nielsen
Noted Usability Expert having the user feel that the
system is reacting instantaneously,
meaning that no special feedback
is necessary except to display the
result.

Jakob Nielsen
Noted Usability Expert “1.0 second is about the limit for
the user's ow of thought to stay
uninterrupted, even though the
user will notice the delay.

Jakob Nielsen “Normally, no special feedback is
Noted Usability Expert
necessary during delays of more
than 0.1 but less than 1.0 second,
but the user does lose the feeling of
operating directly on the data.”

Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
tial
oten neck
P le
t
Bot
User Code Painting, etc.
“UI Thread”

1
“UI Thread”
User Interface
X 2
Background
Thread

Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
tial
oten neck
P le
t
Bot
JavaScript Web Browsing
Browser

1
Browser
User Interface
X
2
Background
Thread

“Most programmers should run
away crying [ om threading].
But they don't...
Brendan Eich
Inventor of JavaScript
CTO, Mozilla
“Instead, as with most other sharp
tools, the temptation is to show
how big one is by... tempting race-
condition fate... Occasionally the
Brendan’s Blog
results are infamous, but too
o en, with only virtual ngers
and limbs lost, no one learns.

“ reads violate abstractions six
ways to Sunday.
Brendan Eich
Inventor of JavaScript
CTO, Mozilla
“Mainly by creating race
conditions, deadlock hazards,
and pessimistic locking overhead.
Brendan’s Blog
“And still they don't scale up to
handle the megacore tera op
future.”

Brendan Eich
Inventor of JavaScript
CTO, Mozilla
“ reads suck.”
Brendan’s Blog

1
Browser
User Interface
2
Background
Thread

1
Browser
User Interface Message Passing
2 3
WorkerPool WorkerPool

1
Browser
User Interface Message Passing
3.1 ads”
fox thre
Fire ker
X
2
eb wor 3
“W
WorkerPool WorkerPool

“You just got another
email from your wife!”
Macintosh HD
32

Fluid
Gears Mozilla
Prism
Adobe AIR

Fluid
GreaseMonkey /
GreaseKit
37signals’
Campfire

HTML 5 Canvas

JavaScript Interpreter Native Canvas Implementation
Retains rendering
commands
Issues rendering
commands
Refreshes screen
via native APIs

?

?
Google Chrome’s V8 Safari’s SquirrelFish Firefox’s TraceMonkey IE?

Browser Java Plug-in
WiiApplet
JavaScript Dart
Game
WiiTracker
wiiusej
JNI
wiiuse library

The New Java Plug-in
Beta Shipping Today with Java 1.6 “Update 10”
1 Java plug-in now out-of-process
No more locking up the browser UI on launch
Applets can persist across browser sessions
More control over the Applet’s JVM
2 Improved Applet deployment
JavaScript-based “Deployment Toolkit”
Mature JNLP-based Applet metadata
3 A smaller JDK
Micro-kernel gives streamlined download option

Don't forget, RIA's have rich internet
back-ends! “RIBs”?

Amazon EC2
Elastic Compute Cloud
Google App Engine
Aptana Cloud

Your Application
Web Services

The Future?

The Breakdown of Modern Web Development

Safari CSS Animations

Safari CSS Reflections and Masks

HTML 5
<video>
<audio>
<canvas>
<time>
<progress>
<meter>
<menu>
<input type=\"email | date |
min | max | required\"... >
postMessage
Drag and drop
Ian (Hixie) Hickson
Standards Editor, Google Employee

Gears
Updating the Web...

Future
Present
A bl
edg eeding
e ve
of H rsion
TML
Past 5!
HTML 5 Gears
• Standards • Implementation
• Long term • Battle hardened
• A place for innovation
• All browsers • Cross browser
• No plugin • Plugin

+ =
Sophisticated Grid-based
Canvas
Layout

Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy Desktop
Remoting Integration
Easy
State-of-the-Art
Programming
Plug-ins
Model

Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy Desktop
Remoting Integration
Easy
State-of-the-Art
Programming
Plug-ins
Model