Creating Rich Interactive Web Applications using AJAX

Creating Rich Interactive Web Applications using AJAX

Scott IsaacsScott IsaacsArchitect, Windows Live Architect, Windows Live FrameworksFrameworksMicrosoft CorporationMicrosoft Corporation

<Agenda><Agenda>

Rethinking Web ApplicationsRethinking Web Applications "Remixing" on Windows Live "Remixing" on Windows Live Building Web ApplicationsBuilding Web Applications

So what is AJAX?So what is AJAX?

Weather Service

function DoAdd(strLoc){ Weather.Request(strLoc,onReceive)}

function onReceive(obWeatherData){ ProcessWeather(objWeatherData)}

AJAX – The detailsAJAX – The details

Describes a simple development patternDescribes a simple development pattern Asynchronously request data from the serverAsynchronously request data from the server Process the ResultProcess the Result Update the PageUpdate the Page Technology has been around for many yearsTechnology has been around for many years

Very good for improving form interactionsVery good for improving form interactions Usually insufficient by itself for building Usually insufficient by itself for building

applicationsapplications Ajax is one tool (pattern) of many for Ajax is one tool (pattern) of many for

building rich experiencesbuilding rich experiences

What is a mash-up?What is a mash-up?

Web applications that consumes Web applications that consumes ("remixes") content and experience from ("remixes") content and experience from different sources and aggregates them different sources and aggregates them

to create a new applicationto create a new application

Remixing the WebRemixing the Web

What is the real web application What is the real web application revolution?revolution? I don't believe it is AjaxI don't believe it is Ajax Where RSS democratized and syndicated Where RSS democratized and syndicated

content, mash-up patterns will content, mash-up patterns will democratize and syndicate experiences democratize and syndicate experiences and ease service integrationand ease service integration

You can extend your reach by You can extend your reach by integrating with the rest of the webintegrating with the rest of the web E.g., Windows Live Virtual Earth, "Blog E.g., Windows Live Virtual Earth, "Blog

This" page add-ons, etcThis" page add-ons, etc

Rethinking the WebRethinking the WebWhat if everything was a mash-up?What if everything was a mash-up?

More Efficient DevelopmentMore Efficient Development Componentized DevelopmentComponentized Development

Web Pages are collections of ComponentsWeb Pages are collections of Components Better caching and reuse of resourcesBetter caching and reuse of resources

Eliminate "spaghetti" ad-hoc HTML-codingEliminate "spaghetti" ad-hoc HTML-coding

Leverage your investmentsLeverage your investments Reuse components across your productReuse components across your product Reuse your components across the web!Reuse your components across the web! The opportunity to be remixedThe opportunity to be remixed

Share more than just "services"Share more than just "services" Provide default and customizable experiencesProvide default and customizable experiences

Rethinking Windows LiveRethinking Windows Live

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

Why Windows Live "Mash-ups"Why Windows Live "Mash-ups"

More efficient development processMore efficient development process We can share development resourcesWe can share development resources We can quickly integrate services across We can quickly integrate services across

properties without heavy server liftingproperties without heavy server lifting We can provide a consistent experienceWe can provide a consistent experience We can scale betterWe can scale better Most important, we can offer better and more Most important, we can offer better and more

consistent customer experiences and valueconsistent customer experiences and value

We are opening up the "platform" to the We are opening up the "platform" to the community with Gadgets and via Asp.Net community with Gadgets and via Asp.Net AtlasAtlas

Windows Live FrameworkWindows Live FrameworkOur Pattern for Mash-ups Our Pattern for Mash-ups

Client framework for building rich Client framework for building rich interactive web applicationsinteractive web applications

Enables extensibility via Windows Live Enables extensibility via Windows Live GadgetsGadgets A pattern for building remixable componentsA pattern for building remixable components Designed to enable developers to enhance the Designed to enable developers to enhance the

Windows and web experienceWindows and web experience See http://www.microsoftgadgets.comSee http://www.microsoftgadgets.com Extends to Microsoft tools via ASP.Net AtlasExtends to Microsoft tools via ASP.Net Atlas

We develop to one universal patternWe develop to one universal pattern We We dogfooddogfood the same patterns and approaches the same patterns and approaches

to build our own sitesto build our own sites Every Live.com component is also a GadgetEvery Live.com component is also a Gadget

Building Web ApplicationsBuilding Web ApplicationsAJAX - The MythAJAX - The Myth

With Ajax, my application will With Ajax, my application will scale better, scale better, run faster, run faster,

and offer a better user experienceand offer a better user experience

Windows Live FrameworkWindows Live FrameworkGoing Beyond AjaxGoing Beyond Ajax Solving the challenges of building interactive web Solving the challenges of building interactive web

applicationsapplications Implements a set of programming patterns to enable Implements a set of programming patterns to enable

interactive web-sitesinteractive web-sites ASP.Net Atlas is Microsoft's toolset for third-party developersASP.Net Atlas is Microsoft's toolset for third-party developers

Infrastructure forInfrastructure for Client-Side Page CompositionClient-Side Page Composition Modern Development PatternsModern Development Patterns Component ModelComponent Model Network ManagementNetwork Management Resource DeploymentResource Deployment Proxying, Caching, and ScalabilityProxying, Caching, and Scalability Themeing and consistent experienceThemeing and consistent experience Cross-Browser equalizerCross-Browser equalizer

So what does it take to build a robust rich web application?So what does it take to build a robust rich web application?

Server vs. Client Dynamic Server vs. Client Dynamic Page CompositionPage Composition Server composes pageServer composes page

Components directly embedded as page loadsComponents directly embedded as page loads E.g., Adding/ Removing components reloads the pageE.g., Adding/ Removing components reloads the page

Typically easier to implement (content is flowed into the Typically easier to implement (content is flowed into the document)document)

Intelligent Caching is more difficult – page size grows quicklyIntelligent Caching is more difficult – page size grows quickly All components impact page loadAll components impact page load

Client composes page Client composes page Components dynamically included on the pageComponents dynamically included on the page Uses frameworks to deploy and inject componentsUses frameworks to deploy and inject components Highly leverages caching of static resources – better scalabilityHighly leverages caching of static resources – better scalability Page composition can be prioritized Page composition can be prioritized The typical pattern for enabling "mash-ups“ (e.g., loading a The typical pattern for enabling "mash-ups“ (e.g., loading a

map component)map component)

Scenario (not the technology) should drive the chosen Scenario (not the technology) should drive the chosen approachapproach

Modern Development PatternsModern Development Patterns

Apply OOP principals to web developmentApply OOP principals to web development Namespaces, Encapsulation, Inheritance, Object Namespaces, Encapsulation, Inheritance, Object

LifecycleLifecycle registerNamespace("ScottIsaacs");registerNamespace("ScottIsaacs");

ScottIsaacs.MyClass = function()ScottIsaacs.MyClass = function(){{

this.initialize = function() {};this.initialize = function() {};this.dispose = function() {};this.dispose = function() {};

}}

Separate semantics, presentation, and Separate semantics, presentation, and behaviorbehavior Build and program against objects, not structureBuild and program against objects, not structure Yields more stable, maintainable systemYields more stable, maintainable system

Asynchronous Component ModelAsynchronous Component Model

How do you build and integrate How do you build and integrate components?components?

Challenges:Challenges: Integrating components without collisionsIntegrating components without collisions Consistent theme across componentsConsistent theme across components Enabling Asynchronous Client-Side Page Enabling Asynchronous Client-Side Page

CompositionComposition Component (Gadgets) PatternsComponent (Gadgets) Patterns

Minimal RequirementsMinimal Requirements Encapsulation Patterns (e.g., we use Javascript Encapsulation Patterns (e.g., we use Javascript

Closures) Closures) Patterns to manage object lifecyclePatterns to manage object lifecycle

Advanced RequirementsAdvanced Requirements Patterns to enable asynchronous deploymentPatterns to enable asynchronous deployment Patterns to enable asynchronous component Patterns to enable asynchronous component

communicationcommunication Patterns to "infect" components with the appropriate Patterns to "infect" components with the appropriate

themetheme Patterns to scope CSS layout to component typesPatterns to scope CSS layout to component types

Defining a Component (Gadget)Defining a Component (Gadget)

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

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

Remixing ApproachRemixing Approach

The Network and your ComponentThe Network and your Component

AJAX applications can become very AJAX applications can become very chattychatty E.g., fetch stock quotes, fetch weather, E.g., fetch stock quotes, fetch weather,

fetch top articles, etc to render the pagefetch top articles, etc to render the page Look for caching opportunitiesLook for caching opportunities Look for opportunities to batch requests Look for opportunities to batch requests

(especially requests that may share (especially requests that may share similar expensive upfront processing)similar expensive upfront processing)

XML Proxying and ScalabilityXML Proxying and Scalability

ScenarioScenario How do you consume arbitrary RSS feeds?How do you consume arbitrary RSS feeds? You need to proxy the requests through your serverYou need to proxy the requests through your server Consider the scalability implications (intelligently cache remote Consider the scalability implications (intelligently cache remote

data, etc.)data, etc.)

Browser Sandbox ProblemBrowser Sandbox Problem The client cannot consume XML data from other domains The client cannot consume XML data from other domains How do you get the data?How do you get the data?

So how do maps works and why they are unique?So how do maps works and why they are unique? They are a set of images with algorithmically determines URLsThey are a set of images with algorithmically determines URLs It would be difficult to consume a geo-location service via the It would be difficult to consume a geo-location service via the

clientclient Integrating disparate services and personal data is the next Integrating disparate services and personal data is the next

challengechallenge The mapping components (e.g., Virtual Earth) are not typical The mapping components (e.g., Virtual Earth) are not typical

AJAX AJAX (no XML)(no XML)

Some creative solutions using dynamic scripts instead of xmlSome creative solutions using dynamic scripts instead of xml

Web Service IntegrationWeb Service Integration

Do not want to continually parse XMLDo not want to continually parse XML Desire a more natural and efficient Desire a more natural and efficient

approachapproach Web Services generate JavaScript proxies:Web Services generate JavaScript proxies:

WeatherService.requestWeatherReport(strLocation,onReceipt)WeatherService.requestWeatherReport(strLocation,onReceipt)

Use generic format for transport (e.g., JSON)Use generic format for transport (e.g., JSON) Incoming requests marshaled to native server Incoming requests marshaled to native server

format and outgoing responses to client formatformat and outgoing responses to client format

Use xmlHttpRequest to access the Use xmlHttpRequest to access the network, but the wire format is transparent network, but the wire format is transparent to the applicationto the application Only use raw XML for "documents" (e.g., RSS)Only use raw XML for "documents" (e.g., RSS)

Be wary of securityBe wary of security

Increased attack vectorsIncreased attack vectors Traditionally pages were “rendered” entirely on Traditionally pages were “rendered” entirely on

the server – no direct client access to the the server – no direct client access to the underlying dataunderlying data

With AJAX, data exposed directly via servicesWith AJAX, data exposed directly via services AJAX and Mash-ups can increase likelihood of AJAX and Mash-ups can increase likelihood of

intentional and unintentional DOS attacksintentional and unintentional DOS attacks "Bad" code hitting your service"Bad" code hitting your service

Unintended repurposing of your servicesUnintended repurposing of your services

Mash-up Code SharingMash-up Code Sharing You must trust the code you consume or you You must trust the code you consume or you

must create a sandbox around the codemust create a sandbox around the code Be careful referencing "untrusted" third-party Be careful referencing "untrusted" third-party

scriptsscripts

Advanced Networking PatternsAdvanced Networking Patterns

While AJAX prescribes a request-response pattern, it does not prescribe While AJAX prescribes a request-response pattern, it does not prescribe how to efficiently manage the networkhow to efficiently manage the network

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

Before AJAXBefore AJAX Web Page Model offers default connection managementWeb Page Model offers default connection management

Connections severed as you navigateConnections severed as you navigate Failures were apparent via 404 errorsFailures were apparent via 404 errors

Requests were all equal (typically preloading images – order was not important)Requests were all equal (typically preloading images – order was not important) Typically limited amount of scriptTypically limited amount of script

With AJAX With AJAX Some requests are more important than others Some requests are more important than others

(delete mail more important than preloading an image)(delete mail more important than preloading an image) Some requests are relevant to specific contextsSome requests are relevant to specific contexts Must be more aware of the unreliable networkMust be more aware of the unreliable network

Failures and users leaving the page before an operation completesFailures and users leaving the page before an operation completes Potentially extensively more scriptPotentially extensively more script

How do you mitigate limited bandwidth and connections and proactively How do you mitigate limited bandwidth and connections and proactively control the network in your web application?control the network in your web application?

Advanced Networking Patterns Advanced Networking Patterns The Unreliable NetworkThe Unreliable Network

With AJAX, how do you guarantee "integrity" of With AJAX, how do you guarantee "integrity" of the request?the request? Most Web Applications incorrectly "assume" successMost Web Applications incorrectly "assume" success

For example, AJAX Shopping CartFor example, AJAX Shopping Cart User clicks buy and then quickly leaves the page. Did the User clicks buy and then quickly leaves the page. Did the

order go through?order go through? User clicks buy, switches views on the page, and the User clicks buy, switches views on the page, and the

order fails. How do you notify the user?order fails. How do you notify the user? Designing proper feedback is essentialDesigning proper feedback is essential Define a standard UI feedback metaphor and stick to itDefine a standard UI feedback metaphor and stick to it

Hotmail lets you know when it is "working…“Hotmail lets you know when it is "working…“

In IE, when integrity is required, you can ask the In IE, when integrity is required, you can ask the user to stay on the page until an operation user to stay on the page until an operation completes (but you can't force them)completes (but you can't force them)

Advanced Networking Patterns Advanced Networking Patterns Emulating the Web ModelEmulating the Web Model

ScenarioScenario Build an application with multiple viewsBuild an application with multiple views

e.g., Inbox, Calendar, and Contactse.g., Inbox, Calendar, and Contacts The first view is loadingThe first view is loading User quickly switches to another view User quickly switches to another view

before data completely loadsbefore data completely loads Second view requests dataSecond view requests data What happens?What happens?

Quick Demonstration…Quick Demonstration…

Advanced Networking Patterns Advanced Networking Patterns Prioritizing Network RequestsPrioritizing Network Requests

AJAX ScenarioAJAX Scenario Your page is preloading imagesYour page is preloading images User clicks "Order It" from your AJAX cart User clicks "Order It" from your AJAX cart What happens?What happens?

Proactively manage the network Proactively manage the network stackstack

Advanced Networking Patterns Advanced Networking Patterns Code and Resource DeploymentCode and Resource Deployment More Interactivity = More Code = Slower SiteMore Interactivity = More Code = Slower Site

How do you build sites with lots of componentsHow do you build sites with lots of components How do you build a "portal" where the user controls the scope How do you build a "portal" where the user controls the scope

of the applicationof the application How do you efficiently deploy the necessary code and How do you efficiently deploy the necessary code and

resources?resources?

Understand how the browser worksUnderstand how the browser works Scripts included on the page block and load one at a timeScripts included on the page block and load one at a time Large number of script blocks can greatly stall loadingLarge number of script blocks can greatly stall loading

System for deploying codeSystem for deploying code Patterns allow component resources to load in any orderPatterns allow component resources to load in any order Deployed code asynchronously leveraging all available Deployed code asynchronously leveraging all available

connectionsconnections Prioritize the loading of componentsPrioritize the loading of components Never expire static content (change the URL to break the Never expire static content (change the URL to break the

cache)cache)

Cross Browser DevelopmentCross Browser Development

Minimize browser specific code in the Minimize browser specific code in the business logicbusiness logic Abstract and centralize API differencesAbstract and centralize API differences We extend Firefox and Opera DOM to be We extend Firefox and Opera DOM to be

compatible with IEcompatible with IE

CSS Differences – Avoid HacksCSS Differences – Avoid Hacks We will create clear overrides by We will create clear overrides by

automatically adding classificationsautomatically adding classifications<HTML class="Mozilla M1 D5 Windows"><HTML class="Mozilla M1 D5 Windows">Body {margin:10px}Body {margin:10px}.Mozilla Body {margin:5px} /* Override Mozilla */.Mozilla Body {margin:5px} /* Override Mozilla */

Providing a Consistent Providing a Consistent ExperienceExperience A critical issue as remixing growsA critical issue as remixing grows

How do you reflect your sites look and How do you reflect your sites look and feel over third-party components?feel over third-party components?

How do third-party components build CSS How do third-party components build CSS that does not impact the sites intent?that does not impact the sites intent?

Prescribed patterns to scope CSS to Prescribed patterns to scope CSS to your componentyour component Your unique JavaScript class can serve as Your unique JavaScript class can serve as

an identifier to scope your stylesan identifier to scope your styles Think how ambient themes "infect" Think how ambient themes "infect"

componentscomponents

The Back Button and AddressabilityThe Back Button and AddressabilityThe Ugly Side of "Ajax"The Ugly Side of "Ajax"

Users expect the web to workUsers expect the web to work Demo: MSN Spaces, Windows LiveDemo: MSN Spaces, Windows Live

Travelog (History stack) is hard Travelog (History stack) is hard (lots of creative (lots of creative hacks)hacks)

Need to decide what is a navigation (add to Need to decide what is a navigation (add to history) versus an actionhistory) versus an action

In some cases, a better experience may be In some cases, a better experience may be achieved by actually navigating and reloading achieved by actually navigating and reloading the pagethe page

URL Addressability Challenge, FavoritesURL Addressability Challenge, Favorites Short Demo: Windows Live LocalShort Demo: Windows Live Local

Web Accessibility and AJAXWeb Accessibility and AJAX

Web Accessibility is challengingWeb Accessibility is challenging HTML AccessibilityHTML Accessibility

Always use structural semantics to establish Always use structural semantics to establish “role”“role”

E.g., HE.g., Hnn, Label, TH (table headers), lists, etc., Label, TH (table headers), lists, etc.

DHTML “Effects” (Synchronous actions)DHTML “Effects” (Synchronous actions) Use “focusable” elements (e.g, hyperlinks)Use “focusable” elements (e.g, hyperlinks) Dynamically display content in contextDynamically display content in context

AJAX (Asynchronous actions)AJAX (Asynchronous actions) Update in context then notify accessibility tool Update in context then notify accessibility tool

that page is updatedthat page is updated E.g., navigate a hidden iframeE.g., navigate a hidden iframe

Building Rich Web ApplicationsBuilding Rich Web Applications

There is more to building rich applications than There is more to building rich applications than AJAXAJAX Put "Engineering" into your clientPut "Engineering" into your client Flesh out the intended scenarios and application flowFlesh out the intended scenarios and application flow Avoid (or minimize) breaking the Web ModelAvoid (or minimize) breaking the Web Model

To learn more on Microsoft’s investments in this To learn more on Microsoft’s investments in this areaarea Explore Microsoft Gadgets Explore Microsoft Gadgets

(http://www.microsoftgadgets.com)(http://www.microsoftgadgets.com) Download the latest ASP.Net Atlas Beta Download the latest ASP.Net Atlas Beta

(http://atlas.asp.net)(http://atlas.asp.net) Attend the Mix06 Conference (http://www.mix06.com)Attend the Mix06 Conference (http://www.mix06.com)

Invest wisely…Invest wisely… Invest smartly and don't lose site of your customerInvest smartly and don't lose site of your customer Its your customer, not the technology you apply, that Its your customer, not the technology you apply, that

mattersmatters

ForFor Consumer Web Consumer Web

developers, developers, designers, web SIs, designers, web SIs, web hostersweb hosters

March 20-22, Las Vegas, Venetian HotelMarch 20-22, Las Vegas, Venetian HotelRegistration: $995, Register Now: Registration: $995, Register Now: mix06.commix06.com

AboutAbout AJAX, ASP.NET, AJAX, ASP.NET,

“Atlas”, Expression, “Atlas”, Expression, IE7, IIS7, InfoCard, IE7, IIS7, InfoCard, Windows Live!, Windows Live!, Office “12”, RSS, Office “12”, RSS, WCF, WPF, Visual WCF, WPF, Visual StudioStudio FeaturingFeaturing

Bill Gates, Tim O’Reilly, Amazon, industry web Bill Gates, Tim O’Reilly, Amazon, industry web leadersleaders

<Questions/><Questions/>