Presentation given at ZendCon 08 and Web 2.0 Expo NYC 2008 by Ben Galbraith and Dion Almaer. The presentation includes a lot of embedded videos and transitions and the slides are meant to support a spoken narrative, not replace it. Still, these are provided by request and I hope they'll be of help.

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

10. “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

11. Compelling User Experience

12. Make Your User’s Happy

14. Managing Expectations

16. Top Grossing Film of 1957 Top Grossing Film of 2007

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

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

25. XHR

26. 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

27. 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

28. <script type=quot;text/javascriptquot;>
function getCityByZip(zip) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
processResults(xhr);
}
xhr.open(quot;GETquot;, quot;/fun.endpoint?zip=quot; + zip);
xhr.send(null);
}
function processResults(xhr) {
if (xhr.readyState == 4) {
var parent = document.getElementById(quot;cityParentquot;);
parent.innerHTML = xhr.responseText;
}
}
</script>

29. Easy Remoting
<script type=quot;text/javascriptquot;>
function getCityByZip(zip) {
new Ajax.Request(quot;/fun.endpoint?zip=quot; + zip, {
method: quot;getquot;,
onSuccess: function(xhr) {
$(quot;cityquot;).value = xhr.responseText;
}
});
}
</script>

30. CSS and Animations
dojo.query(quot;#nav > .focusablequot;).
attr(quot;tabIndexquot;, 0).
style(quot;borderquot;, quot;1px solid transparentquot;).
anim({
quot;borderColorquot;: { start: quot;yellowquot;,
end: quot;whitequot; }
});

31. DOM Goodness
$(document).bind(quot;readyquot;, function() {
$(quot;divquot;).bind(quot;mousewheelquot;, function(event, delta) {
if (delta < 0) {
$(this).append(quot;upquot;);
} else {
$(this).append(quot;downquot;);
}
);
});

32. Dojo Charting
Dojo Grid
Processing.js

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

36. Mobile Me / SproutCore
280 Slides / Objective-J

38. 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.”

39. “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.

43. User Interface
Visual Design
Interaction Design

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

45. “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.

46. 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.

47. 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.”

49. 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”

50. 1
“UI Thread”
User Interface
X 2
Background
Thread

51. 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

52. 1
Browser
User Interface
X
2
Background
Thread

53. “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.

54. “ 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.”

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

56. 1
Browser
User Interface
2
Background
Thread

57. 1
Browser
User Interface Message Passing
2 3
WorkerPool WorkerPool

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

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

60. Fluid
Gears Mozilla
Prism
Adobe AIR

61. Fluid
GreaseMonkey /
GreaseKit
37signals’
Campfire

63. HTML 5 Canvas

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

66. ?

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

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

73. 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

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

76. Amazon EC2
Elastic Compute Cloud
Google App Engine
Aptana Cloud

77. Your Application
Web Services

78. The Future?

79. The Breakdown of Modern Web Development

80. Safari CSS Animations

81. Safari CSS Reflections and Masks

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

83. Gears
Updating the Web...

84. 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

85. + =
Sophisticated Grid-based
Canvas
Layout

86. 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

87. 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