Creating Rich Interactive Web Applications using AJAX Scott Isaacs Scott Isaacs Architect, Windows Live Architect, Windows Live Frameworks Frameworks Microsoft Corporation Microsoft Corporation
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/>