javaone 2008: what’s new in ajax

What’s New in Ajax

Ben Galbraith and Dion AlmaerFounders, Ajaxian.com

TS-6807

1Sunday, May 11, 2008

JavaFXian It’s “JavaFX”, not “Java”, stupid


Great User ExperienceGreat Developer Experience


Great User ExperienceGreat Developer ExperienceThe Future!


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


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

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


User Interface

WorkerPool

Browser

1

WorkerPool

2 3

Message Passing


Macintosh HD


Macintosh HD

“You just got another email from your wife!”


Macintosh HD

“You just got another email from your wife!”

32


Fluid

MozillaPrism

Adobe AIR


Fluid


Fluid

37signals’Campfire


Fluid

37signals’Campfire

GreaseMonkey /GreaseKit


Aptana Jaxer


Aptana Jaxer

Netscape LiveWire1995


Browser Server


Browser Server

JavaScript

In the beginning, there was JavaScript in the browser


Browser Server

Java

JavaScript

Then Oak became Java and it entered the browser, too


Browser Server

Java

JavaScript

Applets sucked, but Servlets caught on


Browser Server

Java

JavaScript

Netscape tries to get JavaScript on the server


Browser Server

Java

JavaScript

But, server-side JavaScript never caught on, and client-side JavaScript was mocked


Browser Server

Java

Ajax comes along and JavaScript gets some respect once again

JavaScript

Ajax!


Browser Server

Java

JavaScript

Ajax!

Then Aptana moves Ajax to the server

JavaScript

Ajax!


Browser Server

Java

JavaScript

Ajax!

JavaScript

Ajax!

Java/JavaScriptHybrid Monster

Don’t forget GWT, which uses Java and embedded JavaScript to emit client-side JavaScript


Java

Browser Server

Java

JavaScript

Ajax!

JavaScript

Ajax!

Java/JavaScriptHybrid Monster

And now, finally, after nearly 15 years, we have a decent Java plug-in


Amazon EC2Elastic Compute Cloud



Google App Engine



Google App Engine

Aptana Cloud


Web Services

Your Application


How to Choose an Ajax Framework



XHR


The Old Taxonomy


The Old Taxonomy

PrototypeLightweight Ajax/JavaScript helpers


The Old Taxonomy


GWTHate JavaScript? No problem, use Java.


The Old Taxonomy



jQueryNew, DOM-centric JavaScript helper


The Old Taxonomy

dojoYour Soup-to-Nuts Ajax/Javascript

Platform



jQueryNew, DOM-centric JavaScript helper


The New Taxonomy


Prototype jQuery Dojo Core

The New Taxonomy



Plug-in Communityscripteka.com

Plug-in Communityplugins.jquery.com

Plug-in Communitydojox

The New Taxonomy



Plug-in Communityscripteka.com

Plug-in Communityplugins.jquery.com

Plug-in Communitydojox

Script.aculo.us jQuery UI dijit

The New Taxonomy


JavaScript Goodness

var SiteMap = Class.create(RuledTable, {

initialize: function($super, id, expanded) {

$super(id);

this.expandedRows = expanded;

},

...

});


DOM Goodness

$(document).bind("ready", function() {

$("div").bind("mousewheel", function(event, delta) {

if (delta < 0) {

$(this).append("up");

} else {

$(this).append("down");

}

);

});


CSS and Animations

dojo.query("#nav> .focusable").

attr("tabIndex", 0).

style("border", "1px solid transparent").

anim({

"borderColor": { start: "yellow",

end: "white" }

});


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


Sam Stephenson, Creator of Prototype

Key Points:

Prototype was one of the first mainstream Ajax frameworks. Originally a Ruby-on-Rails helper library, it has been widely adopted as a JavaScript/Ajax helper library.

pdocinline documentation

SprocketsComponent packaging

EventsNew event bubbling sub system


John Resig, Creator of jQuery

Key Points:

jQuery pioneered the “CSS selector first” technique of applying behaviour to the DOM

jQuery Core 1.2.4Cross browser offset and DOM sizesNew event handlers for speed bump

jQuery Core 1.3New CSS selector engineDOM manipulation simplified

jQuery UI 1.5Ground rewriteLarge number of examples


Alex Russell, Dojo Co-founder

Key Points:

From its earliest days, Dojo has had the goal of being the JavaScript community’s de facto platform, for both client-side and server-side applications.

Responsive applicationsFor all.

AccessibilityReally, all.

Full GUI toolkitDijit


Bruce Johnson, Founder of GWT

Key Points:

GWT is the framework for Java developers who don’t wish to learn JavaScript. A sort of Swing/SWT for the Web, it focuses on productivity and performance.

Java 5 SupportGenerics, for loop, etc...

PerformanceWith a simple recompilation

JavaScript IntegrationNew simpler system

Rich componentsNative, and via community (Ext - GWT - Ext)


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

WiiTracker

wiiusej


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


Safari CSS Animations


Safari CSS Reflections and Masks


Mozilla’s Monkeys?


Updating the Web...


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!


What’s New in AjaxDion Almaer and Ben Galbraith

TS-6807


javaone 2008: what’s new in ajax

Technology

mainstream

examples john

system sam

rails helper

javascriptajax

aptana jaxer

macintosh

decent java