Lessons from the Trenches: Engineering Great AJAX Experiences


Published on

Explore the challenges and lessons learned developing the Windows Live and Gadgets Web client frameworks powering Windows Live, Hotmail (Kahuna beta), Spaces, and more. This technical talk presents design and architectural considerations for building interactive AJAX-like sites. See how componentization, network management, accessibility, page composition, and more impact the design and engineering of your Web application.

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lessons from the Trenches: Engineering Great AJAX Experiences

  1. 1. Lessons From The Trenches Engineering great AJAX experiences Scott Isaacs Architect Windows Live Frameworks Microsoft Corporation NGW020
  2. 2. Agenda <ul><li>Rethinking Web Applications </li></ul><ul><li>&quot;Remixing&quot; on Windows Live </li></ul><ul><ul><li>Gadgets, gadgets, gadgets! </li></ul></ul><ul><li>What did we learn? </li></ul><ul><ul><li>Component models </li></ul></ul><ul><ul><li>Network Management </li></ul></ul><ul><ul><li>More… </li></ul></ul>
  3. 3. So What Is AJAX? Weather Service function DoAdd(strLoc) { Weather.Request(strLoc,onReceive) } function onReceive(obWeatherData) { ProcessWeather(objWeatherData) }
  4. 4. AJAX – The Details <ul><li>Describes a simple development pattern </li></ul><ul><ul><li>Asynchronously request data from the server </li></ul></ul><ul><ul><li>Process the Result </li></ul></ul><ul><ul><li>Update the Page </li></ul></ul><ul><ul><li>Technology has been around for many years </li></ul></ul><ul><li>Very good for improving form interactions </li></ul><ul><li>Usually insufficient by itself for building applications </li></ul><ul><li>Ajax is one tool (pattern) of many for building rich experiences </li></ul>
  5. 5. What Is A Mash-Up? <ul><li>Web applications that consumes (&quot;remixes&quot;) content and experience from different sources and aggregates them to create a new application </li></ul>
  6. 6. Remixing The Web <ul><li>What is the real web application revolution? </li></ul><ul><ul><li>I don't believe it is just Ajax </li></ul></ul><ul><ul><li>Where RSS democratized and syndicated content, mash-up patterns will democratize and syndicate experiences and ease service integration </li></ul></ul><ul><li>You can extend your reach by integrating with the rest of the web </li></ul><ul><ul><li>E.g., Windows Live Virtual Earth, &quot;Blog This&quot; page add-ons, etc </li></ul></ul>
  7. 7. Rethinking The Web What if everything was a mash-up? <ul><li>Mashing up as an architectural pattern </li></ul><ul><ul><li>More Efficient Development </li></ul></ul><ul><ul><li>Requires Componentization </li></ul></ul><ul><ul><ul><li>Web Pages are collections of Components </li></ul></ul></ul><ul><ul><ul><li>Better caching and reuse of resources </li></ul></ul></ul><ul><ul><li>Eliminate &quot;spaghetti&quot; ad-hoc HTML-coding </li></ul></ul><ul><li>Leverage your investments </li></ul><ul><ul><li>Reuse components across your product </li></ul></ul><ul><ul><li>Reuse your components across the web </li></ul></ul><ul><ul><li>The opportunity to be remixed </li></ul></ul><ul><li>Share more than just &quot;services&quot; </li></ul><ul><ul><li>Provide default and customizable experiences </li></ul></ul>
  8. 8. Remixing Windows Live <ul><li>Windows Live properties are mash-ups </li></ul><ul><ul><li>http://mail.live.com (Hotmail Beta) </li></ul></ul><ul><ul><li>http://www.live.com </li></ul></ul>
  9. 9. Why The Mash-Up Philosophy? <ul><li>More efficient development process </li></ul><ul><ul><li>We can share development resources </li></ul></ul><ul><ul><li>We can be more robust </li></ul></ul><ul><ul><li>We can quickly integrate services across properties without heavy server lifting </li></ul></ul><ul><ul><li>We can provide a consistent experience </li></ul></ul><ul><ul><li>We can scale better </li></ul></ul><ul><ul><li>Most important, we can offer better and more consistent customer experiences and value </li></ul></ul><ul><li>We dogfood one pattern (gadgets) for building and extending our properties </li></ul>
  10. 10. The Gadget Ecosystem <ul><li>At the core, all UI components are Gadgets </li></ul><ul><li>Third-party developers can </li></ul><ul><ul><li>Extend Windows Live home page </li></ul></ul><ul><li>In the future </li></ul><ul><ul><li>Extend other web experiences such as Spaces </li></ul></ul><ul><ul><li>Host Windows Live Gadgets on their own site </li></ul></ul><ul><ul><li>Extend Windows with Gadgets via the Sidebar </li></ul></ul><ul><li>Learning more… </li></ul><ul><ul><li>See http:// www.microsoftgadgets.com </li></ul></ul><ul><ul><li>Supported by ASP.Net Codename “Atlas” </li></ul></ul>
  11. 11. Let’s start digging in…
  12. 12. So what did we learn? <ul><li>Our mash-up architecture taught us a lot about building very rich interactive applications </li></ul><ul><li>We needed to evolve the AJAX pattern to handle “real-world” issues </li></ul><ul><li>We desired one “platform” to enable modern development and reuse </li></ul><ul><li>We created patterns and approaches to work around the limitations of the host environment (the browser) </li></ul><ul><li>… and we are still learning… </li></ul>
  13. 13. Building Web Applications AJAX - The Myth <ul><li>With Ajax, my application will scale better, run faster, and offer a better user experience </li></ul>
  14. 14. Evolving The AJAX Pattern <ul><li>We are solving challenges for building interactive web applications </li></ul><ul><ul><li>Defined a set of programming patterns to enable interactive web-sites </li></ul></ul><ul><li>Windows Live Architecture enables </li></ul><ul><ul><li>Client-Side Page Composition </li></ul></ul><ul><ul><li>Modern Development Patterns </li></ul></ul><ul><ul><li>Component Model </li></ul></ul><ul><ul><li>Network Management </li></ul></ul><ul><ul><li>Resource Deployment </li></ul></ul><ul><ul><li>Proxying, Caching, and Scalability </li></ul></ul><ul><ul><li>Themes and consistent experience </li></ul></ul><ul><ul><li>Cross-Browser equalizer </li></ul></ul><ul><li>So what does it take to build a robust rich web application? </li></ul>
  15. 15. The Application “Container” <ul><li>Server composes page </li></ul><ul><ul><li>Components directly embedded as page loads </li></ul></ul><ul><ul><ul><li>E.g., Adding/ Removing components reloads the page </li></ul></ul></ul><ul><ul><li>Initially easier to implement (content is flowed into the document) </li></ul></ul><ul><ul><li>Intelligent Caching is more difficult – page size grows quickly </li></ul></ul><ul><ul><li>All components impact page load </li></ul></ul><ul><li>Client composes page </li></ul><ul><ul><li>Components dynamically included on the page </li></ul></ul><ul><ul><li>Uses frameworks to deploy and inject components </li></ul></ul><ul><ul><li>Highly leverages caching of static resources – better scalability </li></ul></ul><ul><ul><li>Page composition can be “staged” and prioritized </li></ul></ul><ul><ul><li>Easier “mash-up” integration but harder application development </li></ul></ul><ul><li>Scenario (not technology) should drive the chosen approach </li></ul>
  16. 16. Client Composition
  17. 17. Modern Development Patterns <ul><li>Apply OO principals to web development </li></ul><ul><ul><li>Shared methodology with Atlas </li></ul></ul><ul><ul><li>Namespaces, Encapsulation, Inheritance, Object Lifecycle </li></ul></ul><ul><ul><ul><li>registerNamespace(&quot;ScottIsaacs&quot;); ScottIsaacs.MyClass = function() { this.initialize = function() {}; this.dispose = function() {}; } </li></ul></ul></ul><ul><ul><ul><li>Application defines an object’s lifecycle, not the page </li></ul></ul></ul><ul><li>Separate semantics, presentation, and behavior </li></ul><ul><ul><li>Build and program against objects, not structure </li></ul></ul><ul><ul><li>Yields more stable, maintainable system </li></ul></ul>
  18. 18. Gadget Challenges <ul><li>How do you build and integrate components (gadgets)? </li></ul><ul><ul><li>Integrating components without collisions </li></ul></ul><ul><ul><li>Consistent theme across components </li></ul></ul><ul><ul><li>Applying behaviors to HTML structure </li></ul></ul><ul><ul><li>Enabling Asynchronous Client-Side Page Composition (Deployment) </li></ul></ul><ul><ul><li>Security and Isolation </li></ul></ul>
  19. 19. Gadget “Patterns” <ul><li>Minimal Requirements </li></ul><ul><ul><li>Encapsulation Patterns (e.g., we use JavaScript Closures) </li></ul></ul><ul><ul><li>Patterns to manage object lifecycle </li></ul></ul><ul><ul><li>Separate Semantics, Presentation, and Behavior </li></ul></ul><ul><li>Advanced Requirements </li></ul><ul><ul><li>Patterns to enable asynchronous deployment </li></ul></ul><ul><ul><li>Patterns to enable asynchronous component communication </li></ul></ul><ul><ul><li>Patterns to &quot;infect&quot; components with the appropriate theme </li></ul></ul><ul><ul><li>Patterns to scope CSS layout to component types </li></ul></ul><ul><ul><li>Patterns to provide “Process Isolation” </li></ul></ul>
  20. 20. Defining A Gadget HTML … <div class=“weather”> </div> … Binds To Renders Gadget function Live.Weather(el,args) { Live.Weather.initializeBase(thi this.initialize = function(p_own { …. .Live_Weather {margin:2px} .Live_Weather input (width:50%; …
  21. 21. Live Clipboard Demo <ul><li>A “Clipboard” for the Web </li></ul><ul><ul><li>Enables copying microformats between web pages and applications </li></ul></ul><ul><li>Extending Existing Content </li></ul><ul><ul><li>Automatically bind behavior via CSS to elements (e.g., microformats) on your page </li></ul></ul><ul><ul><li>Our future approach to integrating Live Clipboard </li></ul></ul><ul><ul><li>Becomes a “Service” we can apply to Gadgets </li></ul></ul><ul><li>Demo… </li></ul><ul><li>More About Live Clipboard </li></ul><ul><ul><li>Read http://spaces.msn.com/rayozzie </li></ul></ul><ul><ul><li>Attend “Wiring the Web” Wed @ 8:30am </li></ul></ul>
  22. 22. XML Proxying And Scalability <ul><li>Scenario </li></ul><ul><ul><li>How do you consume arbitrary RSS feeds? </li></ul></ul><ul><ul><li>You need to proxy the requests through your server </li></ul></ul><ul><ul><li>Consider the scalability implications (intelligently cache remote data, etc.) </li></ul></ul><ul><li>Browser Sandbox Problem </li></ul><ul><ul><li>The client cannot consume XML data from other domains </li></ul></ul><ul><ul><li>How do you get the data? </li></ul></ul><ul><li>So how do maps works and why they are unique? </li></ul><ul><ul><li>They are a set of images with algorithmically determines URLs </li></ul></ul><ul><ul><li>It would be difficult to consume a geo-location service via the client </li></ul></ul><ul><ul><li>Integrating disparate services and personal data is the next challenge </li></ul></ul><ul><ul><li>The mapping components (e.g., Virtual Earth) are not typical AJAX (no XML) </li></ul></ul><ul><li>Some creative solutions using dynamic scripts instead of xml </li></ul>
  23. 23. Web Service Integration <ul><li>Do not want to continually parse XML </li></ul><ul><li>Desire a more natural and efficient approach </li></ul><ul><ul><li>Web Services generate JavaScript proxies: WeatherService.requestWeatherReport(strLocation,onReceipt) </li></ul></ul><ul><ul><li>Use generic format for transport (e.g., JSON) </li></ul></ul><ul><ul><li>Incoming requests marshaled to native server format and outgoing responses to client format </li></ul></ul><ul><li>Use xmlHttpRequest to access the network, but the wire format is transparent to the application </li></ul><ul><ul><li>Use raw XML for &quot;documents&quot; (e.g., RSS) </li></ul></ul>
  24. 24. Optimizing The Network <ul><li>AJAX-style applications can become very chatty </li></ul><ul><ul><li>E.g., fetch stock quotes, fetch weather, fetch top articles, etc to render the page </li></ul></ul><ul><ul><li>Look for caching opportunities </li></ul></ul><ul><ul><li>Look for opportunities to batch requests (especially requests that may share similar expensive upfront processing) </li></ul></ul>
  25. 25. Be Wary Of Security <ul><li>Increased attack vectors </li></ul><ul><ul><li>Traditionally pages were “rendered” entirely on the server – no direct client access to the underlying data </li></ul></ul><ul><ul><li>With AJAX, data exposed directly via services </li></ul></ul><ul><ul><li>AJAX and Mash-ups can increase likelihood of intentional and unintentional DOS attacks </li></ul></ul><ul><ul><ul><li>&quot;Bad&quot; code hitting your service </li></ul></ul></ul><ul><ul><li>Unintended repurposing of your services </li></ul></ul><ul><li>Mash-up Code Sharing </li></ul><ul><ul><li>You must trust the code you consume or you must create a sandbox around the code </li></ul></ul><ul><ul><li>Be careful referencing &quot;untrusted&quot; third-party scripts </li></ul></ul>
  26. 26. Advanced Network Patterns <ul><li>While AJAX prescribes a request-response pattern, it does not prescribe how to efficiently manage the network </li></ul><ul><li>Before AJAX </li></ul><ul><ul><li>Web Page Model offers default connection management </li></ul></ul><ul><ul><ul><li>Connections severed as you navigate </li></ul></ul></ul><ul><ul><ul><li>Failures were apparent via 404 errors </li></ul></ul></ul><ul><ul><li>Requests were all equal (typically preloading images – order was not important) </li></ul></ul><ul><ul><li>Typically limited amount of script </li></ul></ul><ul><li>With AJAX </li></ul><ul><ul><li>Must be more aware of the unreliable network </li></ul></ul><ul><ul><ul><li>Failures and users leaving the page before an operation completes </li></ul></ul></ul><ul><ul><li>Some requests are relevant to specific contexts </li></ul></ul><ul><ul><li>Some requests are more important than others (delete mail more important than preloading an image) </li></ul></ul><ul><ul><li>Potentially extensively more script </li></ul></ul><ul><li>How do you mitigate limited bandwidth and connections and proactively control the network in your web application? </li></ul>
  27. 27. Network Constraints <ul><li>Browser offers no &quot;reliable&quot; transport for network operations </li></ul><ul><li>Browser uses at most 2 simultaneous connections per domain </li></ul><ul><li>Browser offers no built-in facility to interact with the network stack </li></ul>
  28. 28. The Unreliable Network <ul><li>With AJAX, how do you guarantee &quot;integrity&quot; of the request? </li></ul><ul><ul><li>Most Web Applications incorrectly &quot;assume&quot; success </li></ul></ul><ul><li>For example, AJAX Shopping Cart </li></ul><ul><ul><li>User clicks buy and then quickly leaves the page. Did the order go through? </li></ul></ul><ul><ul><li>User clicks buy, switches views on the page, and the order fails. How do you notify the user? </li></ul></ul><ul><li>Designing proper feedback is essential </li></ul><ul><ul><li>Define a standard UI feedback metaphor and stick to it </li></ul></ul><ul><ul><li>Hotmail lets you know when it is &quot;working…“ </li></ul></ul><ul><li>In IE, when integrity is required, you can ask the user to stay on the page until an operation completes (but you can't force them) </li></ul>
  29. 29. Emulating The Web Model <ul><li>Scenario </li></ul><ul><ul><li>Build an application with multiple views e.g., Inbox, Calendar, and Contacts </li></ul></ul><ul><ul><li>The first view is loading </li></ul></ul><ul><ul><li>User quickly switches to another view before data completely loads </li></ul></ul><ul><ul><li>Second view requests data </li></ul></ul><ul><ul><li>What happens? </li></ul></ul><ul><li>Quick Demonstration… </li></ul>
  30. 30. Prioritizing Network Requests <ul><li>AJAX Scenario </li></ul><ul><ul><li>Your page is preloading images </li></ul></ul><ul><ul><li>User clicks “Buy It&quot; from your AJAX cart </li></ul></ul><ul><ul><li>When does the order request happen? </li></ul></ul><ul><li>Proactively manage the network stack </li></ul>
  31. 31. Code/Resource Deployment <ul><li>More Interactivity = More Code = Slower Site </li></ul><ul><ul><li>How do you build sites with lots of components </li></ul></ul><ul><ul><li>How do you build a &quot;portal&quot; where the user controls the scope of the application </li></ul></ul><ul><ul><li>How do you efficiently deploy the necessary code and resources? </li></ul></ul><ul><li>Understand how the browser works </li></ul><ul><ul><li>Scripts included on the page block and load one at a time </li></ul></ul><ul><ul><li>Large number of script blocks can greatly stall loading </li></ul></ul><ul><li>System for deploying code </li></ul><ul><ul><li>Patterns allow component resources to load in any order </li></ul></ul><ul><ul><li>Deployed code asynchronously leveraging all available connections </li></ul></ul><ul><ul><li>Prioritize the loading of components </li></ul></ul><ul><ul><li>Never expire static content (change the URL to break the cache) </li></ul></ul>
  32. 32. X-Browser Development <ul><li>Minimize browser specific code in the business logic </li></ul><ul><ul><li>Abstract and centralize API differences </li></ul></ul><ul><ul><li>We extend Firefox and Opera DOM to be compatible with IE </li></ul></ul><ul><li>CSS Differences – Avoid Hacks </li></ul><ul><ul><li>We classify and override via standard selectors <HTML class=&quot;Mozilla M1 D5 Windows&quot;> Body {margin:10px} .Mozilla Body {margin:5px} /* Override Mozilla */ </li></ul></ul>
  33. 33. The Remix Experience <ul><li>How do you maintain consistency? </li></ul><ul><li>A critical issue as remixing grows </li></ul><ul><ul><li>How do you reflect your sites look and feel over third-party components? </li></ul></ul><ul><ul><li>How do third-party components build CSS that does not impact the sites intent? </li></ul></ul><ul><li>Prescribed patterns to scope CSS to your component </li></ul><ul><ul><li>Your unique JavaScript class can serve as an identifier to scope your styles </li></ul></ul><ul><li>Think how ambient themes &quot;infect&quot; components </li></ul>
  34. 34. Back Button And Addressability <ul><li>Users expect the web to work </li></ul><ul><ul><li>Demo: MSN Spaces, Windows Live </li></ul></ul><ul><li>Travelog (History stack) is hard </li></ul><ul><ul><li>Requires “hacks” to enable back-button </li></ul></ul><ul><ul><li>Need to decide what is a navigation (add to history) versus an action </li></ul></ul><ul><ul><li>In some cases, a better experience may be achieved by actually navigating and reloading the page </li></ul></ul><ul><li>URL Addressability Challenge, Favorites </li></ul><ul><ul><li>Short Demo: Windows Live Local </li></ul></ul>
  35. 35. Accessibility <ul><li>Web Accessibility is challenging </li></ul><ul><li>HTML Accessibility </li></ul><ul><ul><li>Always use structural semantics to establish “role” </li></ul></ul><ul><ul><li>E.g., H n , Label, TH (table headers), lists, etc. </li></ul></ul><ul><li>DHTML “Effects” (Synchronous actions) </li></ul><ul><ul><li>Use “focusable” elements (e.g, hyperlinks) </li></ul></ul><ul><ul><li>Dynamically display content in context </li></ul></ul><ul><li>AJAX (Asynchronous actions) </li></ul><ul><ul><li>Update in context then notify accessibility tool that page is updated </li></ul></ul><ul><ul><li>E.g., navigate a hidden iframe </li></ul></ul>
  36. 36. Building Web Applications <ul><li>Conceptualize your application as a Mash-Up </li></ul><ul><ul><li>Put &quot;Engineering&quot; into your client </li></ul></ul><ul><ul><li>Flesh out the intended scenarios and application flow </li></ul></ul><ul><ul><li>Avoid (or minimize) breaking the Web Model </li></ul></ul><ul><li>To learn more on Microsoft’s investments in this area </li></ul><ul><ul><li>Explore Microsoft Gadgets ( http:// www.microsoftgadgets.com ) </li></ul></ul><ul><ul><li>Explore the Live Clipboard </li></ul></ul><ul><ul><li>Download the latest Atlas CTP (http://atlas.asp.net) </li></ul></ul><ul><li>Invest wisely… </li></ul><ul><ul><li>Invest smartly and don't lose site of your customer </li></ul></ul><ul><ul><li>Its your customer, not the technology you apply, that matters </li></ul></ul>
  37. 37. Questions
  38. 38. © 2006 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.