Creating rich interactive web applications using ajax
1 / 33

Creating Rich Interactive Web Applications using AJAX - PowerPoint PPT Presentation

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?

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Creating Rich Interactive Web Applications using AJAX

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Creating Rich Interactive Web Applications using AJAX

Scott Isaacs

Architect, Windows Live FrameworksMicrosoft Corporation


  • Rethinking Web Applications

  • "Remixing" on Windows Live

  • Building Web Applications

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 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 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

Rethinking Windows Live

  • Windows Live properties are mash-ups

    • (Hotmail Beta)


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 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

    • 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 component is also a Gadget

Building Web ApplicationsAJAX - The Myth

With Ajax, my application will scale better, run faster, and offer a better user experience

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?

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


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


Defining a Component (Gadget)


…<div class=“weather”></div>…

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

      • 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?

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

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 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

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 (

    • Download the latest ASP.Net Atlas Beta (

    • Attend the Mix06 Conference (

  • Invest wisely…

    • Invest smartly and don't lose site of your customer

    • Its your customer, not the technology you apply, that matters


Consumer Web developers, designers, web SIs, web hosters

March 20-22, Las Vegas, Venetian Hotel

Registration: $995, Register Now:

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


  • Login