Creating Rich Interactive Web Applications using AJAX

1
Creating Rich Interactive Web Applications using
AJAX

• Scott Isaacs
• Architect, Windows Live FrameworksMicrosoft
  Corporation

2

• Rethinking Web Applications
• "Remixing" on Windows Live
• Building Web Applications

3
So what is AJAX?
function DoAdd(strLoc) Weather.Request(strLoc,
onReceive)
Weather Service
function onReceive(obWeatherData)
ProcessWeather(objWeatherData)
4
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

5
What is a mash-up?

• Web applications that consumes ("remixes")
  content and experience from different sources and
  aggregates them to create a new application

6
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

7
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

8
Rethinking Windows Live

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

9
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

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

11
Building Web ApplicationsAJAX - The Myth

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

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

13
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

14
Modern Development Patterns

• Apply OOP principals to web development
• Namespaces, Encapsulation, Inheritance, Object
  Lifecycle
• registerNamespace("ScottIsaacs")ScottIsaacs.MyCl
  ass function() this.initialize function()
  this.dispose function()
• Separate semantics, presentation, and behavior
• Build and program against objects, not structure
• Yields more stable, maintainable system

15
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

16
Defining a Component (Gadget)
HTML

17
Remixing Approach
18
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)

19
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

20
Web Service Integration

• Do not want to continually parse XML
• Desire a more natural and efficient approach
• Web Services generate JavaScript
  proxiesWeatherService.requestWeatherReport(strLo
  cation,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)

21
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

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

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

24
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

25
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

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

27
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
  Windows"Body margin10px.Mozilla Body
  margin5px / Override Mozilla /

28
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

29
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

30
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

31
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 Microsofts investments in this
  area
• Explore Microsoft Gadgets (http//www.microsoftgad
  gets.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

32
MIX The Next Web NowA 72 Hour Conversation

• For
• Consumer Web developers, designers, web SIs, web
  hosters

• About
• AJAX, ASP.NET, Atlas, Expression, IE7, IIS7,
  InfoCard, Windows Live!, Office 12, RSS, WCF,
  WPF, Visual Studio

• Featuring
• Bill Gates, Tim OReilly, Amazon, industry web
  leaders

• March 20-22, Las Vegas, Venetian Hotel
• Registration 995, Register Now mix06.com

33