Javaone 2008: What’s New In Ajax

What’s New in Ajax Ben Galbraith and Dion Almaer Founders, Ajaxian.com TS-6807 Sunday, May 11, 2008 1

Sunday, May 11, 2008 2

JavaFXian It’s “JavaFX”, not “Java”, stupid Sunday, May 11, 2008 2

Great Developer Experience Great User Experience Sunday, May 11, 2008 4

Great User Experience Great Developer Experience Sunday, May 11, 2008 4

e! Great User Experience utu rExperience eF Great Developer Th Sunday, May 11, 2008 4

The Web didn’t used to be a beautiful place... Sunday, May 11, 2008 5

Browser Sunday, May 11, 2008 10

Operating System Event Queue Browser Sunday, May 11, 2008 10

Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser Sunday, May 11, 2008 10

Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Browser Sunday, May 11, 2008 10

Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Web Browsing Browser Sunday, May 11, 2008 10

Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue tial oten neck P le t Bot JavaScript Web Browsing Browser Sunday, May 11, 2008 10

1 Browser User Interface 2 Background Thread Sunday, May 11, 2008 11

1 Browser User Interface X 2 Background Thread Sunday, May 11, 2008 11

1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool Sunday, May 11, 2008 12

Macintosh HD Sunday, May 11, 2008 13

“You just got another email from your wife!” Macintosh HD Sunday, May 11, 2008 13

“You just got another email from your wife!” Macintosh HD 32 Sunday, May 11, 2008 13

Fluid Mozilla Prism Adobe AIR Sunday, May 11, 2008 14

Fluid Sunday, May 11, 2008 14

Fluid 37signals’ Campfire Sunday, May 11, 2008 15

Fluid GreaseMonkey / GreaseKit 37signals’ Campfire Sunday, May 11, 2008 15

Aptana Jaxer Sunday, May 11, 2008 16

Aptana Jaxer Netscape LiveWire 1995 Sunday, May 11, 2008 16

Browser Server Sunday, May 11, 2008 17

Browser Server JavaScript In the beginning, there was JavaScript in the browser Sunday, May 11, 2008 17

Browser Server JavaScript Java Then Oak became Java and it entered the browser, too Sunday, May 11, 2008 17

Browser Server JavaScript Java Applets sucked, but Servlets caught on Sunday, May 11, 2008 17

Browser Server JavaScript Java Netscape tries to get JavaScript on the server Sunday, May 11, 2008 17

Browser Server JavaScript Java But, server-side JavaScript never caught on, and client-side JavaScript was mocked Sunday, May 11, 2008 17

Browser Server Aja x! JavaScript Java Ajax comes along and JavaScript gets some respect once again Sunday, May 11, 2008 17

Browser Server Aja Aja x! x! JavaScript JavaScript Java Then Aptana moves Ajax to the server Sunday, May 11, 2008 17

Browser Server Aja Aja x! x! JavaScript JavaScript Java/JavaScript Java Hybrid Monster Don’t forget GWT, which uses Java and embedded JavaScript to emit client-side JavaScript Sunday, May 11, 2008 17

Browser Server Aja x! Aja x! JavaScript JavaScript Java/JavaScript Hybrid Monster Java Java And now, finally, after nearly 15 years, we have a decent Java plug-in Sunday, May 11, 2008 17

Sunday, May 11, 2008 18

Amazon EC2 Elastic Compute Cloud Sunday, May 11, 2008 18

Amazon EC2 Elastic Compute Cloud Sunday, May 11, 2008 19

Amazon EC2 Elastic Compute Cloud Google App Engine Sunday, May 11, 2008 19

Amazon EC2 Elastic Compute Cloud Google App Engine Aptana Cloud Sunday, May 11, 2008 19

Your Application Web Services Sunday, May 11, 2008 20

Sunday, May 11, 2008 21

How to Choose an Ajax Framework Sunday, May 11, 2008 21

How to Choose an Ajax Framework XHR Sunday, May 11, 2008 21

How to Choose an Ajax Framework XHR Sunday, May 11, 2008 22

How to Choose an Ajax Framework Sunday, May 11, 2008 22

The Old Taxonomy Sunday, May 11, 2008 23

The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers Sunday, May 11, 2008 23

The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. Sunday, May 11, 2008 23

The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jQuery New, DOM-centric JavaScript helper Sunday, May 11, 2008 23

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 Sunday, May 11, 2008 23

The New Taxonomy Sunday, May 11, 2008 24

The New Taxonomy Prototype jQuery Dojo Core Sunday, May 11, 2008 24

The New Taxonomy Plug-in Community Plug-in Community Plug-in Community scripteka.com plugins.jquery.com dojox Prototype jQuery Dojo Core Sunday, May 11, 2008 24

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 Sunday, May 11, 2008 24

JavaScript Goodness var SiteMap = Class.create(RuledTable, { initialize: function($super, id, expanded) { $super(id); this.expandedRows = expanded; }, ... }); Sunday, May 11, 2008 25

DOM Goodness $(document).bind(\"ready\", function() { $(\"div\").bind(\"mousewheel\", function(event, delta) { if (delta < 0) { $(this).append(\"up\"); } else { $(this).append(\"down\"); } ); }); Sunday, May 11, 2008 26

CSS and Animations dojo.query(\"#nav> .focusable\"). attr(\"tabIndex\", 0). style(\"border\", \"1px solid transparent\"). anim({ \"borderColor\": { start: \"yellow\", end: \"white\" } }); Sunday, May 11, 2008 27

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); Sunday, May 11, 2008 28

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. Key Points: pdoc inline documentation Sprockets Component packaging Events New event bubbling sub system Sam Stephenson, Creator of Prototype Sunday, May 11, 2008 29

jQuery pioneered the “CSS selector first” technique of applying behaviour to the DOM Key Points: jQuery Core 1.2.4 Cross browser offset and DOM sizes New event handlers for speed bump jQuery Core 1.3 New CSS selector engine DOM manipulation simplified jQuery UI 1.5 Ground rewrite Large number of examples John Resig, Creator of jQuery Sunday, May 11, 2008 30

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. Key Points: Responsive applications For all. Accessibility Really, all. Full GUI toolkit Dijit Alex Russell, Dojo Co-founder Sunday, May 11, 2008 31

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. Key Points: Java 5 Support Generics, for loop, etc... Performance With a simple recompilation JavaScript Integration New simpler system Bruce Johnson, Founder of GWT Rich components Native, and via community (Ext - GWT - Ext) Sunday, May 11, 2008 32

XHR Sunday, May 11, 2008 33

Sunday, May 11, 2008 34

Sunday, May 11, 2008 35

wiiuse library Sunday, May 11, 2008 35

JNI wiiuse library Sunday, May 11, 2008 35

Java Plug-in JNI wiiuse library Sunday, May 11, 2008 35

Java Plug-in wiiusej JNI wiiuse library Sunday, May 11, 2008 35

Java Plug-in WiiTracker wiiusej JNI wiiuse library Sunday, May 11, 2008 35

Java Plug-in WiiApplet WiiTracker wiiusej JNI wiiuse library Sunday, May 11, 2008 35

Browser Java Plug-in WiiApplet WiiTracker wiiusej JNI wiiuse library Sunday, May 11, 2008 35

Browser Java Plug-in WiiApplet JavaScript Dart Game WiiTracker wiiusej JNI wiiuse library Sunday, May 11, 2008 35

Sunday, May 11, 2008 36

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 Sunday, May 11, 2008 37

The Future? Sunday, May 11, 2008 38

The Breakdown of Modern Web Development Sunday, May 11, 2008 39

Safari CSS Animations Sunday, May 11, 2008 40

Safari CSS Reflections and Masks Sunday, May 11, 2008 41

Mozilla’s Monkeys? Sunday, May 11, 2008 42

Sunday, May 11, 2008 43

Updating the Web... Sunday, May 11, 2008 44

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 Sunday, May 11, 2008 45

Sunday, May 11, 2008 46

What’s New in Ajax Dion Almaer and Ben Galbraith TS-6807 Sunday, May 11, 2008 47

Javaone 2008: What’s New In Ajax

0 comments

Notes on slide 1

5 Favorites, 1 Group & 1 Event