Published on

Published in: Business, Technology
  • 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


  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