Your SlideShare is downloading. ×
0
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Google I/O State Of Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Google I/O State Of Ajax

2,836

Published on

Ben and I gave a talk on the state of Ajax at Google I/O.

Ben and I gave a talk on the state of Ajax at Google I/O.

Published in: Technology, News & Politics
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,836
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
63
Comments
0
Likes
5
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, Google Ben Galbraith, Mediabank 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 Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.” Jesse James Garrett Co-founder, Adaptive Path
  • 3. “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 Asynchronous JavaScript + XML, and it represents a fundamental shift in what’s possible on the Web.” Jesse James Garrett Co-founder, Adaptive Path Designer!
  • 4. Great User ExperienceGreat Developer Experience
  • 5. Great User Experience Great Developer Experience
  • 6. Jef Raskin Noted Usability Expert The Humane Interface “The quality of any [software] is ultimately determined by the quality of the interaction between one human and one system.”
  • 7. Jef Raskin Noted Usability Expert The Humane Interface “If a system’s one-on-one interaction with its human user is not pleasant and facile, the resulting deficiency will poison the performance of the entire system, however fine that system might be in its other aspects.
  • 8. User Interface Visual Design Interaction Design
  • 9. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions!
  • 10. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds!
  • 11. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs!
  • 12. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs! vi!
  • 13. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs! vi!Microsoft Rulez!
  • 14. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs! vi!Microsoft Rulez! Real programmers use C++
  • 15. The Web didn’t used to be a beautiful place...
  • 16. Top Grossing Film of 1957 Top Grossing Film of 2007
  • 17. CSS and Animations dojo.query("#nav > .focusable").     attr("tabIndex", 0).     style("border", "1px solid transparent").     anim({         "borderColor": { start: "yellow", end: "white" }     });
  • 18. Jakob Nielsen Noted Usability Expert
  • 19. Jakob Nielsen Noted Usability Expert “The basic advice regarding response times has been about the same for thirty years:
  • 20. Jakob Nielsen Noted Usability Expert “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 21. Jakob Nielsen Noted Usability Expert “1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay.
  • 22. Jakob Nielsen Noted Usability Expert “Normally, no special feedback is 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.”
  • 23. <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>
  • 24. 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>
  • 25. XHR
  • 26. XHR
  • 27. The Old Taxonomy
  • 28. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers
  • 29. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java.
  • 30. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jQuery New, DOM-centric JavaScript helper
  • 31. The Old Taxonomy dojoYour Soup-to-Nuts Ajax/Javascript Platform Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jQuery New, DOM-centric JavaScript helper
  • 32. The New Taxonomy
  • 33. Prototype jQuery Dojo Core The New Taxonomy
  • 34. Prototype jQuery Dojo Core Plug-in Community scripteka.com Plug-in Community plugins.jquery.com Plug-in Community dojox The New Taxonomy
  • 35. Prototype jQuery Dojo Core Plug-in Community scripteka.com Plug-in Community plugins.jquery.com Plug-in Community dojox Script.aculo.us jQuery UI dijit The New Taxonomy
  • 36. DOM Goodness $(document).bind("ready", function() {   $("div").bind("mousewheel", function(event, delta) {     if (delta < 0) {       $(this).append("up");     } else {       $(this).append("down");    } ); });
  • 37. 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);
  • 38. Dojo Charting
  • 39. Dojo Charting Dojo Grid
  • 40. Dojo Charting Dojo Grid Processing.js
  • 41. Jakob Nielsen Noted Usability Expert “0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 42. Browser
  • 43. Operating System Event Queue Browser
  • 44. Operating System Event Queue Browser
  • 45. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released Browser
  • 46. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released Browser
  • 47. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released Browser
  • 48. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Browser
  • 49. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Browser
  • 50. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Web Browsing Browser
  • 51. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Web Browsing Potential Bottleneck Browser
  • 52. User Interface Background Thread 2 Browser 1
  • 53. User Interface Background Thread 2 X Browser 1
  • 54. Brendan Eich Inventor of JavaScript CTO, Mozilla Brendan’s Blog
  • 55. Brendan Eich Inventor of JavaScript CTO, Mozilla “Threads suck.” Brendan’s Blog
  • 56. User Interface Background Thread 2 X Browser 1
  • 57. User Interface Background Thread 2 Browser 1
  • 58. User Interface WorkerPool Browser 1 WorkerPool 2 3 Message Passing
  • 59. Jef Raskin Noted Usability Expert The Humane Interface “If [a] feature is well–designed, and if we use it repeatedly, we eventually... use the feature habitually, without thought or conscious effort.
  • 60. Jef Raskin Noted Usability Expert The Humane Interface “In operating an interface we combine or ‘chunk’ sequences of actions into gestures, which, once started, proceed automatically. Because we form gestures, techniques such as having a user respond Y or N to an ‘Are you sure?’ verification do not provide safety: The typed ‘Y’ becomes part of the gesture.”
  • 61. Prefer Undo to Warning Dialogs
  • 62. Prefer Undo to Warning Dialogs Err, how do you do that on the Web?
  • 63. Prefer Undo to Warning Dialogs Err, how do you do that on the Web? ...and, uh, how do you handle transactions?
  • 64. Form History
  • 65. Some Business Form First Name: Last Name: Address Line 1: Address Line 2: City: State: Zip: Foo: Gawuzzit: Lugnutzwit: Cookie Monster: Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Form History: Present Past
  • 66. Some Business Form First Name: Last Name: Address Line 1: Address Line 2: City: State: Zip: Foo: Gawuzzit: Lugnutzwit: Cookie Monster: Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Some Value Form History: Present 2 weeks ago Past History Value Here History Value Here History Value Here History Value Here History Value Here History Value Here History Value Here History Value Here History Value Here History Value Here History Value Here
  • 67. Web Services Your Application
  • 68. Web Services Your Application
  • 69. Web Services Your Application
  • 70. Web Services Your Application
  • 71. Web Services Your Application
  • 72. Amazon EC2 Elastic Compute Cloud
  • 73. Amazon EC2 Elastic Compute Cloud
  • 74. Amazon EC2 Elastic Compute Cloud Google App Engine
  • 75. Amazon EC2 Elastic Compute Cloud Google App Engine Aptana Cloud
  • 76. Macintosh HD
  • 77. Macintosh HD “You just got another email from your wife!”
  • 78. Macintosh HD “You just got another email from your wife!” 32
  • 79. Macintosh HD “You just got another email from your wife!” 32
  • 80. Macintosh HD “You just got another email from your wife!” 32
  • 81. Fluid Mozilla Prism Adobe AIR Gears
  • 82. Fluid Gears
  • 83. Fluid 37signals’ Campfire
  • 84. Fluid 37signals’ Campfire GreaseMonkey / GreaseKit
  • 85. XHR
  • 86. wiiuse library
  • 87. wiiuse library JNI
  • 88. wiiuse library JNI Java Plug-in
  • 89. wiiuse library JNI Java Plug-in wiiusej
  • 90. wiiuse library JNI Java Plug-in wiiusej
  • 91. wiiuse library JNI Java Plug-in WiiTracker wiiusej
  • 92. wiiuse library JNI Java Plug-in WiiTracker wiiusej
  • 93. wiiuse library JNI Java Plug-in WiiTracker wiiusej WiiApplet
  • 94. wiiuse library JNI Java Plug-in WiiTracker wiiusej WiiApplet
  • 95. wiiuse library JNI Java Plug-in WiiTracker Browser wiiusej WiiApplet
  • 96. wiiuse library JNI Java Plug-in WiiTracker Browser JavaScript Dart Game wiiusej WiiApplet
  • 97. 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
  • 98. The Future?
  • 99. The Breakdown of Modern Web Development
  • 100. Safari CSS Animations
  • 101. Safari CSS Reflections and Masks
  • 102. Mozilla’s Monkeys?
  • 103. Updating the Web... Gears
  • 104. HTML 5 Gears • Standards • Long term • All browsers • No plugin • Implementation • Battle hardened • A place for innovation • Cross browser • Plugin Past Present Future A bleedingedgeversionof HTML 5!
  • 105. Ajax
  • 106. Ajax Easy Programming Model
  • 107. Ajax Easy Programming Model Easy Remoting
  • 108. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors
  • 109. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Easy Deployment
  • 110. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment
  • 111. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great FX
  • 112. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great Mobile Story Great FX
  • 113. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great Mobile Story Desktop Integration Great FX
  • 114. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great Mobile Story Desktop Integration State-of-the-Art Plug-ins Great FX

×