State Of Ajax Zend Con 08

Slideshow Transcript

1. Slide 1: State of Ajax Dion Almaer and Ben Galbraith Co-founders, Ajaxian.com
2. Slide 10: “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. Slide 11: Compelling User Experience
4. Slide 12: Make Your User’s Happy
5. Slide 14: Managing Expectations
6. Slide 16: Top Grossing Film of 1957 Top Grossing Film of 2007
7. Slide 19: “Wow” Factor Bertrand Serlet Senior VP, Software Apple, Inc. WWDC 2006
8. Slide 24: First Wave of Ajax: Making JavaScript Better and Web App Development Suck Less
9. Slide 25: XHR
10. Slide 26: 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. Slide 27: 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. Slide 28: <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>
13. Slide 29: 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>
14. Slide 30: CSS and Animations dojo.query(\"#nav > .focusable\").     attr(\"tabIndex\", 0).     style(\"border\", \"1px solid transparent\").     anim({         \"borderColor\": { start: \"yellow\", end: \"white\" }     });
15. Slide 31: DOM Goodness $(document).bind(\"ready\", function() {   $(\"div\").bind(\"mousewheel\", function(event, delta) {     if (delta < 0) {       $(this).append(\"up\");     } else {       $(this).append(\"down\");    } ); });
16. Slide 32: Dojo Charting Dojo Grid Processing.js
17. Slide 33: Second Wave of Ajax: GUI Toolkits for the Web, or The Browser as Universal Run-time
18. Slide 36: Mobile Me / SproutCore 280 Slides / Objective-J
19. Slide 38: 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. Slide 39: “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. Slide 43: User Interface Visual Design Interaction Design
22. Slide 44: Jakob Nielsen Noted Usability Expert “ e basic advice regarding response times has been about the same for thirty years:
23. Slide 45: “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. Slide 46: 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. Slide 47: 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. Slide 49: 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. Slide 50: 1 “UI Thread” User Interface X 2 Background Thread
28. Slide 51: 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. Slide 52: 1 Browser User Interface X 2 Background Thread
30. Slide 53: “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. Slide 54: “ 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. Slide 55: Brendan Eich Inventor of JavaScript CTO, Mozilla “ reads suck.” Brendan’s Blog
33. Slide 56: 1 Browser User Interface 2 Background Thread
34. Slide 57: 1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool
35. Slide 58: 1 Browser User Interface Message Passing 3.1 ads” fox thre Fire ker X 2 eb wor 3 “W WorkerPool WorkerPool
36. Slide 59: “You just got another email from your wife!” Macintosh HD 32
37. Slide 60: Fluid Gears Mozilla Prism Adobe AIR
38. Slide 61: Fluid GreaseMonkey / GreaseKit 37signals’ Campfire
39. Slide 63: HTML 5 Canvas
40. Slide 65: JavaScript Interpreter Native Canvas Implementation Retains rendering commands Issues rendering commands Refreshes screen via native APIs
41. Slide 66: ?
42. Slide 68: ? Google Chrome’s V8 Safari’s SquirrelFish Firefox’s TraceMonkey IE?
43. Slide 72: Browser Java Plug-in WiiApplet JavaScript Dart Game WiiTracker wiiusej JNI wiiuse library
44. Slide 73: 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. Slide 75: Don't forget, RIA's have rich internet back-ends! “RIBs”?
46. Slide 76: Amazon EC2 Elastic Compute Cloud Google App Engine Aptana Cloud
47. Slide 77: Your Application Web Services
48. Slide 78: The Future?
49. Slide 79: The Breakdown of Modern Web Development
50. Slide 80: Safari CSS Animations
51. Slide 81: Safari CSS Reflections and Masks
52. Slide 82: HTML 5 <video> <audio> <canvas> <time> <progress> <meter> <menu> <input type=\"email | date | min | max | required\"... > postMessage Drag and drop Ian (Hixie) Hickson Standards Editor, Google Employee
53. Slide 83: Gears Updating the Web...
54. Slide 84: 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. Slide 85: + = Sophisticated Grid-based Canvas Layout
56. Slide 86: 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. Slide 87: 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