Creating Rich Interactive Web Applications using AJAX

1. Creating Rich Interactive Web Applications using AJAX Scott Isaacs Architect, Windows Live FrameworksMicrosoft Corporation

2. <Agenda> • Rethinking Web Applications • "Remixing" on Windows Live • Building Web Applications

3. So what is AJAX? function DoAdd(strLoc){ Weather.Request(strLoc,onReceive)} Weather Service function onReceive(obWeatherData) { ProcessWeather(objWeatherData)}

4. AJAX – The details • Describes a simple development pattern • Asynchronously request data from the server • Process the Result • Update the Page • Technology has been around for many years • Very good for improving form interactions • Usually insufficient by itself for building applications • Ajax is one tool (pattern) of many for building rich experiences

5. What is a mash-up? Web applications that consumes ("remixes") content and experience from different sources and aggregates them to create a new application

6. Remixing the Web • What is the real web application revolution? • I don't believe it is Ajax • Where RSS democratized and syndicated content, mash-up patterns will democratize and syndicate experiences and ease service integration • You can extend your reach by integrating with the rest of the web • E.g., Windows Live Virtual Earth, "Blog This" page add-ons, etc

7. Rethinking the WebWhat if everything was a mash-up? • More Efficient Development • Componentized Development • Web Pages are collections of Components • Better caching and reuse of resources • Eliminate "spaghetti" ad-hoc HTML-coding • Leverage your investments • Reuse components across your product • Reuse your components across the web! • The opportunity to be remixed • Share more than just "services" • Provide default and customizable experiences

8. Rethinking Windows Live • Windows Live properties are mash-ups • http://mail.live.com (Hotmail Beta) • http://www.live.com

9. Why Windows Live "Mash-ups" • More efficient development process • We can share development resources • We can quickly integrate services across properties without heavy server lifting • We can provide a consistent experience • We can scale better • Most important, we can offer better and more consistent customer experiences and value • We are opening up the "platform" to the community with Gadgets and via Asp.Net Atlas

10. Windows Live FrameworkOur Pattern for Mash-ups • Client framework for building rich interactive web applications • Enables extensibility via Windows Live Gadgets • A pattern for building remixable components • Designed to enable developers to enhance the Windows and web experience • See http://www.microsoftgadgets.com • Extends to Microsoft tools via ASP.Net Atlas • We develop to one universal pattern • We dogfood the same patterns and approaches to build our own sites • Every Live.com component is also a Gadget

11. Building Web ApplicationsAJAX - The Myth With Ajax, my application will scale better, run faster, and offer a better user experience

12. Windows Live FrameworkGoing Beyond Ajax • Solving the challenges of building interactive web applications • Implements a set of programming patterns to enable interactive web-sites • ASP.Net Atlas is Microsoft's toolset for third-party developers • Infrastructure for • Client-Side Page Composition • Modern Development Patterns • Component Model • Network Management • Resource Deployment • Proxying, Caching, and Scalability • Themeing and consistent experience • Cross-Browser equalizer • So what does it take to build a robust rich web application?

13. Server vs. Client Dynamic Page Composition • Server composes page • Components directly embedded as page loads • E.g., Adding/ Removing components reloads the page • Typically easier to implement (content is flowed into the document) • Intelligent Caching is more difficult – page size grows quickly • All components impact page load • Client composes page • Components dynamically included on the page • Uses frameworks to deploy and inject components • Highly leverages caching of static resources – better scalability • Page composition can be prioritized • The typical pattern for enabling "mash-ups“ (e.g., loading a map component) • Scenario (not the technology) should drive the chosen approach

14. Modern Development Patterns • Apply OOP principals to web development • Namespaces, Encapsulation, Inheritance, Object Lifecycle • registerNamespace("ScottIsaacs");ScottIsaacs.MyClass = function(){ this.initialize = function() {}; this.dispose = function() {};} • Separate semantics, presentation, and behavior • Build and program against objects, not structure • Yields more stable, maintainable system

15. Asynchronous Component Model • How do you build and integrate components? • Challenges: • Integrating components without collisions • Consistent theme across components • Enabling Asynchronous Client-Side Page Composition • Component (Gadgets) Patterns • Minimal Requirements • Encapsulation Patterns (e.g., we use Javascript Closures) • Patterns to manage object lifecycle • Advanced Requirements • Patterns to enable asynchronous deployment • Patterns to enable asynchronous component communication • Patterns to "infect" components with the appropriate theme • Patterns to scope CSS layout to component types

16. Gadget Binds To function Live.Weather(el,args){ Live.Weather.initializeBase(thi this.initialize = function(p_own { …. .Live_Weather {margin:2px}.Live_Weather input (width:50%;… Renders Defining a Component (Gadget) HTML …<div class=“weather”></div>…

17. Remixing Approach

18. The Network and your Component • AJAX applications can become very chatty • E.g., fetch stock quotes, fetch weather, fetch top articles, etc to render the page • Look for caching opportunities • Look for opportunities to batch requests (especially requests that may share similar expensive upfront processing)

19. XML Proxying and Scalability • Scenario • How do you consume arbitrary RSS feeds? • You need to proxy the requests through your server • Consider the scalability implications (intelligently cache remote data, etc.) • Browser Sandbox Problem • The client cannot consume XML data from other domains • How do you get the data? • So how do maps works and why they are unique? • They are a set of images with algorithmically determines URLs • It would be difficult to consume a geo-location service via the client • Integrating disparate services and personal data is the next challenge • The mapping components (e.g., Virtual Earth) are not typical AJAX (no XML) • Some creative solutions using dynamic scripts instead of xml

20. Web Service Integration • Do not want to continually parse XML • Desire a more natural and efficient approach • Web Services generate JavaScript proxies:WeatherService.requestWeatherReport(strLocation,onReceipt) • Use generic format for transport (e.g., JSON) • Incoming requests marshaled to native server format and outgoing responses to client format • Use xmlHttpRequest to access the network, but the wire format is transparent to the application • Only use raw XML for "documents" (e.g., RSS)

21. Be wary of security • Increased attack vectors • Traditionally pages were “rendered” entirely on the server – no direct client access to the underlying data • With AJAX, data exposed directly via services • AJAX and Mash-ups can increase likelihood of intentional and unintentional DOS attacks • "Bad" code hitting your service • Unintended repurposing of your services • Mash-up Code Sharing • You must trust the code you consume or you must create a sandbox around the code • Be careful referencing "untrusted" third-party scripts

22. Advanced Networking Patterns • While AJAX prescribes a request-response pattern, it does not prescribe how to efficiently manage the network • Constraints • Browser uses at most 2 simultaneous connections per domain • Browser offers no built-in facility to interact with the network stack • Browser offers no "reliable" transport for network operations • Before AJAX • Web Page Model offers default connection management • Connections severed as you navigate • Failures were apparent via 404 errors • Requests were all equal (typically preloading images – order was not important) • Typically limited amount of script • With AJAX • Some requests are more important than others (delete mail more important than preloading an image) • Some requests are relevant to specific contexts • Must be more aware of the unreliable network • Failures and users leaving the page before an operation completes • Potentially extensively more script • How do you mitigate limited bandwidth and connections and proactively control the network in your web application?

23. Advanced Networking Patterns The Unreliable Network • With AJAX, how do you guarantee "integrity" of the request? • Most Web Applications incorrectly "assume" success • For example, AJAX Shopping Cart • User clicks buy and then quickly leaves the page. Did the order go through? • User clicks buy, switches views on the page, and the order fails. How do you notify the user? • Designing proper feedback is essential • Define a standard UI feedback metaphor and stick to it • Hotmail lets you know when it is "working…“ • 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)

24. Advanced Networking Patterns Emulating the Web Model • Scenario • Build an application with multiple viewse.g., Inbox, Calendar, and Contacts • The first view is loading • User quickly switches to another view before data completely loads • Second view requests data • What happens? • Quick Demonstration…

25. Advanced Networking Patterns Prioritizing Network Requests • AJAX Scenario • Your page is preloading images • User clicks "Order It" from your AJAX cart • What happens? • Proactively manage the network stack

26. Advanced Networking Patterns Code and Resource Deployment • More Interactivity = More Code = Slower Site • How do you build sites with lots of components • How do you build a "portal" where the user controls the scope of the application • How do you efficiently deploy the necessary code and resources? • Understand how the browser works • Scripts included on the page block and load one at a time • Large number of script blocks can greatly stall loading • System for deploying code • Patterns allow component resources to load in any order • Deployed code asynchronously leveraging all available connections • Prioritize the loading of components • Never expire static content (change the URL to break the cache)

27. Cross Browser Development • Minimize browser specific code in the business logic • Abstract and centralize API differences • We extend Firefox and Opera DOM to be compatible with IE • CSS Differences – Avoid Hacks • We will create clear overrides by automatically adding classifications<HTML class="Mozilla M1 D5 Windows">Body {margin:10px}.Mozilla Body {margin:5px} /* Override Mozilla */

28. Providing a Consistent Experience • A critical issue as remixing grows • How do you reflect your sites look and feel over third-party components? • How do third-party components build CSS that does not impact the sites intent? • Prescribed patterns to scope CSS to your component • Your unique JavaScript class can serve as an identifier to scope your styles • Think how ambient themes "infect" components

29. The Back Button and AddressabilityThe Ugly Side of "Ajax" • Users expect the web to work • Demo: MSN Spaces, Windows Live • Travelog (History stack) is hard (lots of creative hacks) • Need to decide what is a navigation (add to history) versus an action • In some cases, a better experience may be achieved by actually navigating and reloading the page • URL Addressability Challenge, Favorites • Short Demo: Windows Live Local

30. Web Accessibility and AJAX • Web Accessibility is challenging • HTML Accessibility • Always use structural semantics to establish “role” • E.g., Hn, Label, TH (table headers), lists, etc. • DHTML “Effects” (Synchronous actions) • Use “focusable” elements (e.g, hyperlinks) • Dynamically display content in context • AJAX (Asynchronous actions) • Update in context then notify accessibility tool that page is updated • E.g., navigate a hidden iframe

31. Building Rich Web Applications • There is more to building rich applications than AJAX • Put "Engineering" into your client • Flesh out the intended scenarios and application flow • Avoid (or minimize) breaking the Web Model • To learn more on Microsoft’s investments in this area • Explore Microsoft Gadgets (http://www.microsoftgadgets.com) • Download the latest ASP.Net Atlas Beta (http://atlas.asp.net) • Attend the Mix06 Conference (http://www.mix06.com) • Invest wisely… • Invest smartly and don't lose site of your customer • Its your customer, not the technology you apply, that matters

32. For Consumer Web developers, designers, web SIs, web hosters March 20-22, Las Vegas, Venetian Hotel Registration: $995, Register Now: mix06.com MIX: The Next Web NowA 72 Hour Conversation • About • AJAX, ASP.NET, “Atlas”, Expression, IE7, IIS7, InfoCard, Windows Live!, Office “12”, RSS, WCF, WPF, Visual Studio • Featuring • Bill Gates, Tim O’Reilly, Amazon, industry web leaders

33. <Questions/>