0
Creating Rich Interactive Web Applications using AJAX   Scott Isaacs Architect, Windows Live Frameworks Microsoft Corporat...
<Agenda> <ul><li>Rethinking Web Applications </li></ul><ul><li>&quot;Remixing&quot; on Windows Live  </li></ul><ul><li>Bui...
So what is AJAX? Weather  Service function DoAdd(strLoc) {   Weather.Request(strLoc,onReceive) } function onReceive(obWeat...
AJAX – The details <ul><li>Describes a simple development pattern </li></ul><ul><ul><li>Asynchronously request data from t...
What is a mash-up? <ul><ul><li>Web applications that consumes (&quot;remixes&quot;) content and experience from different ...
Remixing the Web <ul><li>What is the real web application revolution? </li></ul><ul><ul><li>I don't believe it is Ajax </l...
Rethinking the Web What if everything was a mash-up? <ul><li>More Efficient Development </li></ul><ul><ul><li>Componentize...
Rethinking Windows Live <ul><li>Windows Live properties are mash-ups </li></ul><ul><ul><li>http://mail.live.com (Hotmail B...
Why Windows Live &quot;Mash-ups&quot; <ul><li>More efficient development process </li></ul><ul><ul><li>We can share develo...
Windows Live Framework Our Pattern for Mash-ups  <ul><li>Client framework for building rich interactive web applications <...
Building Web Applications AJAX - The Myth <ul><ul><li>With Ajax, my application will  scale better,  run faster,  and offe...
Windows Live Framework Going Beyond Ajax <ul><li>Solving the challenges of building interactive web applications </li></ul...
Server vs. Client Dynamic  Page Composition <ul><li>Server composes page </li></ul><ul><ul><li>Components directly embedde...
Modern Development Patterns <ul><li>Apply OOP principals to web development </li></ul><ul><ul><li>Namespaces, Encapsulatio...
Asynchronous Component Model <ul><li>How do you build and integrate components? </li></ul><ul><li>Challenges: </li></ul><u...
Defining a Component (Gadget) HTML … <div class=“weather”> </div> … Binds To Renders Gadget function Live.Weather(el,args)...
Remixing Approach
The Network and your Component <ul><li>AJAX applications can become very chatty </li></ul><ul><ul><li>E.g., fetch stock qu...
XML Proxying and Scalability <ul><li>Scenario </li></ul><ul><ul><li>How do you consume arbitrary RSS feeds? </li></ul></ul...
Web Service Integration <ul><li>Do not want to continually parse XML </li></ul><ul><li>Desire a more natural and efficient...
Be wary of security <ul><li>Increased attack vectors </li></ul><ul><ul><li>Traditionally pages were “rendered” entirely on...
Advanced Networking Patterns <ul><li>While AJAX prescribes a request-response pattern, it does not prescribe how to effici...
Advanced Networking Patterns  The Unreliable Network <ul><li>With AJAX, how do you guarantee &quot;integrity&quot; of the ...
Advanced Networking Patterns Emulating the Web Model <ul><li>Scenario </li></ul><ul><ul><li>Build an application with mult...
Advanced Networking Patterns  Prioritizing Network Requests <ul><li>AJAX Scenario </li></ul><ul><ul><li>Your page is prelo...
Advanced Networking Patterns  Code and Resource Deployment <ul><li>More Interactivity = More Code = Slower Site </li></ul>...
Cross Browser Development <ul><li>Minimize browser specific code in the business logic </li></ul><ul><ul><li>Abstract and ...
Providing a Consistent Experience <ul><li>A critical issue as remixing grows </li></ul><ul><ul><li>How do you reflect your...
The Back Button and Addressability The Ugly Side of &quot;Ajax&quot; <ul><li>Users expect the web to work </li></ul><ul><u...
Web Accessibility and AJAX <ul><li>Web Accessibility is challenging </li></ul><ul><li>HTML Accessibility </li></ul><ul><ul...
Building Rich Web Applications <ul><li>There is more to building rich applications than AJAX </li></ul><ul><ul><li>Put &qu...
MIX:  The Next Web Now A 72 Hour Conversation <ul><li>For </li></ul><ul><ul><li>Consumer Web developers, designers, web SI...
<Questions/>
Upcoming SlideShare
Loading in...5
×

MIX: The Next Web Now A 72 Hour Conversation

235

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
235
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "MIX: The Next Web Now A 72 Hour Conversation"

  1. 1. Creating Rich Interactive Web Applications using AJAX Scott Isaacs Architect, Windows Live Frameworks Microsoft Corporation
  2. 2. <Agenda> <ul><li>Rethinking Web Applications </li></ul><ul><li>&quot;Remixing&quot; on Windows Live </li></ul><ul><li>Building Web Applications </li></ul>
  3. 3. So what is AJAX? Weather Service function DoAdd(strLoc) { Weather.Request(strLoc,onReceive) } function onReceive(obWeatherData) { ProcessWeather(objWeatherData) }
  4. 4. AJAX – The details <ul><li>Describes a simple development pattern </li></ul><ul><ul><li>Asynchronously request data from the server </li></ul></ul><ul><ul><li>Process the Result </li></ul></ul><ul><ul><li>Update the Page </li></ul></ul><ul><ul><li>Technology has been around for many years </li></ul></ul><ul><li>Very good for improving form interactions </li></ul><ul><li>Usually insufficient by itself for building applications </li></ul><ul><li>Ajax is one tool (pattern) of many for building rich experiences </li></ul>
  5. 5. What is a mash-up? <ul><ul><li>Web applications that consumes (&quot;remixes&quot;) content and experience from different sources and aggregates them to create a new application </li></ul></ul>
  6. 6. Remixing the Web <ul><li>What is the real web application revolution? </li></ul><ul><ul><li>I don't believe it is Ajax </li></ul></ul><ul><ul><li>Where RSS democratized and syndicated content, mash-up patterns will democratize and syndicate experiences and ease service integration </li></ul></ul><ul><li>You can extend your reach by integrating with the rest of the web </li></ul><ul><ul><li>E.g., Windows Live Virtual Earth, &quot;Blog This&quot; page add-ons, etc </li></ul></ul>
  7. 7. Rethinking the Web What if everything was a mash-up? <ul><li>More Efficient Development </li></ul><ul><ul><li>Componentized Development </li></ul></ul><ul><ul><ul><li>Web Pages are collections of Components </li></ul></ul></ul><ul><ul><ul><li>Better caching and reuse of resources </li></ul></ul></ul><ul><ul><li>Eliminate &quot;spaghetti&quot; ad-hoc HTML-coding </li></ul></ul><ul><li>Leverage your investments </li></ul><ul><ul><li>Reuse components across your product </li></ul></ul><ul><ul><li>Reuse your components across the web! </li></ul></ul><ul><ul><li>The opportunity to be remixed </li></ul></ul><ul><li>Share more than just &quot;services&quot; </li></ul><ul><ul><li>Provide default and customizable experiences </li></ul></ul>
  8. 8. Rethinking Windows Live <ul><li>Windows Live properties are mash-ups </li></ul><ul><ul><li>http://mail.live.com (Hotmail Beta) </li></ul></ul><ul><ul><li>http://www.live.com </li></ul></ul>
  9. 9. Why Windows Live &quot;Mash-ups&quot; <ul><li>More efficient development process </li></ul><ul><ul><li>We can share development resources </li></ul></ul><ul><ul><li>We can quickly integrate services across properties without heavy server lifting </li></ul></ul><ul><ul><li>We can provide a consistent experience </li></ul></ul><ul><ul><li>We can scale better </li></ul></ul><ul><ul><li>Most important, we can offer better and more consistent customer experiences and value </li></ul></ul><ul><li>We are opening up the &quot;platform&quot; to the community with Gadgets and via Asp.Net Atlas </li></ul>
  10. 10. Windows Live Framework Our Pattern for Mash-ups <ul><li>Client framework for building rich interactive web applications </li></ul><ul><li>Enables extensibility via Windows Live Gadgets </li></ul><ul><ul><li>A pattern for building remixable components </li></ul></ul><ul><ul><li>Designed to enable developers to enhance the Windows and web experience </li></ul></ul><ul><ul><li>See http://www.microsoftgadgets.com </li></ul></ul><ul><ul><li>Extends to Microsoft tools via ASP.Net Atlas </li></ul></ul><ul><li>We develop to one universal pattern </li></ul><ul><ul><li>We dogfood the same patterns and approaches to build our own sites </li></ul></ul><ul><ul><li>Every Live.com component is also a Gadget </li></ul></ul>
  11. 11. Building Web Applications AJAX - The Myth <ul><ul><li>With Ajax, my application will scale better, run faster, and offer a better user experience </li></ul></ul>
  12. 12. Windows Live Framework Going Beyond Ajax <ul><li>Solving the challenges of building interactive web applications </li></ul><ul><ul><li>Implements a set of programming patterns to enable interactive web-sites </li></ul></ul><ul><ul><li>ASP.Net Atlas is Microsoft's toolset for third-party developers </li></ul></ul><ul><li>Infrastructure for </li></ul><ul><ul><li>Client-Side Page Composition </li></ul></ul><ul><ul><li>Modern Development Patterns </li></ul></ul><ul><ul><li>Component Model </li></ul></ul><ul><ul><li>Network Management </li></ul></ul><ul><ul><li>Resource Deployment </li></ul></ul><ul><ul><li>Proxying, Caching, and Scalability </li></ul></ul><ul><ul><li>Themeing and consistent experience </li></ul></ul><ul><ul><li>Cross-Browser equalizer </li></ul></ul><ul><li>So what does it take to build a robust rich web application? </li></ul>
  13. 13. Server vs. Client Dynamic Page Composition <ul><li>Server composes page </li></ul><ul><ul><li>Components directly embedded as page loads </li></ul></ul><ul><ul><ul><li>E.g., Adding/ Removing components reloads the page </li></ul></ul></ul><ul><ul><li>Typically easier to implement (content is flowed into the document) </li></ul></ul><ul><ul><li>Intelligent Caching is more difficult – page size grows quickly </li></ul></ul><ul><ul><li>All components impact page load </li></ul></ul><ul><li>Client composes page </li></ul><ul><ul><li>Components dynamically included on the page </li></ul></ul><ul><ul><li>Uses frameworks to deploy and inject components </li></ul></ul><ul><ul><li>Highly leverages caching of static resources – better scalability </li></ul></ul><ul><ul><li>Page composition can be prioritized </li></ul></ul><ul><ul><li>The typical pattern for enabling &quot;mash-ups“ (e.g., loading a map component) </li></ul></ul><ul><li>Scenario (not the technology) should drive the chosen approach </li></ul>
  14. 14. Modern Development Patterns <ul><li>Apply OOP principals to web development </li></ul><ul><ul><li>Namespaces, Encapsulation, Inheritance, Object Lifecycle </li></ul></ul><ul><ul><ul><li>registerNamespace(&quot;ScottIsaacs&quot;); ScottIsaacs.MyClass = function() { this.initialize = function() {}; this.dispose = function() {}; } </li></ul></ul></ul><ul><li>Separate semantics, presentation, and behavior </li></ul><ul><ul><li>Build and program against objects, not structure </li></ul></ul><ul><ul><li>Yields more stable, maintainable system </li></ul></ul>
  15. 15. Asynchronous Component Model <ul><li>How do you build and integrate components? </li></ul><ul><li>Challenges: </li></ul><ul><ul><li>Integrating components without collisions </li></ul></ul><ul><ul><li>Consistent theme across components </li></ul></ul><ul><ul><li>Enabling Asynchronous Client-Side Page Composition </li></ul></ul><ul><li>Component (Gadgets) Patterns </li></ul><ul><ul><li>Minimal Requirements </li></ul></ul><ul><ul><ul><li>Encapsulation Patterns (e.g., we use Javascript Closures) </li></ul></ul></ul><ul><ul><ul><li>Patterns to manage object lifecycle </li></ul></ul></ul><ul><ul><li>Advanced Requirements </li></ul></ul><ul><ul><ul><li>Patterns to enable asynchronous deployment </li></ul></ul></ul><ul><ul><ul><li>Patterns to enable asynchronous component communication </li></ul></ul></ul><ul><ul><ul><li>Patterns to &quot;infect&quot; components with the appropriate theme </li></ul></ul></ul><ul><ul><ul><li>Patterns to scope CSS layout to component types </li></ul></ul></ul>
  16. 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. 17. Remixing Approach
  18. 18. The Network and your Component <ul><li>AJAX applications can become very chatty </li></ul><ul><ul><li>E.g., fetch stock quotes, fetch weather, fetch top articles, etc to render the page </li></ul></ul><ul><ul><li>Look for caching opportunities </li></ul></ul><ul><ul><li>Look for opportunities to batch requests (especially requests that may share similar expensive upfront processing) </li></ul></ul>
  19. 19. XML Proxying and Scalability <ul><li>Scenario </li></ul><ul><ul><li>How do you consume arbitrary RSS feeds? </li></ul></ul><ul><ul><li>You need to proxy the requests through your server </li></ul></ul><ul><ul><li>Consider the scalability implications (intelligently cache remote data, etc.) </li></ul></ul><ul><li>Browser Sandbox Problem </li></ul><ul><ul><li>The client cannot consume XML data from other domains </li></ul></ul><ul><ul><li>How do you get the data? </li></ul></ul><ul><li>So how do maps works and why they are unique? </li></ul><ul><ul><li>They are a set of images with algorithmically determines URLs </li></ul></ul><ul><ul><li>It would be difficult to consume a geo-location service via the client </li></ul></ul><ul><ul><li>Integrating disparate services and personal data is the next challenge </li></ul></ul><ul><ul><li>The mapping components (e.g., Virtual Earth) are not typical AJAX (no XML) </li></ul></ul><ul><li>Some creative solutions using dynamic scripts instead of xml </li></ul>
  20. 20. Web Service Integration <ul><li>Do not want to continually parse XML </li></ul><ul><li>Desire a more natural and efficient approach </li></ul><ul><ul><li>Web Services generate JavaScript proxies: WeatherService.requestWeatherReport(strLocation,onReceipt) </li></ul></ul><ul><ul><li>Use generic format for transport (e.g., JSON) </li></ul></ul><ul><ul><li>Incoming requests marshaled to native server format and outgoing responses to client format </li></ul></ul><ul><li>Use xmlHttpRequest to access the network, but the wire format is transparent to the application </li></ul><ul><ul><li>Only use raw XML for &quot;documents&quot; (e.g., RSS) </li></ul></ul>
  21. 21. Be wary of security <ul><li>Increased attack vectors </li></ul><ul><ul><li>Traditionally pages were “rendered” entirely on the server – no direct client access to the underlying data </li></ul></ul><ul><ul><li>With AJAX, data exposed directly via services </li></ul></ul><ul><ul><li>AJAX and Mash-ups can increase likelihood of intentional and unintentional DOS attacks </li></ul></ul><ul><ul><ul><li>&quot;Bad&quot; code hitting your service </li></ul></ul></ul><ul><ul><li>Unintended repurposing of your services </li></ul></ul><ul><li>Mash-up Code Sharing </li></ul><ul><ul><li>You must trust the code you consume or you must create a sandbox around the code </li></ul></ul><ul><ul><li>Be careful referencing &quot;untrusted&quot; third-party scripts </li></ul></ul>
  22. 22. Advanced Networking Patterns <ul><li>While AJAX prescribes a request-response pattern, it does not prescribe how to efficiently manage the network </li></ul><ul><li>Constraints </li></ul><ul><ul><li>Browser uses at most 2 simultaneous connections per domain </li></ul></ul><ul><ul><li>Browser offers no built-in facility to interact with the network stack </li></ul></ul><ul><ul><li>Browser offers no &quot;reliable&quot; transport for network operations </li></ul></ul><ul><li>Before AJAX </li></ul><ul><ul><li>Web Page Model offers default connection management </li></ul></ul><ul><ul><ul><li>Connections severed as you navigate </li></ul></ul></ul><ul><ul><ul><li>Failures were apparent via 404 errors </li></ul></ul></ul><ul><ul><li>Requests were all equal (typically preloading images – order was not important) </li></ul></ul><ul><ul><li>Typically limited amount of script </li></ul></ul><ul><li>With AJAX </li></ul><ul><ul><li>Some requests are more important than others (delete mail more important than preloading an image) </li></ul></ul><ul><ul><li>Some requests are relevant to specific contexts </li></ul></ul><ul><ul><li>Must be more aware of the unreliable network </li></ul></ul><ul><ul><ul><li>Failures and users leaving the page before an operation completes </li></ul></ul></ul><ul><ul><li>Potentially extensively more script </li></ul></ul><ul><li>How do you mitigate limited bandwidth and connections and proactively control the network in your web application? </li></ul>
  23. 23. Advanced Networking Patterns The Unreliable Network <ul><li>With AJAX, how do you guarantee &quot;integrity&quot; of the request? </li></ul><ul><ul><li>Most Web Applications incorrectly &quot;assume&quot; success </li></ul></ul><ul><li>For example, AJAX Shopping Cart </li></ul><ul><ul><li>User clicks buy and then quickly leaves the page. Did the order go through? </li></ul></ul><ul><ul><li>User clicks buy, switches views on the page, and the order fails. How do you notify the user? </li></ul></ul><ul><ul><li>Designing proper feedback is essential </li></ul></ul><ul><ul><li>Define a standard UI feedback metaphor and stick to it </li></ul></ul><ul><ul><ul><li>Hotmail lets you know when it is &quot;working…“ </li></ul></ul></ul><ul><li>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) </li></ul>
  24. 24. Advanced Networking Patterns Emulating the Web Model <ul><li>Scenario </li></ul><ul><ul><li>Build an application with multiple views e.g., Inbox, Calendar, and Contacts </li></ul></ul><ul><ul><li>The first view is loading </li></ul></ul><ul><ul><li>User quickly switches to another view before data completely loads </li></ul></ul><ul><ul><li>Second view requests data </li></ul></ul><ul><ul><li>What happens? </li></ul></ul><ul><li>Quick Demonstration… </li></ul>
  25. 25. Advanced Networking Patterns Prioritizing Network Requests <ul><li>AJAX Scenario </li></ul><ul><ul><li>Your page is preloading images </li></ul></ul><ul><ul><li>User clicks &quot;Order It&quot; from your AJAX cart </li></ul></ul><ul><ul><li>What happens? </li></ul></ul><ul><li>Proactively manage the network stack </li></ul>
  26. 26. Advanced Networking Patterns Code and Resource Deployment <ul><li>More Interactivity = More Code = Slower Site </li></ul><ul><ul><li>How do you build sites with lots of components </li></ul></ul><ul><ul><li>How do you build a &quot;portal&quot; where the user controls the scope of the application </li></ul></ul><ul><ul><li>How do you efficiently deploy the necessary code and resources? </li></ul></ul><ul><li>Understand how the browser works </li></ul><ul><ul><li>Scripts included on the page block and load one at a time </li></ul></ul><ul><ul><li>Large number of script blocks can greatly stall loading </li></ul></ul><ul><li>System for deploying code </li></ul><ul><ul><li>Patterns allow component resources to load in any order </li></ul></ul><ul><ul><li>Deployed code asynchronously leveraging all available connections </li></ul></ul><ul><ul><li>Prioritize the loading of components </li></ul></ul><ul><ul><li>Never expire static content (change the URL to break the cache) </li></ul></ul>
  27. 27. Cross Browser Development <ul><li>Minimize browser specific code in the business logic </li></ul><ul><ul><li>Abstract and centralize API differences </li></ul></ul><ul><ul><li>We extend Firefox and Opera DOM to be compatible with IE </li></ul></ul><ul><li>CSS Differences – Avoid Hacks </li></ul><ul><ul><li>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 */ </li></ul></ul>
  28. 28. Providing a Consistent Experience <ul><li>A critical issue as remixing grows </li></ul><ul><ul><li>How do you reflect your sites look and feel over third-party components? </li></ul></ul><ul><ul><li>How do third-party components build CSS that does not impact the sites intent? </li></ul></ul><ul><li>Prescribed patterns to scope CSS to your component </li></ul><ul><ul><li>Your unique JavaScript class can serve as an identifier to scope your styles </li></ul></ul><ul><li>Think how ambient themes &quot;infect&quot; components </li></ul>
  29. 29. The Back Button and Addressability The Ugly Side of &quot;Ajax&quot; <ul><li>Users expect the web to work </li></ul><ul><ul><li>Demo: MSN Spaces, Windows Live </li></ul></ul><ul><li>Travelog (History stack) is hard (lots of creative hacks) </li></ul><ul><ul><li>Need to decide what is a navigation (add to history) versus an action </li></ul></ul><ul><ul><li>In some cases, a better experience may be achieved by actually navigating and reloading the page </li></ul></ul><ul><li>URL Addressability Challenge, Favorites </li></ul><ul><ul><li>Short Demo: Windows Live Local </li></ul></ul>
  30. 30. Web Accessibility and AJAX <ul><li>Web Accessibility is challenging </li></ul><ul><li>HTML Accessibility </li></ul><ul><ul><li>Always use structural semantics to establish “role” </li></ul></ul><ul><ul><li>E.g., H n , Label, TH (table headers), lists, etc. </li></ul></ul><ul><li>DHTML “Effects” (Synchronous actions) </li></ul><ul><ul><li>Use “focusable” elements (e.g, hyperlinks) </li></ul></ul><ul><ul><li>Dynamically display content in context </li></ul></ul><ul><li>AJAX (Asynchronous actions) </li></ul><ul><ul><li>Update in context then notify accessibility tool that page is updated </li></ul></ul><ul><ul><li>E.g., navigate a hidden iframe </li></ul></ul>
  31. 31. Building Rich Web Applications <ul><li>There is more to building rich applications than AJAX </li></ul><ul><ul><li>Put &quot;Engineering&quot; into your client </li></ul></ul><ul><ul><li>Flesh out the intended scenarios and application flow </li></ul></ul><ul><ul><li>Avoid (or minimize) breaking the Web Model </li></ul></ul><ul><li>To learn more on Microsoft’s investments in this area </li></ul><ul><ul><li>Explore Microsoft Gadgets (http://www.microsoftgadgets.com) </li></ul></ul><ul><ul><li>Download the latest ASP.Net Atlas Beta (http://atlas.asp.net) </li></ul></ul><ul><ul><li>Attend the Mix06 Conference (http://www.mix06.com) </li></ul></ul><ul><li>Invest wisely… </li></ul><ul><ul><li>Invest smartly and don't lose site of your customer </li></ul></ul><ul><ul><li>Its your customer, not the technology you apply, that matters </li></ul></ul>
  32. 32. MIX: The Next Web Now A 72 Hour Conversation <ul><li>For </li></ul><ul><ul><li>Consumer Web developers, designers, web SIs, web hosters </li></ul></ul><ul><li>March 20-22, Las Vegas, Venetian Hotel </li></ul><ul><li>Registration: $995, Register Now: mix06.com </li></ul><ul><li>About </li></ul><ul><ul><li>AJAX, ASP.NET, “Atlas”, Expression, IE7, IIS7, InfoCard, Windows Live!, Office “12”, RSS, WCF, WPF, Visual Studio </li></ul></ul><ul><li>Featuring </li></ul><ul><ul><li>Bill Gates, Tim O’Reilly, Amazon, industry web leaders </li></ul></ul>
  33. 33. <Questions/>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×