MIX: The Next Web Now A 72 Hour Conversation
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


MIX: The Next Web Now A 72 Hour Conversation






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

MIX: The Next Web Now A 72 Hour Conversation Presentation Transcript

  • 1. Creating Rich Interactive Web Applications using AJAX Scott Isaacs Architect, Windows Live Frameworks Microsoft Corporation
  • 2. <Agenda>
    • Rethinking Web Applications
    • &quot;Remixing&quot; on Windows Live
    • Building Web Applications
  • 3. So what is AJAX? Weather Service function DoAdd(strLoc) { Weather.Request(strLoc,onReceive) } 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 (&quot;remixes&quot;) 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, &quot;Blog This&quot; page add-ons, etc
  • 7. 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 &quot;spaghetti&quot; 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 &quot;services&quot;
      • 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 &quot;Mash-ups&quot;
    • 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 &quot;platform&quot; to the community with Gadgets and via Asp.Net Atlas
  • 10. Windows Live Framework Our 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 Applications AJAX - The Myth
      • With Ajax, my application will scale better, run faster, and offer a better user experience
  • 12. Windows Live Framework Going 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 &quot;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(&quot;ScottIsaacs&quot;); 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
  • 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 &quot;infect&quot; components with the appropriate theme
        • Patterns to scope CSS layout to component types
  • 16. Defining a Component (Gadget) HTML … <div class=“weather”> </div> … 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%; …
  • 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 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 &quot;documents&quot; (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
        • &quot;Bad&quot; 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 &quot;untrusted&quot; 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 &quot;reliable&quot; 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 &quot;integrity&quot; of the request?
      • Most Web Applications incorrectly &quot;assume&quot; 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 &quot;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 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…
  • 25. Advanced Networking Patterns Prioritizing Network Requests
    • AJAX Scenario
      • Your page is preloading images
      • User clicks &quot;Order It&quot; 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 &quot;portal&quot; 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 <HTML class=&quot;Mozilla M1 D5 Windows&quot;> Body {margin:10px} .Mozilla Body {margin:5px} /* 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 &quot;infect&quot; components
  • 29. The Back Button and Addressability The Ugly Side of &quot;Ajax&quot;
    • 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., H n , 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 &quot;Engineering&quot; 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 (http://www.microsoftgadgets.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 Now A 72 Hour Conversation
    • For
      • Consumer Web developers, designers, web SIs, web hosters
    • March 20-22, Las Vegas, Venetian Hotel
    • Registration: $995, Register Now: mix06.com
    • 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
  • 33. <Questions/>