Google Developer Day: State of Ajax

25,355 views

Published on

At various Google Developer Day events in Europe I gave a talk on the State of Ajax, that focuses on the core issue of User Experience and where to go from here.

Published in: Technology, Design
6 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total views
25,355
On SlideShare
0
From Embeds
0
Number of Embeds
5,612
Actions
Shares
0
Downloads
455
Comments
6
Likes
16
Embeds 0
No embeds

No notes for slide

Google Developer Day: State of Ajax

  1. State of Ajax El futuro de las Apps Web Dion Almaer September 25th, 2008
  2. Dion Almaer twitter.com/dalmaer almaer.com
  3. Dion Almaer twitter.com/dalmaer almaer.com
  4. Dion Almaer twitter.com/dalmaer almaer.com
  5. “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
  6. “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
  7. Compelling User Experience
  8. Jared Leto Jared Leto
  9. 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.”
  10. Jef Raskin Noted Usability Expert “If a system’s one-on-one interaction with its human user is The Humane Interface not pleasant and facile, the resulting de ciency will poison the performance of the entire system, however ne that system might be in its other aspects.
  11. Jef Raskin Noted Usability Expert “If a system’s one-on-one interaction with its human user is The Humane Interface not pleasant and facile, the resulting de ciency will poison the performance of the entire system, however ne that system might be in its other aspects.
  12. User Interface Visual Design Interaction Design
  13. User Interface Visual Design Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  14. User Interface HCI researchers are nerds! Visual Design Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  15. User Interface HCI researchers are nerds! Visual Design Emacs! Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  16. User Interface HCI researchers are nerds! Visual Design vi! Emacs! Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  17. User Interface HCI researchers are nerds! Visual Design ! M icrosoft Rulez vi! Emacs! Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  18. User Interface HCI researchers are nerds! Visual Design ! M icrosoft Rulez vi! Rea l programmers Emacs! use C++ Interaction Design e r interfaces” ar “ eductive use tractions! S vacuous dis
  19. The Web didn’t used to be a beautiful place...
  20. Top Grossing Film of 1957 Top Grossing Film of 2007
  21. Top Grossing Film of 1957 Top Grossing Film of 2007
  22. First Wave of Ajax Making JavaScript Better Simple Effects Responsiveness is the killer app
  23. 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; }     });
  24. Jakob Nielsen Noted Usability Expert
  25. Jakob Nielsen Noted Usability Expert “ e basic advice regarding response times has been about the same for thirty years:
  26. “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.
  27. 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.
  28. <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>
  29. 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>
  30. XHR
  31. XHR
  32. The Old Taxonomy
  33. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers
  34. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java.
  35. The Old Taxonomy Prototype Lightweight Ajax/JavaScript helpers GWT Hate JavaScript? No problem, use Java. jQuery New, DOM-centric JavaScript helper
  36. 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
  37. The New Taxonomy
  38. The New Taxonomy Prototype jQuery Dojo Core
  39. The New Taxonomy Plug-in Community Plug-in Community Plug-in Community scripteka.com plugins.jquery.com dojox Prototype jQuery Dojo Core
  40. 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
  41. 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;);    } ); });
  42. Mobile Me / SproutCore
  43. Mobile Me / SproutCore 280 Slides / Objective-J
  44. Dojo Charting
  45. Dojo Charting Dojo Grid
  46. Dojo Charting Dojo Grid Processing.js
  47. JavaScript Interpreter Native Canvas Implementation Retains rendering commands Issues rendering commands Refreshes screen via native APIs
  48. ?
  49. ?
  50. ?
  51. “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.
  52. Browser
  53. Operating System Event Queue Browser
  54. Operating System Event Queue Browser
  55. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser
  56. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser
  57. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Browser
  58. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Browser
  59. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Browser
  60. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue JavaScript Web Browsing Browser
  61. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue l e ntia k Pot lenec B ott JavaScript Web Browsing Browser
  62. 1 Browser User Interface 2 Background Thread
  63. 1 Browser User Interface X 2 Background Thread
  64. Brendan Eich Inventor of JavaScript CTO, Mozilla Brendan’s Blog
  65. Brendan Eich Inventor of JavaScript CTO, Mozilla “ reads suck.” Brendan’s Blog
  66. 1 Browser User Interface X 2 Background Thread
  67. 1 Browser User Interface 2 Background Thread
  68. 1 Browser User Interface Message Passing 2 3 WorkerPool WorkerPool
  69. Jef Raskin “If [a] feature is well–designed, Noted Usability Expert and if we use it repeatedly, we eventually... use the feature The Humane Interface habitually, without thought or conscious e ort.
  70. “In operating an interface we combine or ‘chunk’ sequences of actions into gestures, which, once Jef Raskin Noted Usability Expert started, proceed automatically. Because we form gestures, techniques such as having a user The Humane Interface respond Y or N to an ‘Are you sure?’ veri cation do not provide safety: e typed ‘Y’ becomes part of the gesture.”
  71. Prefer Undo to Warning Dialogs
  72. h at on the Web? Err, h ow do you do t Prefer Undo to Warning Dialogs
  73. h at on the Web? Err, h ow do you do t Prefer Undo to Warning Dialogs e ...and, uh, ho w do you handl transactions?
  74. Form History
  75. Some Business Form First Name: Some Value Foo: Some Value Last Name: Some Value Gawuzzit: Some Value Address Line 1: Some Value Lugnutzwit: Some Value Address Line 2: Some Value Cookie Monster: Some Value City: Some Value State: Some Value Zip: Some Value ent res st P Pa Form History:
  76. Some Business Form First Name: Some Value Foo: Some Value History Value Here History Value Here Last Name: Some Value Gawuzzit: Some Value History Value Here History Value Here Address Line 1: Some Value Lugnutzwit: Some Value History Value Here History Value Here Address Line 2: Some Value Cookie Monster: Some Value History Value Here History Value Here City: Some Value History Value Here State: Some Value History Value Here Zip: Some Value History Value Here go ent k sa e t P res 2 we Pa s Form History:
  77. Don't forget, RIA's have rich internet back-ends (RIBs?) Jonathan Schwartz CEO, Sun Microsystems
  78. Your Application Web Services
  79. Your Application Web Services
  80. Your Application Web Services
  81. Your Application Web Services
  82. Your Application Web Services
  83. Macintosh HD
  84. “You just got another email from your wife!” Macintosh HD
  85. “You just got another email from your wife!” Macintosh HD 32
  86. “You just got another email from your wife!” Macintosh HD 32
  87. “You just got another email from your wife!” Macintosh HD 32
  88. Fluid Gears Mozilla Prism Adobe AIR
  89. XHR
  90. JNI wiiuse library
  91. Java Plug-in JNI wiiuse library
  92. Java Plug-in wiiusej JNI wiiuse library
  93. Java Plug-in WiiTracker wiiusej JNI wiiuse library
  94. Java Plug-in WiiApplet WiiTracker wiiusej JNI wiiuse library
  95. Browser Java Plug-in WiiApplet JavaScript Dart Game WiiTracker wiiusej JNI wiiuse library
  96. 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
  97. The Future?
  98. The Breakdown of Modern Web Development
  99. CSS Animations
  100. CSS Reflections and Masks
  101. ? Google Chrome’s V8 Safari’s SquirrelFish Firefox’s TraceMonkey IE?
  102. Mozilla’s Monkeys?
  103. Gears Updating the Web...
  104. Future Present Ab leed edg ing vers e of H ion Past TML 5! HTML 5 Gears • Standards • Implementation • Long term • Battle hardened • A place for innovation • All browsers • Cross browser • No plugin • Plugin
  105. HTML 5 <video> <audio> <canvas> <time> <progress> <meter> <menu> <input type=quot;email | date | min | max | requiredquot;... > postMessage Drag and drop
  106. 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
  107. Ajax
  108. Ajax Easy Programming Model
  109. Ajax Easy Remoting Easy Programming Model
  110. Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  111. Easy Deployment Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  112. Great Widgets Easy Deployment Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  113. Great Widgets Easy Great Deployment FX Extensive Customization Vectors Ajax Easy Remoting Easy Programming Model
  114. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Ajax Easy Remoting Easy Programming Model
  115. Great Widgets Easy Great Deployment FX Extensive Great Mobile Customization Story Vectors Ajax Easy Desktop Remoting Integration Easy Programming Model
  116. 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
  117. 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
  118. Learn more http://code.google.com/

×