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”

Let’s start digging in…

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

Client Composition

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