Transcript MIX: The Next Web Now A 72 Hour Conversation

Creating Rich Interactive Web
Applications using AJAX
Scott Isaacs
Architect, Windows Live Frameworks
Microsoft Corporation
<Agenda>
 Rethinking Web Applications
 "Remixing" on Windows Live
 Building Web Applications
So what is AJAX?
function DoAdd(strLoc)
{
Weather.Request(strLoc,onReceive)
}
function onReceive(obWeatherData)
{
ProcessWeather(objWeatherData)
}
Weather
Service
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 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?
 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
Rethinking Windows Live
 Windows Live properties are mash-ups
 http://mail.live.com (Hotmail Beta)
 http://www.live.com
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
Windows Live Framework
Our 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
Building Web Applications
AJAX - The Myth
With Ajax, my application will
scale better,
run faster,
and offer a better user experience
Windows Live Framework
Going Beyond Ajax
 Solving the challenges of building interactive web applications
 Implements a set of programming patterns to enable interactive websites
 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?
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
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
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
Defining a Component (Gadget)
HTML
…
<div class=“weather”>
</div>
…
Gadget
Binds To
function Live.Weather(el,args)
{
Live.Weather.initializeBase(thi
this.initialize = function(p_own
{
….
Renders
.Live_Weather {margin:2px}
.Live_Weather input (width:50%;
…
Remixing Approach
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)
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
 Only use raw XML for "documents" (e.g., RSS)
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 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





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



Connections severed as you navigate
Failures were apparent via 404 errors
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?
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)
Advanced Networking Patterns
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…
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
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)
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 */
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
The Back Button and Addressability
The 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
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
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
 For
 Consumer Web
developers, designers,
web SIs, web hosters
 Featuring
 About
 AJAX, ASP.NET,
“Atlas”, Expression,
IE7, IIS7, InfoCard,
Windows Live!, Office
“12”, RSS, WCF, WPF,
Visual Studio
 Bill Gates, Tim O’Reilly, Amazon, industry web leaders
March 20-22, Las Vegas, Venetian Hotel
Registration: $995, Register Now: mix06.com
<Questions/>