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