Lessons from the Trenches: Engineering Great AJAX Experiences

Lessons From The Trenches Engineering great AJAX experiences Scott Isaacs Architect Windows Live Frameworks Microsoft Corporation NGW020

Agenda Rethinking Web Applications "Remixing" on Windows Live Gadgets, gadgets, gadgets! What did we learn? Component models Network Management More…

So What Is AJAX? Weather Service function DoAdd(strLoc) { Weather.Request(strLoc,onReceive) } function onReceive(obWeatherData) { ProcessWeather(objWeatherData) }

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

What Is A Mash-Up? Web applications that consumes ("remixes") content and experience from different sources and aggregates them to create a new application

Remixing The Web What is the real web application revolution? I don't believe it is just 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

Rethinking The Web What if everything was a mash-up? Mashing up as an architectural pattern More Efficient Development Requires Componentization 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

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

Why The Mash-Up Philosophy? More efficient development process We can share development resources We can be more robust 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 dogfood one pattern (gadgets) for building and extending our properties

The Gadget Ecosystem At the core, all UI components are Gadgets Third-party developers can Extend Windows Live home page In the future Extend other web experiences such as Spaces Host Windows Live Gadgets on their own site Extend Windows with Gadgets via the Sidebar Learning more… See http:// www.microsoftgadgets.com Supported by ASP.Net Codename “Atlas”

So what did we learn? Our mash-up architecture taught us a lot about building very rich interactive applications We needed to evolve the AJAX pattern to handle “real-world” issues We desired one “platform” to enable modern development and reuse We created patterns and approaches to work around the limitations of the host environment (the browser) … and we are still learning…

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

Evolving The AJAX Pattern We are solving challenges for building interactive web applications Defined a set of programming patterns to enable interactive web-sites Windows Live Architecture enables Client-Side Page Composition Modern Development Patterns Component Model Network Management Resource Deployment Proxying, Caching, and Scalability Themes and consistent experience Cross-Browser equalizer So what does it take to build a robust rich web application?

The Application “Container” Server composes page Components directly embedded as page loads E.g., Adding/ Removing components reloads the page Initially 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 “staged” and prioritized Easier “mash-up” integration but harder application development Scenario (not technology) should drive the chosen approach

Modern Development Patterns Apply OO principals to web development Shared methodology with Atlas Namespaces, Encapsulation, Inheritance, Object Lifecycle registerNamespace("ScottIsaacs"); ScottIsaacs.MyClass = function() { this.initialize = function() {}; this.dispose = function() {}; } Application defines an object’s lifecycle, not the page Separate semantics, presentation, and behavior Build and program against objects, not structure Yields more stable, maintainable system

Gadget Challenges How do you build and integrate components (gadgets)? Integrating components without collisions Consistent theme across components Applying behaviors to HTML structure Enabling Asynchronous Client-Side Page Composition (Deployment) Security and Isolation

Gadget “Patterns” Minimal Requirements Encapsulation Patterns (e.g., we use JavaScript Closures) Patterns to manage object lifecycle Separate Semantics, Presentation, and Behavior 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 Patterns to provide “Process Isolation”

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%; …

Live Clipboard Demo A “Clipboard” for the Web Enables copying microformats between web pages and applications Extending Existing Content Automatically bind behavior via CSS to elements (e.g., microformats) on your page Our future approach to integrating Live Clipboard Becomes a “Service” we can apply to Gadgets Demo… More About Live Clipboard Read http://spaces.msn.com/rayozzie Attend “Wiring the Web” Wed @ 8:30am

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

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 Use raw XML for "documents" (e.g., RSS)

Optimizing The Network AJAX-style 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)

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

Advanced Network Patterns While AJAX prescribes a request-response pattern, it does not prescribe how to efficiently manage the network 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 Must be more aware of the unreliable network Failures and users leaving the page before an operation completes Some requests are relevant to specific contexts Some requests are more important than others (delete mail more important than preloading an image) Potentially extensively more script How do you mitigate limited bandwidth and connections and proactively control the network in your web application?

Network Constraints Browser offers no "reliable" transport for network operations Browser uses at most 2 simultaneous connections per domain Browser offers no built-in facility to interact with the network stack

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)

Emulating The Web Model Scenario Build an application with multiple views e.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…

Prioritizing Network Requests AJAX Scenario Your page is preloading images User clicks “Buy It" from your AJAX cart When does the order request happen? Proactively manage the network stack

Code/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)

X-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 classify and override via standard selectors <HTML class="Mozilla M1 D5 Windows"> Body {margin:10px} .Mozilla Body {margin:5px} /* Override Mozilla */

The Remix Experience How do you maintain consistency? 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

Back Button And Addressability Users expect the web to work Demo: MSN Spaces, Windows Live Travelog (History stack) is hard Requires “hacks” to enable back-button 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

Accessibility Web Accessibility is challenging HTML Accessibility Always use structural semantics to establish “role” E.g., H n , 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

Building Web Applications Conceptualize your application as a Mash-Up 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 ) Explore the Live Clipboard Download the latest Atlas CTP (http://atlas.asp.net) Invest wisely… Invest smartly and don't lose site of your customer Its your customer, not the technology you apply, that matters

Lessons from the Trenches: Engineering Great AJAX Experiences

More Related Content

What's hot

Viewers also liked

Similar to Lessons from the Trenches: Engineering Great AJAX Experiences

More from goodfriday

Lessons from the Trenches: Engineering Great AJAX Experiences