Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
886
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
42
Comments
0
Likes
0

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. ion’s D Be na nd Ajax Tutorial ajaxians@ajaxian.com
  • 2. Ben Galbraith Kevin Lynch Chief Software Architect Dion Almaer Co-founder, Ajaxian.com Adobe Co-founder, Ajaxian.com Independent Consultant Google Shill Conservative Liberal
  • 3. Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 “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.”
  • 4. Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 “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.”
  • 5. Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 “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.”
  • 6. Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005
  • 7. Demo
  • 8. Ajax == DHTML • Key Ajax ingredient: • XMLHttpRequest (a.k.a. XMLHTTP) • Introduced by MS in 1997 • Copied by Mozilla 1.0 in 2002 • innerHTML helps a great deal • DOM API snobs notwithstanding
  • 9. XMLHttpRequest Method Description open("method", "URL"[, asyncFlag[, "userName"[, "password"]]]) Setup the request (note the asyncFlag parameter) send(content) Send the request; “content” is request body (i.e. POST data) abort() Stop a request in process getAllResponseHeaders() Return a hash of header/value pairs getResponseHeader(”header”) Retrieve a response header value setRequestHeader(”label”, “value”) Set header (overriding browser headers allowed)
  • 10. XMLHttpRequest Property Description onreadystatechange Reference to callback function Current state of XHR; one of: 0 = uninitialized 1 = loading readyState 2 = loaded 3 = interactive 4= complete responseText Text value of response body responseXML DOM tree of response body status Numeric status code (e.g., 200, 404) statusText Text status message corresponding to status code
  • 11. Three Main Ajaxian Architectures Return HTML Return Data Return JavaScript (responseText + (JSON / XML) (eval) innerHTML)
  • 12. The Ajax Innovators
  • 13. The Ajax Innovators
  • 14. The Ajax Innovators
  • 15. The Ajax Innovators
  • 16. Ajax is the victory of the pragmatists over the purists* * they want a rematch
  • 17. Ajax is about more than sending data back and forth
  • 18. Ajax has become a catch-all buzzword for highly interactive websites (get over it)
  • 19. And the biggest surprise?
  • 20. JavaScript doesn’t suck, after all (but still don’t hire people who call it ‘Java’ on their CV)
  • 21. What about Flash? Is Flash Ajax?
  • 22. Web / Ajax Myths • Ajax is hard • Cross-browser differences are painful • Rich effects (and widgets) are best left to desktop applications • Off-line mode isn’t possible • Client-side validation is a pain
  • 23. dojo.gfx • A graphics library built on top of SVG and VML • Think portable SVG subset for IE • Like SVG, exposes a DOM for accessing and manipulating paths
  • 24. dojo.gfx var node = document.createElement("div"); document.body.appendChild(node); var surfaceWidth = 120; var surfaceHeight = 220; var surface = dojo.gfx.createSurface(node,surfaceWidth, surfaceHeight); var rect = { x: 100, y: 0, width: 100, height: 100 }; var circle = { cx: 150, cy: 160, r: 50 }; var group = surface.createGroup(); var blueRect = group.createRect(rect) .setFill([0, 0, 255, 0.5]) .applyTransform(dojo.gfx.matrix.identity); var greenCircle = group.createCircle(circle) .setFill([0, 255, 0, 1.0]) .setStroke({color: "black", width: 4, cap: "butt", join: 4}) .applyTransform(dojo.gfx.matrix.identity);
  • 25. Ajax vs. Desktop Apps Ajax Advantages Desktop Advantages Ease of development model Much faster than JavaScript Ease of deployment Advanced graphical capabilities Mash-ups Tight integration with OS Separation of concerns Mature UI toolkits Hackability (e.g., Greasemonkey) Lack of hackability (e.g., security)
  • 26. Ajaxian Frameworks RAD High-level Tools (TIBCO, Backbase) Server-side Web Frameworks (ASP.NET, JSF + ICEfaces, Tapestry, Rails) UI Toolkits JavaScript (Dojo, Script.aculo.us, Moo.fx) Tools and Remoting Toolkits Utilities (Prototype, Dojo, Mochikit) XMLHttpRequest IFrame ...
  • 27. Ajaxian Frameworks RAD High-level Tools (TIBCO, Backbase) Server-side Web Frameworks (ASP.NET, JSF + ICEfaces, Tapestry, Rails) JavaScript Client-side Frameworks Tools (Effects + Remoting) and (Dojo, Prototype + Script.aculo.us, jQuery, Moo.fx + other Moo tools) Utilities XMLHttpRequest IFrame ...
  • 28. Ajaxian Client-side Frameworks Prototype Script.aculo.us Dojo DWR GWT jQuery moo tools Behaviour MochiKit Rico qooxdoo Yahoo! UI and a thousand other frameworks...
  • 29. Prototype • Prototype takes the pain out of common Ajax tasks • Tightly integrated with Ruby-on-Rails • Can be used with any backend • Now documented! (by the community) • Reclusive maintainer
  • 30. Prototype Contents • Prototype provides three levels of functionality: • Utility functions (globally scoped) • Custom objects • Extended properties on JavaScript native and hosted objects • Some folks consider this a no-no
  • 31. Basic Utilities • Prototype contains a number of tools that take the pain out of DOM manipulation: • $() function - shortcut for Document.getElementById • Can take multiple arguments and will return all matching elements • $F() function - returns the value of any form control • Pass it either the element id or the element object • $$() function - select elements based on CSS selectors • Pass it a CSS selector expression
  • 32. More Basic Utilities • Try.these() function - takes functions as arguments and returns the return value of the first function that doesn’t throw an exception. var returnValue; for (var i = 0; i < arguments.length; i++) { var lambda = arguments[i]; try { returnValue = lambda(); break; } catch (e) {} } return returnValue;
  • 33. Ajax Helpers • The Ajax object provides a number of helpful Ajax-related functionality • At its simplest, can be used to obtain XHR in a cross-browser way: var xhr = Ajax.getTransport()
  • 34. Ajax Helpers • Implementation of Ajax.getTransport(): var Ajax = { getTransport: function() { return Try.these( function() {return new XMLHttpRequest()}, function() {return new ActiveXObject('Msxml2.XMLHTTP')}, function() {return new ActiveXObject('Microsoft.XMLHTTP')} ) || false; } }
  • 35. Ajax Helpers • Provides higher-level functionality for performing Ajax operations: • Ajax.Request() object - takes a url and an “options” object as arguments • Performs an XHR request • Options argument specifies XHR configuration parameters and one or more callbacks
  • 36. Ajax Helpers • Options object: • Created using anonymous object creation syntax: { method: ‘get’, onComplete: callBackRef } • Supported properties: • method, asynchronous (true/false), parameters, postBody, requestHeaders (hash), onLoading, onLoaded, onInteractive, onComplete
  • 37. Ajax.Request Example var request = new Ajax.Request( ‘/someUrl’, { method: get, onComplete; myCallBack } ); function myCallBack(xhr) { $(‘someElementId’).innerHTML = xhr.responseText; }
  • 38. Ajax Helpers • Ajax.Updater() object - takes an element id, a url and an “options” object as arguments • Executes XHR and displays response as contents (innerHTML) of specified element • First argument can be an anonymous object with a success property and a failure property set to the ids of elements • Executes JavaScripts contained in response HTML
  • 39. Ajax.Updater Example var request = new Ajax.Updater( ‘someElementId’, ‘/someUrl’, { method: ‘get’, parameters: ‘value=foo’ } );
  • 40. Ajax Helpers • Ajax.PeriodicalUpdater() object - takes an element id, a url and an “options” object as arguments • Same behavior as Ajax.Updater() but continuously performs request every 2 seconds • frequency property on options object controls the update frequency in seconds • stop() function halts the updating; start() function can restart it
  • 41. JavaScript Extensions • Number.toColorPart() function - converts decimal to hex • String.stripTags() function - removes any tags from the string • String.escapeHTML(), String.unescapeHTML() • Document.getElementsByClassName()
  • 42. Custom Objects • Element object makes manipulating elements much easier: • Element.show(), Element.hide(), Element.toggle() - take an unlimited number of element id or references • Show/hide based on CSS display attribute • Element.remove() - nukes element by id or reference from the DOM
  • 43. Custom Objects • Element.addClassName(), Element.hasClassName(), Element.removeClassName() - take two arguments: element id (or reference) and the class name • Field.clear() - takes an unlimited number of form element ids or references and clears their values • Field.present() - takes form elements ids or references; returns true if all are non-blank • Field.focus(), Field.select(), Field.activate() - takes an element id/ref, and focuses, selects, or focuses/selects
  • 44. Custom Objects • Form.serialize() - takes form element id/ ref; returns the HTTP query string • Form.getElements() - takes form element id/ref; returns array with all form elements • Form.disable(), Form.enable(), Form.focusFirstElement(), Form.reset() - take form element id/ref
  • 45. And Much More... • Prototype also contains utilities for inserting values into existing HTML content, event handling, JavaScript object definition, HTML element positioning, and more
  • 46. http://archive.dojotoolkit.org/nightly/core/tests/data/test_ManyStores.html
  • 47. http://app.lightstreamer.com/DojoDemo/
  • 48. Comet • Server-push for the Web • Not really, but a close approximation: a persistent XHR connection • Overkill for most “push” applications (i.e., just do polling) • Dojo’s Comet implementation is cometd • Jetty supports cometd
  • 49. DWR • DWR (Direct Web Remoting) provides tight integration with Java • DWR provides two major functions: • A dynamic Java→JavaScript proxy generation library (engine.js) • Utility library of miscellaneous JavaScript functionality (util.js)
  • 50. Using DWR • Step 1: Add the DWR servlet to your project • Step 2: Create a DWR configuration file • Step 3: Add DWR JavaScript to your HTML
  • 51. JavaScript Example <script type="text/javascript" src="/dwr/engine.js"></script> <script type="text/javascript" src="/dwr/Validator.js"></script> <script type=”text/javascript”> Validator.echoMethod(‘Hello, world!’, callback); function callback(data) { alert(data); } </script> public String echoMethod(String arg) { return arg; }
  • 52. Additional Features • Worried about latency? DWR allows you to batch opereations: • DWREngine.beginBatch() • DWREngine.endBatch() • Race conditions caused by asynchronicity got you down? • DWREngine.setOrdered(true) forces serial FIFO execution of DWR requests
  • 53. DWR “Reverse Ajax” WebContext wctx = WebContextFactory.get(); String chatPage = wctx.getCurrentPage(); // Find all the browser on window open on the chat page: Collection sessions = wctx.getScriptSessionsByPage(chatPage); // Use the Javascript Proxy API to empty the chatlog // <ul> element and re-fill it with new messages Util utilAll = new Util(sessions); utilAll.removeAllOptions("chatlog"); utilAll.addOptions("chatlog", messages, "text");
  • 54. TIBCO GI: The I-Can’t-Believe-Its-Free Department
  • 55. Tools
  • 56. Off-line Two Years Ago
  • 57. Off-line One Year Ago
  • 58. Off-line Today • Google Gears • Firefox • Safari
  • 59. Offline Web via Open Web • Why just solve this problem for Google? • Why not solve it for others? • Solution: Make it open source with a liberal license • New BSD
  • 60. Why? “How often are you on a plane?” • Reliability • 1% of downtime can hurt at the wrong time • Performance • Local acceleration • Convenience • Not having to find a connection • You are offline more than you think!
  • 61. What is the philosophy? • One application, one URL • Seamless transitions between online and offline • Ability to use local data, even when online • Available to all users on all platforms • ... and a pony
  • 62. What is the philosophy?
  • 63. What is the philosophy? Do for offline what XMLHttpRequest did for web apps Ajax Libraries Gears Libraries Dojo, jQuery, Prototype, GWT Dojo Offline, GWT XMLHttpRequest Gears Open Web Open Web
  • 64. Gears Architecture • Read and write using local store • Changes are queued for later synchronization • Server communication is completely decoupled from UI actions, happens periodically whenever there is a connection
  • 65. What are the pieces?
  • 66. Database Embedded using SQLite Contributed Full Text Search var db = google.gears.factory.create('beta.database', '1.0'); db.open('database-demo'); db.execute('create table if not exists Demo (Phrase varchar(255), Timestamp int)'); db.execute('insert into Demo values (?, ?)', [phrase, currTime]); var rs = db.execute('select * from Demo order by Timestamp desc');
  • 67. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue User Code Painting, etc. “UI Thread”
  • 68. Mouse Moved Mouse Pressed Mouse Released Key Pressed Operating System Key Released Event Queue Web JavaScript Browsing Browser
  • 69. Jakob Nielsen Noted Usability Expert Prolific Author “The basic advice regarding response times has been about the same for thirty years: “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. “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. 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.”
  • 70. 1 “UI Thread” User Interface 2 Background Thread
  • 71. 1 Browser User Interface X 2 Background Thread
  • 72. Firefox 3 • Off-line support consists of: • Off-line cache • Off-line events • DOMStorage • Driving WHATWG spec.
  • 73. Firefox Off-line Details • <link rel="offline-resource"> to put resources into the browser's off-line cache • Entire applications can live in a JAR bundle, which can then be cached off-line • Off-line mode driven by browser-generated off-line / online events
  • 74.   function loaded() {       updateOnlineStatus("load", false);        document.body.addEventListener ("offline", function () { updateOnlineStatus("offline", true) }, false);       document.body.addEventListener("online", function () { updateOnlineStatus("online", true) }, false);       if (typeof globalStorage != "undefined") {         var storage = globalStorage[storageDomain];         if (storage && storage.taskStorage) {           taskStorage = storage.taskStorage ;         }       }       fetchList();   }   function fetchList() {       if (navigator.onLine ) {         httpRequest("GET", null, loadList);       } else {         loadList(4, 200, taskStorage);       }   }
  • 75. Off-line Flash is coming in 3Q ’07
  • 76. Ajax is slow
  • 77. Fast Ajax is Coming T amarin
  • 78. Fast Flash is here today
  • 79. Fancy-pants browser graphics are here today • SVG was widely anticipated but hasn’t made an impact • Canvas has started to appear • Google’s ExplorerCanvas project brings it to IE
  • 80. Sound! http://ajaxian.com/downloads/sound/ <script type="text/javascript" src="soundmanager2.js"></script> <script type="text/javascript"> soundManager.onload = function() { soundManager.createSound('circle', 'circleoflife.mp3'); } function play() { soundManager.play('circle'); } function pause() { soundManager.pause('circle'); } function stop() { soundManager.stop('circle'); } </script>
  • 81. Sound! http://ajaxian.com/downloads/sound/ <script type="text/javascript" src="soundmanager2.js"></script> <script type="text/javascript"> soundManager.onload = function() { soundManager.createSound('circle', 'circleoflife.mp3'); } function play() { soundManager.play('circle'); } function pause() { soundManager.pause('circle'); } function stop() { soundManager.stop('circle'); } </script>
  • 82. The Server-less Ajax Application • Amazon S3 provides storage • Amazon EC2 provides hosting • Local persistent storage is here • And more options around the corner... • Growing popularity of web services
  • 83. Imagine the Power of Client-side SQL! <script language="javascript"> // First we precompile the query language object with the schema... var queryLang = TrimPath.makeQueryLang(columnDefs); // Next, we do a SELECT statement. var statement = queryLang.parseSQL( "SELECT Customer.id, Customer.acctBalance, Invoice.total " + "FROM Customer, Invoice " + "WHERE Customer.id = Invoice.custId " + "ORDER BY Customer.id ASC"); // Here we run the query... var results = statement.filter(tableData); // Tada! That's it -- the results now holds the joined, // filtered, and sorted output of our first query. // Also, we can convert the statement back to a SQL string... statement.toString() == "SELECT Customer.id, Customer.acctBalance, Invoice.total " + "FROM Customer, Invoice " + "WHERE Customer.id = Invoice.custId " + "ORDER BY Customer.id ASC" </script>
  • 84. We used to hate when people asked us about accessibility...
  • 85. Enter Unobtrusive JavaScript Goals: Keep the HTML Increase Reusable clean Accessibility Components (JS out of it) (Degrade) (Tie with CSS)
  • 86. Unobtrusive Examples <abbr class="searchterm using:news" title="ajax"> Ajax </abbr> <ul class="feedbillboard access:randomly"> <li><a href="http://code.google.com/">Google Code</a> (<a href="http://code.google.com/feeds/updates.xml">RSS</a>)</li> <li><a href="http://ajaxian.com/">Ajaxian</a> (<a href="http://ajaxian.com/feed">RSS</a>)</li> <li><a href="http://almaer.com/blog">techno.blog(Dion)</a> (<a href="http://almaer.com/blog/index.xml">RSS</a>)</li> </ul>
  • 87. Creating an Unobtrusive Component <abbr class="searchterm using:news" title="ajax"> Ajax </abbr> Steps for creating nice unobtrusive code: 1) What would look good in HTML (create the microformat) 2) Create a JavaScript component that can create what you need 3) Have a builder that bridges the HTML and the Components
  • 88. Step 1: Microformat <abbr class="searchterm using:blog withstyle:expanded orderby:relevance" title="search for ajax"> Ajax </abbr> • abbr plays nice in browsers • although a better title.You do the work in the JS • options to tweak the component directly from HTML
  • 89. Step 2: JavaScript Component var RelatedSearch = Class.create(); RelatedSearch.prototype = { initialize: function(e, id) { }, show: function() { } } • RelatedSearch encapsulates the popup • Multiple objects == multiple popups
  • 90. Step 3: Bridge Builder var RelatedSearchFinder = { find: function() { var count = 0; $$('.searchterm').each(function(node) { new RelatedSearch(node, ++count); }); } }; Event.observe(window, 'load', RelatedSearchFinder.find, false); • Selectors are the future (Dom.minimize!) • Also add functionality via: $('comments').addClassName('active')
  • 91. Accessibility • W3C Accessible Rich Internet Applications (WAI-ARIA) • IBM is leading the charge • A lot of their work is donated to the Dojo Toolkit • We overload HTML elements with meaning that readers and other devices don’t understand • WAI-ARIA defines Roles • A role helps define WHAT something is • <div role="wairole:slider"> • progressbar, slider, button, tree, textfield, checkbox, alert, and dialog • WAI-ARIA defines Stats • A state helps add meaning • <input type="text" name="email" aaa:required="true" /> • <div role="wairole:button" aaa:controls="price"> • <h2 id="price" aaa:sort="descending">price</h2>
  • 92. The Future? • Apollo as the Web+ Platform? • Off-line Ajax Abundant • Abundant custom rendering • Microformats? • Fast JavaScript interpreters • “Wow” versus the Web • HTML 5