Google Developer Day: State of Ajax

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

Dion Almaer twitter.com/dalmaer almaer.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 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

Compelling User Experience

Jared Leto Jared Leto

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

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.

User Interface Visual Design Interaction Design

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

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

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

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

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

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

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

Top Grossing Film of 1957 Top Grossing Film of 2007

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

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

Jakob Nielsen Noted Usability Expert

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

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

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.

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

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>

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

The New Taxonomy

The New Taxonomy Prototype jQuery Dojo Core

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

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

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

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 Retains rendering commands Issues rendering commands Refreshes screen via native APIs

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

Browser

Operating System Event Queue Browser

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

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

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

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

1 Browser User Interface 2 Background Thread

1 Browser User Interface X 2 Background Thread

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

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

1 Browser User Interface X 2 Background Thread

1 Browser User Interface 2 Background Thread

1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool

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.

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

Prefer Undo to Warning Dialogs

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

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?

Form History

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:

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:

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

Your Application Web Services

Macintosh HD

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

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

Fluid Gears Mozilla Prism Adobe AIR

XHR

JNI wiiuse library

Java Plug-in JNI wiiuse library

Java Plug-in wiiusej JNI wiiuse library

Java Plug-in WiiTracker wiiusej JNI wiiuse library

Java Plug-in WiiApplet WiiTracker wiiusej JNI wiiuse library

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

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

CSS Animations

CSS Reflections and Masks

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

Mozilla’s Monkeys?

Gears Updating the Web...

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

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

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

Ajax

Ajax Easy Programming Model

Ajax Easy Remoting Easy Programming Model

Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model

Easy Deployment Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model

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

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

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

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

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

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

Google Developer Day: State of Ajax

dion

Google Developer Day: State of Ajax