State Of Ajax Zend Con 08

State of Ajax Dion Almaer and Ben Galbraith Co-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 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

Make Your User’s Happy

Managing Expectations

Top Grossing Film of 1957 Top Grossing Film of 2007

“Wow” Factor Bertrand Serlet Senior VP, Software Apple, Inc. WWDC 2006

First Wave of Ajax: Making JavaScript Better and Web App Development Suck Less

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

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>

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

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

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

“If a system’s one-on-one Jef Raskin interaction with its human user is Noted Usability Expert not pleasant and facile, the resulting de ciency will poison The Humane Interface the performance of the entire system, however ne that system might be in its other aspects.

User Interface Visual Design Interaction Design

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.

Jakob Nielsen “Normally, no special feedback is Noted Usability Expert 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.”

Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue tial oten neck P le t Bot User Code Painting, etc. “UI Thread”

1 “UI Thread” User Interface X 2 Background Thread

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

1 Browser User Interface X 2 Background Thread

“Most programmers should run away crying [ om threading]. But they don't... Brendan Eich Inventor of JavaScript CTO, Mozilla “Instead, as with most other sharp tools, the temptation is to show how big one is by... tempting race- condition fate... Occasionally the Brendan’s Blog results are infamous, but too o en, with only virtual ngers and limbs lost, no one learns.

“ reads violate abstractions six ways to Sunday. Brendan Eich Inventor of JavaScript CTO, Mozilla “Mainly by creating race conditions, deadlock hazards, and pessimistic locking overhead. Brendan’s Blog “And still they don't scale up to handle the megacore tera op future.”

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

1 Browser User Interface 2 Background Thread

1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool

1 Browser User Interface Message Passing 3.1 ads” fox thre Fire ker X 2 eb wor 3 “W WorkerPool WorkerPool

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

Fluid Gears Mozilla Prism Adobe AIR

Fluid GreaseMonkey / GreaseKit 37signals’ Campfire

HTML 5 Canvas

JavaScript Interpreter Native Canvas Implementation Retains rendering commands Issues rendering commands Refreshes screen via native APIs

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

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

Don't forget, RIA's have rich internet back-ends! “RIBs”?

Amazon EC2 Elastic Compute Cloud Google App Engine Aptana Cloud

Your Application Web Services

The Future?

The Breakdown of Modern Web Development

Safari CSS Animations

Safari CSS Reflections and Masks

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

Gears Updating the Web...

Future Present A bl edg eeding e ve of H rsion TML Past 5! HTML 5 Gears • Standards • Implementation • Long term • Battle hardened • A place for innovation • All browsers • Cross browser • No plugin • Plugin

+ = Sophisticated Grid-based Canvas Layout

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

http://www.slideshare.net	13
http://blog.slideshare.net	7
http://www.fachak.com	5
http://www.techgig.com	3
http://74.125.93.104	1
http://fachak.com	1

State Of Ajax Zend Con 08

by bgalbs on Sep 25, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 30

Statistics

State Of Ajax Zend Con 08 — Presentation Transcript