NGW020

Lessons From The Trenches

Engineering great AJAX experiences

Scott Isaacs
Architect
Windows Live Frameworks
Microsoft Corporation
Agenda
Rethinking Web Applications
"Remixing" on Windows Live
Gadgets, gadgets, gadgets!
What did we learn?
Component models
Network Management
More…
So What Is AJAX?

function DoAdd(strLoc)
{
Weather.Request(strLoc,onReceive)
}
Weather
Service
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 Gadget
…
<div class=“weather”> Binds To
</div> function Live.Weather(el,args)
… {
Live.Weather.initializeBase(thi
this.initialize = function(p_own
{
….

.Live_Weather {margin:2px}
.Live_Weather input (width:50%;
Renders
…
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(strLocatio
n,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., 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
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
Questions
 © 2006 Microsoft Corporation. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.