SlideShare a Scribd company logo
1 of 165
Download to read offline
State of Ajax
Dion Almaer, Google
Ben 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 Garrett
Co-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 Garrett
Co-founder, Adaptive Path
Designer!
Great User ExperienceGreat Developer Experience
Great User Experience
Great Developer Experience
Jef Raskin
Noted Usability Expert
The Humane Interface
“The quality of any [software] is
ultimately determined by the
quality of the interaction between
one human and one system.”
Jef Raskin
Noted Usability Expert
The Humane Interface
“If a system’s one-on-one
interaction with its human user is
not pleasant and facile, the
resulting deficiency will poison
the performance of the entire
system, however fine 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 Nielsen
Noted Usability Expert
Jakob Nielsen
Noted Usability Expert
“The basic advice regarding
response times has been about the
same for thirty years:
Jakob Nielsen
Noted 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 Nielsen
Noted Usability Expert “1.0 second is about the limit for
the user's flow of thought to stay
uninterrupted, even though the
user will notice the delay.
Jakob Nielsen
Noted 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
Prototype
Lightweight Ajax/JavaScript helpers
The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
The Old Taxonomy
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
jQuery
New, DOM-centric JavaScript helper
The Old Taxonomy
dojoYour Soup-to-Nuts Ajax/Javascript
Platform
Prototype
Lightweight Ajax/JavaScript helpers
GWT
Hate JavaScript? No problem, use Java.
jQuery
New, DOM-centric JavaScript helper
The New Taxonomy
Prototype jQuery Dojo Core
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Community
scripteka.com
Plug-in Community
plugins.jquery.com
Plug-in Community
dojox
The New Taxonomy
Prototype jQuery Dojo Core
Plug-in Community
scripteka.com
Plug-in Community
plugins.jquery.com
Plug-in Community
dojox
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 Nielsen
Noted 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
Background
Thread
2
Browser
1
User Interface
Background
Thread
2
X
Browser
1
Brendan Eich
Inventor of JavaScript
CTO, Mozilla
Brendan’s Blog
Brendan Eich
Inventor of JavaScript
CTO, Mozilla
“Threads suck.”
Brendan’s Blog
User Interface
Background
Thread
2
X
Browser
1
User Interface
Background
Thread
2
Browser
1
User Interface
WorkerPool
Browser
1
WorkerPool
2 3
Message Passing
Jef Raskin
Noted 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 effort.
Jef Raskin
Noted 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?’ verification do not provide
safety: The typed ‘Y’ becomes
part of the gesture.”
Prefer Undo to Warning Dialogs
Prefer Undo to Warning Dialogs
Err, how do you do that on the Web?
Prefer Undo to Warning Dialogs
Err, 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:
Present
Past
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:
Present
2 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 EC2
Elastic Compute Cloud
Amazon EC2
Elastic Compute Cloud
Amazon EC2
Elastic Compute Cloud
Google App Engine
Amazon EC2
Elastic 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
Mozilla
Prism
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-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
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 bleedingedgeversionof 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
Google I/O State Of Ajax
Google I/O State Of Ajax

More Related Content

Similar to Google I/O State Of Ajax

JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Simon Willison
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
Mark Fayngersh
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 
CHOReOS Web Services FISL Conference Brazil 2012
CHOReOS Web Services FISL Conference Brazil 2012CHOReOS Web Services FISL Conference Brazil 2012
CHOReOS Web Services FISL Conference Brazil 2012
choreos
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
virtualsciences41
 

Similar to Google I/O State Of Ajax (20)

State Of Ajax Zend Con 08
State Of Ajax   Zend Con 08State Of Ajax   Zend Con 08
State Of Ajax Zend Con 08
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big PictureJavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
 
Engineering Velocity @indeed eng presented on Sept 24 2014 at Beyond Agile
Engineering Velocity @indeed eng presented on Sept 24 2014 at Beyond AgileEngineering Velocity @indeed eng presented on Sept 24 2014 at Beyond Agile
Engineering Velocity @indeed eng presented on Sept 24 2014 at Beyond Agile
 
Yeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web appsYeoman AngularJS and D3 - A solid stack for web apps
Yeoman AngularJS and D3 - A solid stack for web apps
 
Building a game engine with jQuery
Building a game engine with jQueryBuilding a game engine with jQuery
Building a game engine with jQuery
 
Progressive Enhancement for JavaScript Apps
Progressive Enhancement for JavaScript AppsProgressive Enhancement for JavaScript Apps
Progressive Enhancement for JavaScript Apps
 
jQuery State of the Union - Yehuda Katz
jQuery State of the Union - Yehuda KatzjQuery State of the Union - Yehuda Katz
jQuery State of the Union - Yehuda Katz
 
The State of Front-end At CrowdTwist
The State of Front-end At CrowdTwistThe State of Front-end At CrowdTwist
The State of Front-end At CrowdTwist
 
jQuery in the [Aol.] Enterprise
jQuery in the [Aol.] EnterprisejQuery in the [Aol.] Enterprise
jQuery in the [Aol.] Enterprise
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
jQuery
jQueryjQuery
jQuery
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
jQuery UI and Plugins
jQuery UI and PluginsjQuery UI and Plugins
jQuery UI and Plugins
 
Huge web apps web expo 2013
Huge web apps web expo 2013Huge web apps web expo 2013
Huge web apps web expo 2013
 
CHOReOS Web Services FISL Conference Brazil 2012
CHOReOS Web Services FISL Conference Brazil 2012CHOReOS Web Services FISL Conference Brazil 2012
CHOReOS Web Services FISL Conference Brazil 2012
 
CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11CT presentatie JQuery 7.12.11
CT presentatie JQuery 7.12.11
 
Everything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the WebEverything is Awesome - Cutting the Corners off the Web
Everything is Awesome - Cutting the Corners off the Web
 

More from dion

More from dion (8)

The Mobile Web @ 2010 JSConf
The Mobile Web @ 2010 JSConfThe Mobile Web @ 2010 JSConf
The Mobile Web @ 2010 JSConf
 
Google Developer Day: State of Ajax
Google Developer Day: State of AjaxGoogle Developer Day: State of Ajax
Google Developer Day: State of Ajax
 
Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008Gears and HTML 5 @media Ajax London 2008
Gears and HTML 5 @media Ajax London 2008
 
Google Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and BeyondGoogle Back To Front: From Gears to App Engine and Beyond
Google Back To Front: From Gears to App Engine and Beyond
 
App Engine On Air: Munich
App Engine On Air: MunichApp Engine On Air: Munich
App Engine On Air: Munich
 
Javaone 2008: What’s New In Ajax
Javaone 2008: What’s New In AjaxJavaone 2008: What’s New In Ajax
Javaone 2008: What’s New In Ajax
 
Web 2.0 Expo Ria Offline Desktop
Web 2.0 Expo Ria Offline DesktopWeb 2.0 Expo Ria Offline Desktop
Web 2.0 Expo Ria Offline Desktop
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Google I/O State Of Ajax