Google I/O State Of Ajax

3,194 views

Published on

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
3,194
On SlideShare
0
From Embeds
0
Number of Embeds
665
Actions
Shares
0
Downloads
64
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Google I/O State Of Ajax

  1. 1. State of Ajax Dion Almaer, Google Ben Galbraith, Mediabank Founders, Ajaxian.com
  2. 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. 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. 4. Great User ExperienceGreat Developer Experience
  5. 5. Great User Experience Great Developer Experience
  6. 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. 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. 8. User Interface Visual Design Interaction Design
  9. 9. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions!
  10. 10. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds!
  11. 11. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs!
  12. 12. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs! vi!
  13. 13. User Interface Visual Design Interaction Design “Seductive user interfaces” are vacuous distractions! HCI researchers are nerds! Emacs! vi!Microsoft Rulez!
  14. 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. 15. The Web didn’t used to be a beautiful place...
  16. 16. Top Grossing Film of 1957 Top Grossing Film of 2007
  17. 17. CSS and Animations dojo.query("#nav > .focusable").     attr("tabIndex", 0).     style("border", "1px solid transparent").     anim({         "borderColor": { start: "yellow", end: "white" }     });
  18. 18. Jakob Nielsen Noted Usability Expert
  19. 19. Jakob Nielsen Noted Usability Expert “The basic advice regarding response times has been about the same for thirty years:
  20. 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. 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. 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. 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. 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. 25. XHR
  26. 26. XHR
  27. 27. The Old Taxonomy
  28. 28. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers
  29. 29. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java.
  30. 30. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jQuery New, DOM-centric JavaScript helper
  31. 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. 32. The New Taxonomy
  33. 33. Prototype jQuery Dojo Core The New Taxonomy
  34. 34. Prototype jQuery Dojo Core Plug-in Community scripteka.com Plug-in Community plugins.jquery.com Plug-in Community dojox The New Taxonomy
  35. 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. 36. DOM Goodness $(document).bind("ready", function() {   $("div").bind("mousewheel", function(event, delta) {     if (delta < 0) {       $(this).append("up");     } else {       $(this).append("down");    } ); });
  37. 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. 38. Dojo Charting
  39. 39. Dojo Charting Dojo Grid
  40. 40. Dojo Charting Dojo Grid Processing.js
  41. 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. 42. Browser
  43. 43. Operating System Event Queue Browser
  44. 44. Operating System Event Queue Browser
  45. 45. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released Browser
  46. 46. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released Browser
  47. 47. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released Browser
  48. 48. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Browser
  49. 49. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Browser
  50. 50. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Web Browsing Browser
  51. 51. Operating System Event Queue Mouse Moved Mouse Pressed Mouse Released Key Pressed Key Released JavaScript Web Browsing Potential Bottleneck Browser
  52. 52. User Interface Background Thread 2 Browser 1
  53. 53. User Interface Background Thread 2 X Browser 1
  54. 54. Brendan Eich Inventor of JavaScript CTO, Mozilla Brendan’s Blog
  55. 55. Brendan Eich Inventor of JavaScript CTO, Mozilla “Threads suck.” Brendan’s Blog
  56. 56. User Interface Background Thread 2 X Browser 1
  57. 57. User Interface Background Thread 2 Browser 1
  58. 58. User Interface WorkerPool Browser 1 WorkerPool 2 3 Message Passing
  59. 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. 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. 61. Prefer Undo to Warning Dialogs
  62. 62. Prefer Undo to Warning Dialogs Err, how do you do that on the Web?
  63. 63. Prefer Undo to Warning Dialogs Err, how do you do that on the Web? ...and, uh, how do you handle transactions?
  64. 64. Form History
  65. 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. 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. 67. Web Services Your Application
  68. 68. Web Services Your Application
  69. 69. Web Services Your Application
  70. 70. Web Services Your Application
  71. 71. Web Services Your Application
  72. 72. Amazon EC2 Elastic Compute Cloud
  73. 73. Amazon EC2 Elastic Compute Cloud
  74. 74. Amazon EC2 Elastic Compute Cloud Google App Engine
  75. 75. Amazon EC2 Elastic Compute Cloud Google App Engine Aptana Cloud
  76. 76. Macintosh HD
  77. 77. Macintosh HD “You just got another email from your wife!”
  78. 78. Macintosh HD “You just got another email from your wife!” 32
  79. 79. Macintosh HD “You just got another email from your wife!” 32
  80. 80. Macintosh HD “You just got another email from your wife!” 32
  81. 81. Fluid Mozilla Prism Adobe AIR Gears
  82. 82. Fluid Gears
  83. 83. Fluid 37signals’ Campfire
  84. 84. Fluid 37signals’ Campfire GreaseMonkey / GreaseKit
  85. 85. XHR
  86. 86. wiiuse library
  87. 87. wiiuse library JNI
  88. 88. wiiuse library JNI Java Plug-in
  89. 89. wiiuse library JNI Java Plug-in wiiusej
  90. 90. wiiuse library JNI Java Plug-in wiiusej
  91. 91. wiiuse library JNI Java Plug-in WiiTracker wiiusej
  92. 92. wiiuse library JNI Java Plug-in WiiTracker wiiusej
  93. 93. wiiuse library JNI Java Plug-in WiiTracker wiiusej WiiApplet
  94. 94. wiiuse library JNI Java Plug-in WiiTracker wiiusej WiiApplet
  95. 95. wiiuse library JNI Java Plug-in WiiTracker Browser wiiusej WiiApplet
  96. 96. wiiuse library JNI Java Plug-in WiiTracker Browser JavaScript Dart Game wiiusej WiiApplet
  97. 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. 98. The Future?
  99. 99. The Breakdown of Modern Web Development
  100. 100. Safari CSS Animations
  101. 101. Safari CSS Reflections and Masks
  102. 102. Mozilla’s Monkeys?
  103. 103. Updating the Web... Gears
  104. 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. 105. Ajax
  106. 106. Ajax Easy Programming Model
  107. 107. Ajax Easy Programming Model Easy Remoting
  108. 108. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors
  109. 109. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Easy Deployment
  110. 110. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment
  111. 111. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great FX
  112. 112. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great Mobile Story Great FX
  113. 113. Ajax Easy Programming Model Easy Remoting Extensive Customization Vectors Great Widgets Easy Deployment Great Mobile Story Desktop Integration Great FX
  114. 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

×