Your SlideShare is downloading. ×
State Of Ajax   Zend Con 08
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

State Of Ajax Zend Con 08

2,298
views

Published on

Presentation given at ZendCon 08 and Web 2.0 Expo NYC 2008 by Ben Galbraith and Dion Almaer. The presentation includes a lot of embedded videos and transitions and the slides are meant to support a …

Presentation given at ZendCon 08 and Web 2.0 Expo NYC 2008 by Ben Galbraith and Dion Almaer. The presentation includes a lot of embedded videos and transitions and the slides are meant to support a spoken narrative, not replace it. Still, these are provided by request and I hope they'll be of help.

Published in: Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,298
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
143
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. State of Ajax Dion Almaer and Ben Galbraith Co-founders, Ajaxian.com
  • 2. “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
  • 3. Compelling User Experience
  • 4. Make Your User’s Happy
  • 5. Managing Expectations
  • 6. Top Grossing Film of 1957 Top Grossing Film of 2007
  • 7. “Wow” Factor Bertrand Serlet Senior VP, Software Apple, Inc. WWDC 2006
  • 8. First Wave of Ajax: Making JavaScript Better and Web App Development Suck Less
  • 9. XHR
  • 10. 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
  • 11. 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
  • 12. <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>
  • 13. 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>
  • 14. 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; }     });
  • 15. 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;);    } ); });
  • 16. Dojo Charting Dojo Grid Processing.js
  • 17. Second Wave of Ajax: GUI Toolkits for the Web, or The Browser as Universal Run-time
  • 18. Mobile Me / SproutCore 280 Slides / Objective-J
  • 19. 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.”
  • 20. “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.
  • 21. User Interface Visual Design Interaction Design
  • 22. Jakob Nielsen Noted Usability Expert “ e basic advice regarding response times has been about the same for thirty years:
  • 23. “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.
  • 24. 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.
  • 25. 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.”
  • 26. 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”
  • 27. 1 “UI Thread” User Interface X 2 Background Thread
  • 28. 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
  • 29. 1 Browser User Interface X 2 Background Thread
  • 30. “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.
  • 31. “ 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.”
  • 32. Brendan Eich Inventor of JavaScript CTO, Mozilla “ reads suck.” Brendan’s Blog
  • 33. 1 Browser User Interface 2 Background Thread
  • 34. 1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool
  • 35. 1 Browser User Interface Message Passing 3.1 ads” fox thre Fire ker X 2 eb wor 3 “W WorkerPool WorkerPool
  • 36. “You just got another email from your wife!” Macintosh HD 32
  • 37. Fluid Gears Mozilla Prism Adobe AIR
  • 38. Fluid GreaseMonkey / GreaseKit 37signals’ Campfire
  • 39. HTML 5 Canvas
  • 40. JavaScript Interpreter Native Canvas Implementation Retains rendering commands Issues rendering commands Refreshes screen via native APIs
  • 41. ?
  • 42. ? Google Chrome’s V8 Safari’s SquirrelFish Firefox’s TraceMonkey IE?
  • 43. Browser Java Plug-in WiiApplet JavaScript Dart Game WiiTracker wiiusej JNI wiiuse library
  • 44. 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
  • 45. Don't forget, RIA's have rich internet back-ends! “RIBs”?
  • 46. Amazon EC2 Elastic Compute Cloud Google App Engine Aptana Cloud
  • 47. Your Application Web Services
  • 48. The Future?
  • 49. The Breakdown of Modern Web Development
  • 50. Safari CSS Animations
  • 51. Safari CSS Reflections and Masks
  • 52. 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
  • 53. Gears Updating the Web...
  • 54. 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
  • 55. + = Sophisticated Grid-based Canvas Layout
  • 56. 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
  • 57. 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