Document Sample
ajax Powered By Docstoc
					Creating Rich Interactive Web
Applications using AJAX

Scott Isaacs
Architect, Windows Live Frameworks
Microsoft Corporation

 Rethinking Web Applications
 "Remixing" on Windows Live
 Building Web Applications
So what is AJAX?

              function DoAdd(strLoc)
              function onReceive(obWeatherData)
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
 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
   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
   (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
Windows Live Framework
Our Pattern for Mash-ups
 Client framework for building rich interactive
  web applications
 Enables extensibility via Windows Live
   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
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
    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
    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

 Scenario (not the technology) should drive the chosen
Modern Development Patterns

 Apply OOP principals to web development
   Namespaces, Encapsulation, Inheritance, Object
     registerNamespace("ScottIsaacs");
      ScottIsaacs.MyClass = function()
           this.initialize = function() {};
           this.dispose = function() {};
 Separate semantics, presentation, and
   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
 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
Defining a Component (Gadget)
       HTML                                    Gadget
<div class=“weather”>   Binds To
</div>                             function Live.Weather(el,args)
…                                  {
                                     this.initialize = function(p_own

                                   .Live_Weather {margin:2px}
                                   .Live_Weather input (width:50%;
Remixing Approach
The Network and your Component

 AJAX applications can become very
   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
    Integrating disparate services and personal data is the next
    The mapping components (e.g., Virtual Earth) are not typical AJAX
     (no XML)
Web Service Integration

 Do not want to continually parse XML
 Desire a more natural and efficient approach
   Web Services generate JavaScript proxies:
   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
   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
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
    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
    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
 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"
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
   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
 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
   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
    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
    Explore Microsoft Gadgets
    Download the latest ASP.Net Atlas Beta
    Attend the Mix06 Conference (
  For                        About
    Consumer Web                AJAX, ASP.NET,
     developers,                   “Atlas”, Expression,
     designers, web SIs,           IE7, IIS7, InfoCard,
     web hosters                   Windows Live!,
                                   Office “12”, RSS,
                                   WCF, WPF, Visual
  Featuring                       Studio
    Bill Gates, Tim O’Reilly, Amazon, industry web
  March 20-22, Las Vegas, Venetian Hotel
Registration: $995, Register Now: