google i/o state of ajax
DESCRIPTION
Ben and I gave a talk on the state of Ajax at Google I/O.TRANSCRIPT
State of Ajax
Dion Almaer, GoogleBen Galbraith, Mediabank
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 Asynchronous JavaScript + XML, and it represents a fundamental
shift in what’s possible on the Web.”
Jesse James GarrettCo-founder, Adaptive Path
“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 GarrettCo-founder, Adaptive Path
Designer!
Great User ExperienceGreat Developer Experience
Great User ExperienceGreat Developer Experience
Jef RaskinNoted Usability Expert
The Humane Interface
“!e quality of any [so"ware] is ultimately determined by the quality of the interaction between one human and one system.”
Jef RaskinNoted Usability Expert
The Humane Interface
“If a system’s one-on-one interaction with its human user is 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.
User Interface
Visual Design
Interaction Design
User Interface
Visual Design
Interaction Design
“Seductive user interfaces” are
vacuous distractions!
User Interface
Visual Design
Interaction Design
“Seductive user interfaces” are
vacuous distractions!
HCI researchers are nerds!
User Interface
Visual Design
Interaction Design
“Seductive user interfaces” are
vacuous distractions!
HCI researchers are nerds!
Emacs!
User Interface
Visual Design
Interaction Design
“Seductive user interfaces” are
vacuous distractions!
HCI researchers are nerds!
Emacs!
vi!
User Interface
Visual Design
Interaction Design
“Seductive user interfaces” are
vacuous distractions!
HCI researchers are nerds!
Emacs!
vi!Microsoft Rulez!
User Interface
Visual Design
Interaction Design
“Seductive user interfaces” are
vacuous distractions!
HCI researchers are nerds!
Emacs!
vi!Microsoft Rulez!
Real programmers use C++
The Web didn’t used to be a beautiful place...
Top Grossing Film of 1957 Top Grossing Film of 2007
CSS and Animations
dojo.query("#nav > .focusable").
attr("tabIndex", 0).
style("border", "1px solid transparent").
anim({
"borderColor": { start: "yellow",
end: "white" }
});
Jakob NielsenNoted Usability Expert
Jakob NielsenNoted Usability Expert
“!e basic advice regarding response times has been about the same for thirty years:
Jakob NielsenNoted Usability Expert
“0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
Jakob NielsenNoted 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 NielsenNoted Usability Expert
“Normally, no special feedback is 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.”
<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>
XHR
XHR
The Old Taxonomy
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
The Old Taxonomy
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
jQueryNew, DOM-centric JavaScript helper
The Old Taxonomy
dojoYour Soup-to-Nuts Ajax/Javascript
Platform
PrototypeLightweight Ajax/JavaScript helpers
GWTHate JavaScript? No problem, use Java.
jQueryNew, DOM-centric JavaScript helper
The New Taxonomy
Prototype jQuery Dojo Core
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Communityscripteka.com
Plug-in Communityplugins.jquery.com
Plug-in Communitydojox
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Communityscripteka.com
Plug-in Communityplugins.jquery.com
Plug-in Communitydojox
Script.aculo.us jQuery UI dijit
The New Taxonomy
DOM Goodness
$(document).bind("ready", function() {
$("div").bind("mousewheel", function(event, delta) {
if (delta < 0) {
$(this).append("up");
} else {
$(this).append("down");
}
);
});
GWT Panels
String html = "<div id='one' "
+ "style='border:3px dotted blue;'>"
+ "</div><div id='two' "
+ "style='border:3px dotted green;'"
+ "></div>";
HTMLPanel panel = new HTMLPanel(html);
panel.setSize("200px", "120px");
panel.addStyleName("demo-panel");
panel.add(new Button("Do Nothing"), "one");
panel.add(new TextBox(), "two");
RootPanel.get("demo").add(panel);
Dojo Charting
Dojo Charting
Dojo Grid
Dojo Charting
Dojo Grid
Processing.js
Jakob NielsenNoted Usability Expert
“0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
Browser
Operating System
Event Queue
Browser
Operating System
Event Queue
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript Web Browsing
Browser
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript Web Browsing
Potential
Bottleneck
Browser
User Interface
BackgroundThread
2
Browser
1
User Interface
BackgroundThread
2X
Browser
1
Brendan EichInventor of JavaScript
CTO, Mozilla
Brendan’s Blog
Brendan EichInventor of JavaScript
CTO, Mozilla
“!reads suck.”
Brendan’s Blog
User Interface
BackgroundThread
2X
Browser
1
User Interface
BackgroundThread
2
Browser
1
User Interface
WorkerPool
Browser
1
WorkerPool
2 3
Message Passing
Jef RaskinNoted Usability Expert
The Humane Interface
“If [a] feature is well–designed, and if we use it repeatedly, we eventually... use the feature habitually, without thought or conscious e%ort.
Jef RaskinNoted Usability Expert
The Humane Interface
“In operating an interface we combine or ‘chunk’ sequences of actions into gestures, which, once started, proceed automatically. Because we form gestures, techniques such as having a user respond Y or N to an ‘Are you sure?’ veri#cation do not provide safety: !e typed ‘Y’ becomes part of the gesture.”
Prefer Undo to Warning Dialogs
Prefer Undo to Warning DialogsErr, how do you do that on the Web?
Prefer Undo to Warning DialogsErr, how do you do that on the Web?
...and, uh, how do you handle transactions?
Form History
Some Business Form
First Name:
Last Name:
Address Line 1:
Address Line 2:
City:
State:
Zip:
Foo:
Gawuzzit:
Lugnutzwit:
Cookie Monster:
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Form History:
PresentPast
Some Business Form
First Name:
Last Name:
Address Line 1:
Address Line 2:
City:
State:
Zip:
Foo:
Gawuzzit:
Lugnutzwit:
Cookie Monster:
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Some Value
Form History:
Present2 weeks ago
Past
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
History Value Here
Web Services
Your Application
Web Services
Your Application
Web Services
Your Application
Web Services
Your Application
Web Services
Your Application
Amazon EC2Elastic Compute Cloud
Amazon EC2Elastic Compute Cloud
Amazon EC2Elastic Compute Cloud
Google App Engine
Amazon EC2Elastic Compute Cloud
Google App Engine
Aptana Cloud
Macintosh HD
Macintosh HD
“You just got another email from your wife!”
Macintosh HD
“You just got another email from your wife!”
32
Macintosh HD
“You just got another email from your wife!”
32
Macintosh HD
“You just got another email from your wife!”
32
Fluid
MozillaPrism
Adobe AIR
Gears
Fluid
Gears
Fluid
37signals’Campfire
Fluid
37signals’Campfire
GreaseMonkey /GreaseKit
XHR
wiiuse library
wiiuse library
JNI
wiiuse library
JNI
Java Plug-in
wiiuse library
JNI
Java Plug-in
wiiusej
wiiuse library
JNI
Java Plug-in
wiiusej
wiiuse library
JNI
Java Plug-in
WiiTracker
wiiusej
wiiuse library
JNI
Java Plug-in
WiiTracker
wiiusej
wiiuse library
JNI
Java Plug-in
WiiTracker
wiiusej
WiiApplet
wiiuse library
JNI
Java Plug-in
WiiTracker
wiiusej
WiiApplet
wiiuse library
JNI
Java Plug-in
WiiTracker
Browser
wiiusej
WiiApplet
wiiuse library
JNI
Java Plug-in
WiiTracker
Browser
JavaScript Dart Game
wiiusej
WiiApplet
The New Java Plug-inBeta Shipping Today with Java 1.6 “Update 10”
1 Java plug-in now out-of-processNo more locking up the browser UI on launchApplets can persist across browser sessionsMore control over the Applet’s JVM
2 Improved Applet deploymentJavaScript-based “Deployment Toolkit”Mature JNLP-based Applet metadata
3 A smaller JDKMicro-kernel gives streamlined download option
The Future?
The Breakdown of Modern Web Development
Safari CSS Animations
Safari CSS Reflections and Masks
Mozilla’s Monkeys?
Updating the Web...
Gears
HTML 5 Gears
• Standards• Long term• All browsers• No plugin
• Implementation• Battle hardened• A place for innovation• Cross browser• Plugin
Past
Present
Future
A bleeding edge version of HTML 5!
Ajax
Ajax
Easy Programming
Model
Ajax
Easy Programming
Model
Easy Remoting
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Easy Deployment
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Great Widgets
Easy Deployment
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Great Widgets
Easy Deployment
Great FX
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Great Widgets
Easy Deployment
Great Mobile Story
Great FX
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Great Widgets
Easy Deployment
Great Mobile Story
Desktop Integration
Great FX
Ajax
Easy Programming
Model
Easy Remoting
Extensive Customization
Vectors
Great Widgets
Easy Deployment
Great Mobile Story
Desktop Integration
State-of-the-Art Plug-ins
Great FX
