DevelopingDeveloping FutureFuture WebWeb ApplicationApplication withwith AJAXAJAX andand ASP.NETASP.NET ProjectProject "Atlas""Atlas" SmithSmith SuksmithSuksmith Microsoft MVP – Solution Architect Web Application… Rich UI can’t delivered by Browser Technology How about Google Earth Google Search Suggestion OWA A Brief History FF 1.5 Beta SVG Java Applet E4X NS 2.0B3 ECMAScript XSL-T Mozilla 1.0 JavaScript Flash 3 WSDL FF 1.0 CSS DOM 1 XHTML SVG Flash 8 96 97 98 99 00 01 02 03 04 05 XSL-T 2 IE 3 IE 4 IE 5 IE 6 XForms IFrames DOM XML It Works! DOM 3 CSS XSL-T RDF JScript XMLHTTP Browser Wars The Web Depression Web 2.0 Source: eBusinessApps What Is Web 2.0? After the Internet bubble burst in 2001, many people thought the Web was over-hyped.* In fact, bubbles and subsequent shakeouts are common to all technological revolutions. Shakeouts typically mark the point at which ascendant technologies are ready to take their place at center stage. Web 2.0 confirms this view. Web 1.0 was transformed into a new medium. * “What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software,” Tim O’Reilly. http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html. Transformations Web 1.0 Web 2.0 DoubleClick --> Google AdSense Ofoto --> Flickr Akamai --> BitTorrent Britannica Online --> Wikipedia Personal websites --> Blogging Domain name speculation --> Search engine optimization (SEO) Page views --> Cost per click Publishing --> Participation Content management --> Wikis systems Directories (taxonomy) --> Tagging ("folksonomy") Stickiness --> Syndication Source: http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html Source: http://nonfiction.ig-gestaltung.de/archives/2005/11/11/the-huge-cloud-lens-bubble-map-web20/ What’s AJAX? So, What’s AJAX for us (Geek?) Asynchronous JavaScript and XML Standards-based presentation using XHTML and CSS Dynamic display and interaction using DOM Data interchange and manipulation using XML and XSLT Asynchronous data retrieval using XMLHttpRequest JavaScript binding everything together ??? New Technology ??? Classic Web Application Model (Sync) AJAX Web Application Model (Async) AJAX Client Model No more single Request/Response restrictions Have flexibility to go back to the server when we want XMLHttpRequest Invented by Microsoft, First implement in IE5 as ActiveX (MSXML2) Asynchronous Processing Allows to kick off an HTTP request in the background Callbacks into the JavaScript code Supported in various browsers (Firefox 1.0, Safari, Opera8) Why’s it the big deal? Changes the request/response paradigm Async is not new XMLHttpRequest: Example Asynchronously update fields XMLHttpRequest: Working with Browsers Browser Dependent Code – The old problems never die function xmlGet(method, url, responseHandler) { if (window.XMLHttpRequest) { // browser has native support for XMLHttpRequest object req = new XMLHttpRequest(); } else if (window.ActiveXObject) { // try XMLHTTP ActiveX (Internet Explorer) version req = new ActiveXObject("Microsoft.XMLHTTP"); } ..... Cross Browser XMLHttpRequest Code XMLHttpRequest: Make the Request Handle the response callback from the server Setup the HTTP request URL Configure the callback for the response Send the async message function xmlGet(method, url, responseHandler) { ..... if(req) { Asynchronous req.onreadystatechange = responseHandler; req.open(method, url, true ); req.setRequestHeader("content-type","application/x-www-form-urlencoded"); req.send(null); } Click <a href="javascript:xmlGet('GET','notes.xml',notesResponseHandler);"> here</a> to get the contents of <code>notes.xml</code> from the server.<br /> <div class="notes" id="notesSection"></div> XMLHttpRequest: Handling HTTP Response Handle the response callback from the server State checking Getting response text/xml/html/customs Handling XML DOM returned function notesResponseHandler() { // Make sure the request is loaded (readyState = 4) if (req.readyState == 4) { if (req.status == 200) { var swappableSection = document.getElementById('notesSection'); var notes = req.responseXML.getElementsByTagName('note'); ..... swappableSection.innerHTML = str; notes.innerHTML = strNote; Demo:Demo: SimpleSimple AJAXAJAX ASP.NET Script Callback ASP.NET 2.0 Script Callback Implement interface System.Web.UI.ICallbackEventHandler Implement method RaiseCallbackEvent Public string RaiseCallbackEvent(string eventArgs) Invoke Page.ClientScript.GetCallbackEventReference() method on Page_Load to glue back to client side method Page.ClientScript.GetCallbackEventReference(this , arg, [client-side function name], ctx, [client-side error handler function], async) AJAX draws back The back, stop, and refresh buttons don’t always work. Since Ajax applications generate pages dynamically, there generally aren’t static links available for bookmarking or sharing with others. Pages don’t always print well. Applications don’t run offline. Clicks and actions generally don’t get included into a browser’s history table Ajax requires JavaScript AJAX concerns Do not load entire pages Do not break what the user is focusing on Do not use it to eliminate acceptance Do not over use it Consider how to handle users that cannot use XMLHttpRequest How to best use AJAX Use it for small updates to the web page. Build as much of the user interface for the web page statically as possible in order to limit how many AJAX calls are needed. How Not To Use AJAX Each AJAX operation causes a new HTTP transaction so overuse can quickly bring down a heavily trafficked webserver. Don’t use it where it makes more sense to submit a form. Don’t use it for calculations and interface updates that can be done with client-side operations only. Good stuff Much more responsive user interface Desktop application functionality in familiar Web browser interface Client responsible for state management Zero effort software updates (for users!) “Cool” factor Bad stuff Requires “modern” browser DChart support currently limited to IE 6, Firefox 1.0.x, Mozilla Covers > 90% of users and alternative would be downloading desktop app Debugging is difficult A lot for developers to learn: XML,XPath,XSLT,JavaScript, CSS, DHTML, DOM… Libraries/frameworks immature Maintenance and testing difficult And the ugly… Browser incompatibilities still an issue: GET limited to 2048 characters in IE IE window coordinate system different than Firefox IE memory leaks Legacy ActiveX reference counting Transparent images with alpha channel Disappearing DOM nodes with XSLT in IE Ugly kludges required: GET/POST through Iframe to retain history MicrosoftMicrosoft ASP.NETASP.NET ““AtlasAtlas ”” Microsoft ASP.NET Atlas Microsoft AJAX Implementation on .NET Framework 2.0 Base on System.Web.UI.ICallBackEventHandler Cross-Browsers ***WOW*** Include 3 components Client script library Web server controls Web services Currently under Beta, planned release H1/2006 http://atlas.asp.net “Atlas” Architecture HTML, Script, “Atlas ” “Atlas ” Service “Atlas ”-enabled Web Services Markup Proxies ASP.NET Pages (ASMX or WCF) “Atlas” Client Script Library ASP.NET “Atlas” Server Extensions Controls, Components App Services “Atlas” Bridge “Atlas” Client Server Controls Component Model and Web Services Application UI Framework Bridge Services Base Class Library Local Store ASP.NET 2.0 Script Core Page Application Browser Framework, Services Integration Browser Compatibility Server Controls “Atlas ” Client Framework and “Atlas ” Server Services Framework “Atlas” Client Script Library “Atlas” script core – a full type system for Javascript Classes and interfaces, inheritance, virtual and abstract methods Enumerations Multi-cast event handlers similar to .NET Base class library StringBuilder, extensions to existing types Serializers Debugging and tracing classes Networking “Atlas” Networking Client networking stack layered on XMLHTTP WebRequest , WebResponse , MethodRequest classes ASP.NET “Atlas” Web Services Bridge Access to ASP.NET-hosted and serviced components ASMX and WCF services, .NET objects, ASP.NET page-level services Automatic client proxy generation <script src=“MyService.asmx/js” /> Integrated with ASP.NET intrinsics Wire format: Javascript object notation public class Location { public Point Coordinates; { Coordinates : { X: 2.17, Y: 48.51 }, public String Name; Name : "Eiffel Tower" } } “Atlas” Behaviors Behaviors add interactivity to any “Atlas” UI Easily attached to a DHTML element Built-in behaviors Richer data presentation: tooltips, floating windows Interactive input: autocomplete, drag and drop Glitz: animation and visual effects Work on all major browsers Demo:Demo: AtlasAtlas Other features of “Atlas” Components, controls, and behaviors Client-side data binding Client-side validation Upcoming features Templates UI Enhancement Extensible Framework Preparing for “Atlas” Structure your application for reuse Separate application UI functionality into web services Build UI components using user controls Use CSS to style web apps Use ASP.NET 2.0 ASP.NET client callbacks (ICallbackEventHandler) UI personalization Application building-block services Start thinking about richer web UI experiences Web Sites atlas.asp.net www.ajaxian.com www.ajaxgoals.com http://ajax.schwarz-interactive.de/csharpsample Conclusion Don’t use for the technology sake Understand usability testing Users’ve been trained with SUBMIT button Can’t redefine the way a UI works Understand restrictions Implicit JavaScript restrictions Programming constructs that you wish you had ThankThank youyou