1. ASP.NET 2.0 ATLAS Microsofts Framework for building AJAX Applications Sascha P. Corti Developer & Platform Evangelism Microsoft Switzerland mailto: sascha.corti@microsoft.com blog: http://www.corti.com/weblogsascha

2. Agenda What is the Web 2.0? Microsoft Presentation Tier Technologies ASP.NET 2.0 ATLAS Overview Architecture Server Centric Programming Model Client Centric Programming Model Mash-Ups Roadmap

3. What is the Web 2.0?

4. Web 2.0 – Tim OReilly Flickr,del.icio.us: Tagging, not taxonomy Gmail, Google Maps and AJAX: Rich user Experiences PageRank, eBay Reputation, Amazon Reviews: User as contributor Google AdSense: Customer self-service enabling the long tail Blogs: Participation, Not Publishing Wikipedia: Radical Trust BitTorrent: Radical Decentralization An attitude, not a technology The Long Tail Data as the Intel Inside The perpetual beta Hackability The Right to Remix: Some rights reserved Software that gets better the more people use it Play Emergent: User Behavior not predetermined Rich User Experience Small Places Loosely Joined (web as components) Trust your users Granular Addressability of content Strategic Positioning The Web as Platform User Positioning You control your own data Core Competencies Services, not packaged software Architecture of Participation Cost-effective scalability Remixable data sources and data transformations Software above the level of single device Harnessing collective intelligence Meshups

5. Web 2.0 – Tim OReilly Flickr,del.icio.us: Tagging, not taxonomy Gmail, Google Maps and AJAX: Rich user Experiences PageRank, eBay Reputation, Amazon Reviews: User as contributor Google AdSense: Customer self-service enabling the long tail Blogs: Participation, Not Publishing Wikipedia: Radical Trust BitTorrent: Radical Decentralization An attitude, not a technology The Long Tail Data as the Intel Inside The perpetual beta Hackability The Right to Remix: Some rights reserved Software that gets better the more people use it Play Emergent: User Behavior not predetermined Rich User Experience Small Places Loosely Joined (web as components) Trust your users Granular Addressability of content Strategic Positioning The Web as Platform User Positioning You control your own data Core Competencies Services, not packaged software Architecture of Participation Cost-effective scalability Remixable data source and data transformations Software above the level of single device Harnessing collective intelligence

6. Web 2.0 – Tim OReilly Flickr,del.icio.us: Tagging, not taxonomy Gmail, Google Maps and AJAX: Rich user Experiences PageRank, eBay Reputation, Amazon Reviews: User as contributor Google AdSense: Customer self-service enabling the long tail Blogs: Participation, Not Publishing Wikipedia: Radical Trust BitTorrent: Radical Decentralization Strategic Positioning The Web as Platform User Positioning You control your own data Core Competencies Services, not packaged software Architecture of Participation Cost-effective scalability Remixable data source and data transformations Software above the level of single device Harnessing collective intelligence An attitude, not a technology The Long Tail Data as the Intel Inside The perpetual beta Hackability The Right to Remix: Some rights reserved Play Emergent: User Behavior not predetermined Rich User Experience Small Places Loosely Joined (web as components) Trust your users Granular Addressability of content Software that gets better the more people use it

7. FreeLongtailAggregatorsLarge #sCommunitySearchPersonRichContentRatingDeployBandwidthPowerP2PRORAjaxPHPRSSWiki TaggingDelicious Start PagesNetvibes Image StoreFlickr File shareOpenonomy Word processing Writely Project Manage Basecamp MapsGooglemaps BusinessSalesforce MusicNapster MoviesMachinma EventsEVDB EncyclopediaWikipedia DiaryBlogging RadioPodcasting ClassifiedCraigslist MashupsHousingmaps GamingXbox Live TelephonySkype SupportKatrinalist Web 2.0 Characteristics Map

8. Microsoft Presentation Tier Technologies

9. Windows Web Browser Downlevel- Windows Mac Windows Vista Windows XP Microsoft UI Platfrom Capabilities Functional Broadest Reach / Ubiquity Basic Experience Always Connected Superior UX Targeted Experiences Increased Performance Greater Richness Occasionally Connected XAML /.NET FX Full fidelity & performance Full integration with desktop Beyond the browserFull development framework Client Platform Devices Windows Vista Windows XP DHTML / AJAX Lower latency, better UXFully standards compliant Better UX / complex development HTML (baseline) + JavaScript Functional Windows Server & Services ASP.NETAtlasLive WPF/E XAML & App Model XAML /.NET FX Graphics, Media, Animation High reach, X-platform Friction Free

10. ASP.NET 2.0 ATLAS Overview

11. What is ASP.NET ATLAS? High Productivity AJAX Development Framework Fewer concepts, fewer lines of code Application and UI building blocks for common scenarios Builds on Top of ASP.NET 2.0 Easy to Author, Debug, and Maintain Clean separation of content, style, behavior, and code Well integrated with design and development tools Seamlessly integrated application model Works with ASP.NET pages and server controls Allows access to ASP.NET web services and components Standards-Based: Works Cross-Browser! A Framework for building Richer, more Interactive, Standards-based Web Experiences

12. ASP.NET 2.0 ATLAS Architecture

13. ASP.NET ATLAS Architecture Atlas Client Framework and Services Atlas-enabled ASP.NET Pages Web Services (ASMX or WCF) HTML, Script, Atlas Markup Atlas Service Proxies Atlas Server Framework ASP.NET 2.0 Application Services Page Framework, Server Controls Page Framework, Server Controls ASP.NET Atlas Server Extensions Atlas Server Controls Atlas Server Controls App Services Bridge Web Services Bridge Atlas Client Script Library Controls, Components Script Core Base Class Library Component Model and UI Framework Browser Compatibility Atlas Client Application Services Local Store Browser Integration Browser Integration

14. Sharing Application Business Logic Private Data Tier User Interface Tier Presentation Tier Views Stored Procedures IIS HTML Web Client ASP.NET Business Logic Component Public Business Tier IIS XML Web Service Business Logic Component Business Logic Component Business Facade Component Session- State Offline Cache Smart Client ATLAS

15. Sharing Application Services Data Controls Data Controls Login Controls Login Controls Web Parts AJAX Controls / Components Membership Role Management Role Management Profiles Configuration Site Maps Site Maps Health Monitoring Health Monitoring Other Services Other Services Controls Services and APIs SQL Provider Access Provider Custom Provider Provider Framework Persistance Layer SQL ServerAccess Custom Data Store

16. Atlas Scenarios Server-centric Ajax Web Development Incremental Ajax approach to add UI enrichment Enrich Applications without lots of Javascript Code Keep core UI/Application logic on server (VB/C#) Client-centric Ajax Web Development Leverage full power of script/DHTML Provide richer and more interactive user experience Build mash-ups, gadgets and other new immersive experiences Atlas provides a great Ajax framework for both scenarios

17. ASP.NET 2.0 ATLAS Server Centric Programming Model

18. Server-Centric Programming Model ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls Atlas Script Framework Client Application Services Component/UI Framework, Controls Component/UI Framework, Controls Browser Application Presentation(HTML/CSS)Presentation(HTML/CSS) ASP.NET Application PagesPages UI Behavior (ManagedCode) (ManagedCode) Input Data Updated UI + Behavior Initial Rendering (UI + Behavior)

19. The New Controls Example: The Control Container control that enables updatable regions in a page Atlas provides a XmlHttp based postback infrastructure Some non-updatable content and controls... This content can be dynamically updated! More non-updatable content and controls... Defines End-To-End behavior of Client-Side Components/Controls and Server-Side elements. Generates all required Script and sends it to the browser

20. AJAXifying an ASP.NET 2.0 Application

21. ATLAS: Extender Controls Adding Interactivity Extend ASP.NET controls with Atlas behaviors Reusable piece of interactive functionality Attach to HTML UI declaratively or in code Drag-and-drop, Tooltips, Popups, Auto-complete Example: Enables textbox auto-complete support Supports both.asmx and WCF based web-services (both using the built-in Atlas JSON bridge) <atlas:AutoCompleteProperties Enabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch" />

22. Adding ATLAS Behaviors: - Drag-and-drop - Profile Services

23. ASP.NET 2.0 ATLAS Client Centric Programming Model

24. Client-Centric Programming Model Browser Application Presentation(HTML/CSS)Presentation(HTML/CSS) AtlasServiceProxiesAtlasServiceProxies UI Behavior (Script) (Script) ASP.NET Application Services Page Framework, Server Controls Page Framework, Server Controls ASP.NET Application PagesPages WebServicesWebServices Atlas Script Framework Client Application Services Component/UI Framework, Controls Component/UI Framework, Controls Initial Rendering (UI + Behavior) Data

25. Powerful Script Framework Rich Type System and Class Library for Javascript Component Model and UI Framework Rich Client-Side Data access and Databinding Easily integrated with Server Application Model Easily consume Web services from Browser Script access to ASP.NET Application Services Server-side Bridge to reuse 3rd party Services Atlas Client Script Library Script core and base class library Atlas Client Script Library Controls and Components Script Core Base Class Library Component Model and UI Framework Component Model and UI Framework Browser Compatibility

26. Atlas Client Script Library Networking XMLHTTP – Variations in Browsers, tough to hand-code Client networking stack layered on XMLHTTP WebRequest, WebResponse, MethodRequest classes ASP.NET Atlas Web Services Bridge Access to ASP.NET-hosted and serviced components ASMX and WCF services,.NET objects, ASP.NET page-level services Wire format: Javascript Object Notation (JSON) and REST function onLoad() { MyService.GetItemsByName(Text1.value, onComplete); } function onComplete(results) { $(ResultsDataSource).set_data(results); } Automatic Client Proxy generation

27. Calling a Web Service from ATLAS

28. Atlas Client Script Library Procedural Client Side Scripting Search for: Search for: function doLoad() { var auto1 = new Web.UI.AutoCompleteBehavior(); var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($("completionList")); auto1.set_completionList($("completionList")); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_completionSetCount(15); auto1.set_completionSetCount(15); auto1.set_completionInterval(500); auto1.set_completionInterval(500); var txt1 = new Web.UI.TextBox(document.getElementById(Query')); var txt1 = new Web.UI.TextBox(document.getElementById(Query')); txt1.get_behaviors().add(auto1); txt1.get_behaviors().add(auto1); txt1.initialize(); txt1.initialize(); auto1.initialize(); auto1.initialize();} Search for: Search for: function doLoad() { var auto1 = new Web.UI.AutoCompleteBehavior(); var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($("completionList")); auto1.set_completionList($("completionList")); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_completionSetCount(15); auto1.set_completionSetCount(15); auto1.set_completionInterval(500); auto1.set_completionInterval(500); var txt1 = new Web.UI.TextBox(document.getElementById(Query')); var txt1 = new Web.UI.TextBox(document.getElementById(Query')); txt1.get_behaviors().add(auto1); txt1.get_behaviors().add(auto1); txt1.initialize(); txt1.initialize(); auto1.initialize(); auto1.initialize();}

29. Atlas Client Script Library Declarative XML Script Search for: Search for: <autoComplete <autoComplete completionList="completionList" completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList" serviceMethod="GetWordList" completionSetCount="15" completionSetCount="15" completionInterval="500" /> completionInterval="500" /> </script> Search for: Search for: <autoComplete <autoComplete completionList="completionList" completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList" serviceMethod="GetWordList" completionSetCount="15" completionSetCount="15" completionInterval="500" /> completionInterval="500" /> </script>

30. ASP.NET 2.0 ATLAS Mash-Ups

31. Mash-Up Support Atlas provides the Ability to define Service Bridges Allow Client Script to call to Local Server Local Server proxies request to Service Avoids Cross-Domain Script call-back Issues No Security Prompts for the Browser Examples Amazon, FlickR, Virtual Earth, Google Maps, etc

32. Windows Live Gadgets and the Windows Vista Sidebar DHTML JavaScript CSS ATLAS Gadget Web service

33. ASP.NET 2.0 ATLAS Roadmap

34. Atlas Control Toolkit Separate download from core Atlas Great library of free Atlas enabled controls Download from http://atlas.asp.net/http://atlas.asp.net/ Developed using a collaborative source model All source freely available with modification license Both Microsoft & non-Microsoft developers can contribute Already contains some really cool controls Goal is to get 50-100 great controls by end of year

35. ATLAS Resources Atlas Web site http://atlas.asp.net Bits, Forums, Quickstarts, Docs, Updates Blogs http://www.nikhilk.net http://weblogs.asp.net/scottgu http://weblogs.asp.net/bleroy

36. © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.