state of ajax zend con 08
DESCRIPTION
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.TRANSCRIPT
State of AjaxDion Almaer and Ben GalbraithCo-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 callingAjax. 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!
Compelling User Experience
Make Your User’s Happy
ExpectationsManaging
Top Grossing Film of 1957 Top Grossing Film of 2007
Bertrand SerletSenior VP, Software
Apple, Inc.
“Wow” Factor
WWDC 2006
First Wave of Ajax:Making JavaScript Better
and Web App Development Suck Less
XHR
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
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
<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 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
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.”
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
“UI Thread”
User Code Painting, etc.
Potential
Bottleneck
“UI Thread”
User Interface
1
BackgroundThread
2X
Operating System
Event Queue
Mouse Moved
Mouse Pressed
Mouse Released
Key Pressed
Key Released
JavaScript Web Browsing
Potential
Bottleneck
Browser
User Interface
BackgroundThread
2X
Browser
1
Brendan EichInventor of JavaScript
CTO, Mozilla
“Most programmers should run away crying [%om threading]. But they don't...
“Instead, as with most other sharp tools, the temptation is to show how big one is by... tempting race-condition fate... Occasionally the results are infamous, but too o"en, with only virtual #ngers and limbs lost, no one learns.
Brendan’s Blog
Brendan EichInventor of JavaScript
CTO, Mozilla
“!reads violate abstractions six ways to Sunday.
“Mainly by creating race conditions, deadlock hazards, and pessimistic locking overhead.
“And still they don't scale up to handle the megacore tera$op future.”
Brendan’s Blog
Brendan EichInventor of JavaScript
CTO, Mozilla
“!reads suck.”
Brendan’s Blog
User Interface
BackgroundThread
2
Browser
1
User Interface
WorkerPool
Browser
1
WorkerPool
2 3
Message Passing
User Interface
WorkerPool
Browser
1
WorkerPool
2 3
Message Passing
XFirefo
x 3.1
“Web worker threa
ds”
Macintosh HD
“You just got another email from your wife!”
32
Fluid
MozillaPrism
Adobe AIR
Gears
Fluid
37signals’Campfire
GreaseMonkey /GreaseKit
HTML 5 Canvas
JavaScript Interpreter Native Canvas Implementation
Issues renderingcommands
Refreshes screenvia native APIs
Retains renderingcommands
?
Google Chrome’s V8 Safari’s SquirrelFish
?IE?Firefox’s TraceMonkey
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
Don't forget, RIA's have rich internet back-ends! “RIBs”?
Amazon EC2Elastic Compute Cloud
Google App Engine
Aptana Cloud
Web Services
Your Application
The Future?
The Breakdown of Modern Web Development
Safari CSS Animations
Safari CSS Reflections and Masks
<video><audio><canvas><time><progress><meter><menu><input type="email | date | min | max | required"... >postMessageDrag and drop
HTML 5
Ian (Hixie) HicksonStandards Editor, Google Employee
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!
+ =
Canvas Sophisticated Grid-basedLayout
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
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