At various Google Developer Day events in Europe I gave a talk on the State of Ajax, that focuses on the core issue of User Experience and where to go from here.

2. State of Ajax
El futuro de las Apps Web
Dion Almaer
September 25th, 2008

3. Dion Almaer
twitter.com/dalmaer
almaer.com

4. Dion Almaer
twitter.com/dalmaer
almaer.com

5. Dion Almaer
twitter.com/dalmaer
almaer.com

19. “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
Asynchronous JavaScript + XML,
and it represents a fundamental
shift in what’s possible
on the Web.”
Jesse James Garrett
Co-founder, Adaptive Path

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

23. Compelling User Experience

31. Jared Leto Jared Leto

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

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

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

37. User Interface
Visual Design
Interaction Design

38. User Interface
Visual Design
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis

39. User Interface
HCI researchers are nerds!
Visual Design
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis

40. User Interface
HCI researchers are nerds!
Visual Design
Emacs!
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis

41. User Interface
HCI researchers are nerds!
Visual Design
vi!
Emacs!
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis

42. User Interface
HCI researchers are nerds!
Visual Design
!
M icrosoft Rulez vi!
Emacs!
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis

43. User Interface
HCI researchers are nerds!
Visual Design
!
M icrosoft Rulez vi!
Rea l programmers Emacs!
use C++
Interaction Design
e
r interfaces” ar
“ eductive use tractions!
S
vacuous dis

45. The Web didn’t used to be a beautiful place...

49. Top Grossing Film of 1957 Top Grossing Film of 2007

50. Top Grossing Film of 1957 Top Grossing Film of 2007

53. First Wave of Ajax
Making JavaScript Better
Simple Effects
Responsiveness is the killer app

57. 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; }
});

63. Jakob Nielsen
Noted Usability Expert

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

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

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

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

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

70. XHR

71. XHR

73. The Old Taxonomy

74. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers

75. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.

76. The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
jQuery
New, DOM-centric JavaScript helper

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

78. The New Taxonomy

79. The New Taxonomy
Prototype jQuery Dojo Core

80. The New Taxonomy
Plug-in Community Plug-in Community Plug-in Community
scripteka.com plugins.jquery.com dojox
Prototype jQuery Dojo Core

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

82. 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;);
}
);
});

84. Mobile Me / SproutCore

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

87. Dojo Charting

88. Dojo Charting
Dojo Grid

89. Dojo Charting
Dojo Grid
Processing.js

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

92. ?

93. ?

94. ?

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

97. Browser

98. Operating System
Event Queue
Browser

99. Operating System
Event Queue
Browser

100. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser

101. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser

102. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
Browser

103. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript
Browser

104. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript
Browser

105. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
JavaScript Web Browsing
Browser

106. Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Operating System Key Released
Event Queue
l
e ntia k
Pot lenec
B ott
JavaScript Web Browsing
Browser

107. 1
Browser
User Interface
2
Background
Thread

108. 1
Browser
User Interface
X
2
Background
Thread

110. Brendan Eich
Inventor of JavaScript
CTO, Mozilla
Brendan’s Blog

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

112. 1
Browser
User Interface
X
2
Background
Thread

113. 1
Browser
User Interface
2
Background
Thread

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

115. Jef Raskin “If [a] feature is well–designed,
Noted Usability Expert
and if we use it repeatedly, we
eventually... use the feature
The Humane Interface
habitually, without thought or
conscious e ort.

116. “In operating an interface we
combine or ‘chunk’ sequences of
actions into gestures, which, once
Jef Raskin
Noted Usability Expert started, proceed automatically.
Because we form gestures,
techniques such as having a user
The Humane Interface respond Y or N to an ‘Are you
sure?’ veri cation do not provide
safety: e typed ‘Y’ becomes
part of the gesture.”

117. Prefer Undo to Warning Dialogs

118. h at on the Web?
Err, h ow do you do t
Prefer Undo to Warning Dialogs

119. h at on the Web?
Err, h ow do you do t
Prefer Undo to Warning Dialogs
e
...and, uh, ho w do you handl
transactions?

120. Form History

121. Some Business Form
First Name: Some Value Foo: Some Value
Last Name: Some Value Gawuzzit: Some Value
Address Line 1: Some Value Lugnutzwit: Some Value
Address Line 2: Some Value Cookie Monster: Some Value
City: Some Value
State: Some Value
Zip: Some Value
ent
res st
P Pa
Form History:

122. Some Business Form
First Name: Some Value Foo: Some Value
History Value Here History Value Here
Last Name: Some Value Gawuzzit: Some Value
History Value Here History Value Here
Address Line 1: Some Value Lugnutzwit: Some Value
History Value Here History Value Here
Address Line 2: Some Value Cookie Monster: Some Value
History Value Here History Value Here
City: Some Value
History Value Here
State: Some Value
History Value Here
Zip: Some Value
History Value Here
go
ent k sa
e t
P res 2 we Pa
s
Form History:

124. Don't forget, RIA's have rich
internet back-ends (RIBs?)
Jonathan Schwartz
CEO, Sun Microsystems

125. Your Application
Web Services

126. Your Application
Web Services

127. Your Application
Web Services

128. Your Application
Web Services

129. Your Application
Web Services

130. Macintosh HD

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

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

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

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

135. Fluid
Gears Mozilla
Prism
Adobe AIR

136. XHR

141. JNI
wiiuse library

142. Java Plug-in
JNI
wiiuse library

143. Java Plug-in
wiiusej
JNI
wiiuse library

144. Java Plug-in
WiiTracker
wiiusej
JNI
wiiuse library

145. Java Plug-in
WiiApplet
WiiTracker
wiiusej
JNI
wiiuse library

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

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

148. The Future?

149. The Breakdown of Modern Web Development

150. CSS Animations

151. CSS Reflections and Masks

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

153. Mozilla’s Monkeys?

157. Gears
Updating the Web...

158. Future
Present
Ab
leed
edg ing
vers e
of H ion
Past TML
5!
HTML 5 Gears
• Standards • Implementation
• Long term • Battle hardened
• A place for innovation
• All browsers • Cross browser
• No plugin • Plugin

159. HTML 5
<video>
<audio>
<canvas>
<time>
<progress>
<meter>
<menu>
<input type=quot;email | date
| min | max | requiredquot;...
>
postMessage
Drag and drop

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

162. Ajax

163. Ajax
Easy
Programming
Model

164. Ajax
Easy
Remoting
Easy
Programming
Model

165. Extensive
Customization
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model

166. Easy
Deployment
Extensive
Customization
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model

167. Great
Widgets
Easy
Deployment
Extensive
Customization
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model

168. Great
Widgets
Easy Great
Deployment FX
Extensive
Customization
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model

169. Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy
Remoting
Easy
Programming
Model

170. Great
Widgets
Easy Great
Deployment FX
Extensive
Great Mobile
Customization
Story
Vectors
Ajax
Easy Desktop
Remoting Integration
Easy
Programming
Model

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

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

176. Learn more
http://code.google.com/