Post on 02-Nov-2014
description
State of AjaxEl futuro de las Apps Web
Dion AlmaerSeptember 25th, 2008
Dion Almaer
twitter.com/dalmaeralmaer.com
Dion Almaer
twitter.com/dalmaeralmaer.com
Dion Almaer
twitter.com/dalmaeralmaer.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!
Compelling User Experience
Jared LetoJared Leto
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.
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
Top Grossing Film of 1957 Top Grossing Film of 2007
First Wave of Ajax
Making JavaScript BetterSimple Effects
Responsiveness is the killer app
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.
<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");
}
);
});
Mobile Me / SproutCore
Mobile Me / SproutCore 280 Slides / Objective-J
Dojo Charting
Dojo Charting
Dojo Grid
Dojo Charting
Dojo Grid
Processing.js
JavaScript Interpreter Native Canvas Implementation
Issues renderingcommands
Refreshes screenvia native APIs
Retains renderingcommands
?
?
?
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
Don't forget, RIA's have rich internet back-ends (RIBs?)
Jonathan SchwartzCEO, Sun Microsystems
Web Services
Your Application
Web Services
Your Application
Web Services
Your Application
Web Services
Your Application
Web Services
Your Application
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
XHR
wiiuse library
JNI
wiiuse library
JNI
Java Plug-in
wiiuse library
JNI
Java Plug-in
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
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
CSS Animations
CSS Reflections and Masks
Google Chrome’s V8 Safari’s SquirrelFish
?IE?Firefox’s TraceMonkey
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!
<video><audio><canvas><time><progress><meter><menu><input type="email | date | min | max | required"... >postMessageDrag and drop
HTML 5
<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
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
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