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.
What is a mash-up? <ul><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></ul>

7.
Rethinking the Web What if everything was a mash-up? <ul><li>More Efficient Development </li></ul><ul><ul><li>Componentized Development </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>

9.
Why Windows Live &quot;Mash-ups&quot; <ul><li>More efficient development process </li></ul><ul><ul><li>We can share development resources </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 are opening up the &quot;platform&quot; to the community with Gadgets and via Asp.Net Atlas </li></ul>

18.
The Network and your Component <ul><li>AJAX 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>

19.
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>

22.
Advanced Networking Patterns <ul><li>While AJAX prescribes a request-response pattern, it does not prescribe how to efficiently manage the network </li></ul><ul><li>Constraints </li></ul><ul><ul><li>Browser uses at most 2 simultaneous connections per domain </li></ul></ul><ul><ul><li>Browser offers no built-in facility to interact with the network stack </li></ul></ul><ul><ul><li>Browser offers no &quot;reliable&quot; transport for network operations </li></ul></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>Some requests are more important than others (delete mail more important than preloading an image) </li></ul></ul><ul><ul><li>Some requests are relevant to specific contexts </li></ul></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>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>

23.
Advanced Networking Patterns 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><ul><li>Designing proper feedback is essential </li></ul></ul><ul><ul><li>Define a standard UI feedback metaphor and stick to it </li></ul></ul><ul><ul><ul><li>Hotmail lets you know when it is &quot;working…“ </li></ul></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>

26.
Advanced Networking Patterns Code and 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>

29.
The Back Button and Addressability The Ugly Side of &quot;Ajax&quot; <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 (lots of creative hacks) </li></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>