ASP.NET 2.0 “ATLAS” Microsoft’s Framework for building AJAX Applications Sascha P. Corti Developer & Platform Evangelism Microsoft Switzerland mailto: [email protected] blog: http://www.corti.com/weblogsascha.
Download ReportTranscript ASP.NET 2.0 “ATLAS” Microsoft’s Framework for building AJAX Applications Sascha P. Corti Developer & Platform Evangelism Microsoft Switzerland mailto: [email protected] blog: http://www.corti.com/weblogsascha.
ASP.NET 2.0 “ATLAS” Microsoft’s Framework for building AJAX Applications Sascha P. Corti Developer & Platform Evangelism Microsoft Switzerland mailto: [email protected] blog: http://www.corti.com/weblogsascha 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 What is the „Web 2.0“? Web 2.0 – Tim O‘Reilly Flickr,del.icio.us: Tagging, not taxonomy PageRank, eBay Reputation, Amazon Reviews: User as contributor Gmail, Google Maps and AJAX: Rich user Experiences „An attitude, not a technology“ The Long Tail Google AdSense: Customer self-service enabling the long tail The perpetual beta Software that gets better the more people use it The Right to Remix: „Some rights reserved“ Emergent: User Behavior not predetermined BitTorrent: Radical Decentralization Wikipedia: Radical Trust 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 Data as the „Intel Inside“ Hackability Blogs: Participation, Not Publishing Trust your users Small Places Meshups Loosely Joined (web as components) Rich User Experience Play Granular Addressability of content Web 2.0 – Tim O‘Reilly PageRank, eBay Reputation, Amazon Reviews: User as contributor Flickr,del.icio.us: Tagging, not taxonomy Gmail, Google Maps and AJAX: Rich user Experiences „An attitude, not a technology“ The Long Tail Data as the „Intel Inside“ Hackability Blogs: Participation, Not Publishing Google AdSense: Customer self-service enabling the long tail 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 The perpetual beta Software that gets better the more people use it The Right to Remix: „Some rights reserved“ Emergent: User Behavior not predetermined BitTorrent: Radical Decentralization Wikipedia: Radical Trust Trust your users Small Places Loosely Joined (web as components) Rich User Experience Play Granular Addressability of content Web 2.0 – Tim O‘Reilly Flickr,del.icio.us: Tagging, not taxonomy „An attitude, not a technology“ The Long Tail Data as the „Intel Inside“ Hackability PageRank, eBay Reputation, Amazon Reviews: User as contributor Gmail, Google Maps and AJAX: Rich user Experiences Blogs: Participation, Not Publishing Google AdSense: Customer self-service enabling the long tail BitTorrent: Radical Decentralization Wikipedia: Radical Trust Trust your users 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 The perpetual beta Software that gets better the more people use it The Right to Remix: „Some rights reserved“ Emergent: User Behavior not predetermined Play Small Places Loosely Joined (web as components) Rich User Experience Granular Addressability of content Web 2.0 Characteristics Map Napster Movies Machinma Events EVDB Encyclopedia Wikipedia Diary Blogging Radio Podcasting Classified Craigslist Mashups Housingmaps Gaming Xbox Live Telephony Skype Support Katrinalist Wiki Music RSS Salesforce PHP Business Ajax Googlemaps ROR Maps P2P Basecamp Power Project Manage Bandwidth Writely Deploy Word processing Rating Openonomy RichContent File share Person Flickr Search Image Store Community Netvibes Large #s Start Pages Aggregators Delicious Longtail Free Tagging Microsoft Presentation Tier Technologies Microsoft UI Platfrom Capabilities Windows Client Platform Web Browser Windows Vista Windows XP Functional Broadest Reach / Ubiquity Basic Experience Always Connected DHTML / AJAX Better UX / complex development Full fidelity & performance Windows Server & Services Lower latency, better UX Fully standards compliant XAML / .NET FX High reach, X-platform Graphics, Media, Animation Friction Free “WPF/E” XAML & App Model Targeted Experiences Increased Performance Greater Richness Occasionally Connected Devices HTML (baseline) + JavaScript Functional Superior UX Windows Vista Windows XP DownlevelWindows Mac Full integration with desktop XAML / .NET FX “Beyond the browser” Full development framework ASP.NET “Atlas” Live ASP.NET 2.0 „ATLAS“ Overview What is ASP.NET “ATLAS”? A Framework for building Richer, more Interactive, Standards-based Web Experiences 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! ASP.NET 2.0 „ATLAS“ Architecture ASP.NET „ATLAS“ Architecture HTML, Script, “Atlas” Markup “Atlas” Service Proxies “Atlas”-enabled ASP.NET Pages Web Services (ASMX or WCF) “Atlas” Client Script Library ASP.NET “Atlas” Server Extensions Controls, Components “Atlas” Client Application Services Component Model and UI Framework “Atlas” Server Controls App Services Bridge Web Services Bridge Base Class Library Local Store Script Core Browser Integration Browser Compatibility “Atlas” Client Framework and Services ASP.NET 2.0 Page Framework, Server Controls Application Services “Atlas” Server Framework Sharing Application Business Logic Presentation Tier HTML Web Client User Interface Tier Business Tier Private Public IIS Business Facade Component ASP .NET IIS „ATLAS“ SessionState Smart Client Offline Cache Data Tier XML Web Service Business Logic Component Business Logic Component Business Logic Component Views Stored Procedures Sharing Application Services Controls Services and APIs Provider Framework “AJAX” Data Controls Login Controls Web Parts Controls / Components Membership Role Management Profiles Configuration Site Maps Health Monitoring Other Services SQL Provider Access Provider Custom Provider Persistance Layer SQL Server Access Custom Data Store “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 ASP.NET 2.0 „ATLAS“ Server Centric Programming Model Server-Centric Programming Model Browser “Application” ASP.NET Application Initial Rendering (UI + Behavior) Presentation (HTML/CSS) Input Data Updated UI + Behavior Atlas Script Framework Component/UI Framework, Controls Client Application Services Pages UI Behavior (Managed Code) ASP.NET Page Framework, Server Controls Application Services The New <atlas:> Controls Example: The <atlas:UpdatePanel> Control Container control that enables “updatable” regions in a page Atlas provides a XmlHttp based postback infrastructure Some non-updatable content and controls... <atlas:UpdatePanel id=“u1” runat=“server”> <ContentTemplate> This content can be dynamically updated! <asp:label id="Lablel1” runat=“server”/> <asp:button id=“button1” text=“Push Me!” runat=“server”/> <ContentTemplate> </atlas:UpdatePanel> 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 „AJAXifying“ an ASP.NET 2.0 Application 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: <atlas:AutoCompleteExtender> Enables textbox auto-complete support Supports both .asmx and WCF based web-services (both using the built-in Atlas JSON bridge) <asp:textbox id=“CustomerSearch” runat=“server”/> <atlas:AutoCompleteExtender ID="AutoComplete" runat="server"> <atlas:AutoCompleteProperties Enabled="true" ServiceMethod="GetCustomerName" ServicePath="~/CustomerService.asmx" TargetControlID="CustomerSearch" /> </atlas:AutoCompleteExtender> Adding „ATLAS“ Behaviors: - Drag-and-drop - Profile Services ASP.NET 2.0 „ATLAS“ Client Centric Programming Model Client-Centric Programming Model Browser “Application” ASP.NET Application Presentation (HTML/CSS) UI Behavior (Script) Initial Rendering (UI + Behavior) “Atlas” Service Proxies Component/UI Framework, Controls Data Web Services Data Atlas Script Framework Client Application Services Pages ASP.NET Page Framework, Server Controls Application Services “Atlas” Client Script Library Script core and base class library Atlas Client Script Library Powerful Script Framework Rich Type System and Class Library for Javascript Component Model and UI Framework Rich Client-Side Data access and Databinding Controls and Components Component Model and UI Framework Base Class Library Script Core Browser Compatibility 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 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 <script src=“MyService.asmx/js”/> <script> function onLoad() { MyService.GetItemsByName(Text1.value, onComplete); } function onComplete(results) { $(‘ResultsDataSource’).set_data(results); } </script> Automatic Client Proxy generation Calling a Web Service from „ATLAS“ “Atlas” Client Script Library Procedural Client Side Scripting Search for: <input id=“Query" type="text" /> <div id="completionList"></div> function doLoad() { var auto1 = new Web.UI.AutoCompleteBehavior(); auto1.set_completionList($("completionList")); auto1.set_serviceURL("AutoCompleteService.asmx"); auto1.set_serviceMethod("GetCompletionList"); auto1.set_completionSetCount(15); auto1.set_completionInterval(500); var txt1 = new Web.UI.TextBox(document.getElementById(‘Query')); txt1.get_behaviors().add(auto1); txt1.initialize(); auto1.initialize(); } “Atlas” Client Script Library Declarative XML Script Search for: <input id=“Query" type="text" /> <div id="completionList"></div> <script type="text/xml-script"> <page xmlns:script="http://schemas.microsoft.com/xml-script/2005"> <components> <textBox id=“Query"> <behaviors> <autoComplete completionList="completionList" serviceURL="AutoCompleteService.asmx" serviceMethod="GetWordList" completionSetCount="15" completionInterval="500" /> </behaviors> </textBox> </components> </page> </script> ASP.NET 2.0 „ATLAS“ Mash-Ups 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 Windows Live Gadgets and the Windows Vista Sidebar Web service Gadget DHTML JavaScript CSS „ATLAS“ ASP.NET 2.0 „ATLAS“ Roadmap “Atlas Control Toolkit” Separate download from core Atlas Great library of free Atlas enabled controls Download from 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 “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 © 2004 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS SUMMARY.