ASP.NET 2.0 “ATLAS”Microsoft’s Framework for building AJAX Applications

Sascha P. CortiDeveloper & Platform EvangelismMicrosoft Switzerlandmailto: sascha.corti@microsoft.comblog: http://www.corti.com/weblogsascha

Agenda

What is the „Web 2.0“?

Microsoft Presentation Tier Technologies

ASP.NET 2.0 „ATLAS“OverviewArchitectureServer Centric Programming ModelClient Centric Programming ModelMash-UpsRoadmap

What is the „Web 2.0“?

Web 2.0 – Tim O‘ReillyFlickr,del.icio.us:

Tagging,not taxonomy

Gmail, GoogleMaps and AJAX:

Rich user Experiences

PageRank,eBay Reputation,Amazon Reviews:User as contributor

Google AdSense:Customer self-serviceenabling the long tail

Blogs: Participation,Not Publishing

Wikipedia:Radical Trust

BitTorrent:Radical Decentralization

„An attitude, nota technology“

The Long Tail

Data as the „Intel Inside“The perpetual beta

Hackability The Right to Remix:„Some rights reserved“

Software that getsbetter

the more people use itPlay

Emergent: UserBehavior not

predetermined

Rich User Experience

Small PlacesLoosely Joined

(web as components)

Trust your users

Granular Addressabilityof content

Strategic Positioning The Web as PlatformUser Positioning You control your own dataCore 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

Web 2.0 – Tim O‘Reilly

Flickr,del.icio.us:Tagging,

not taxonomy

Gmail, GoogleMaps and AJAX:

Rich user Experiences

PageRank,eBay Reputation,Amazon Reviews:User as contributor

Google AdSense:Customer self-serviceenabling the long tail

Blogs: Participation,Not Publishing

Wikipedia:Radical Trust

BitTorrent:Radical

Decentralization

„An attitude, nota technology“

The Long Tail

Data as the „Intel Inside“The perpetual beta

Hackability The Right to Remix:„Some rights reserved“

Software that getsbetter

the more people use itPlay

Emergent: UserBehavior not

predetermined

Rich User Experience

Small PlacesLoosely Joined

(web as components)

Trust your users

Granular Addressabilityof content

Strategic PositioningThe Web as PlatformUser PositioningYou control your own dataCore CompetenciesServices, not packaged softwareArchitecture of ParticipationCost-effective scalabilityRemixable data source and data transformationsSoftware above the level of single deviceHarnessing collective intelligence

Web 2.0 – Tim O‘ReillyFlickr,del.icio.us:

Tagging,not taxonomy

Gmail, GoogleMaps and AJAX:

Rich user Experiences

PageRank,eBay Reputation,Amazon Reviews:User as contributor

Google AdSense:Customer self-serviceenabling the long tail

Blogs: Participation,Not Publishing

Wikipedia:Radical Trust

BitTorrent:Radical Decentralization

Strategic PositioningThe Web as PlatformUser PositioningYou control your own dataCore CompetenciesServices, not packaged softwareArchitecture of ParticipationCost-effective scalabilityRemixable data source and data transformationsSoftware above the level of single deviceHarnessing collective intelligence

„An attitude, nota technology“

The Long Tail

Data as the „Intel Inside“

The perpetual beta

Hackability

The Right to Remix:„Some rights

reserved“Play

Emergent: UserBehavior not

predetermined

Rich User Experience

Small PlacesLoosely Joined

(web as components)

Trust your users

Granular Addressability

of content

Software that getsbetter the more

people use it

Fre

e

Lo

ng

tail

Ag

gre

ga

tors L

arg

e #

s

Co

mm

un

ity S

ea

rch

Pe

rso

n

Ric

hC

on

ten

t

Ra

ting

De

plo

y

Ba

nd

wid

th

Po

we

r

P2

P

RO

R

Aja

x

PH

P

RS

S

Wik

i

Tagging Delicious

Start Pages Netvibes

Image Store Flickr

File share Openonomy

Word processing

Writely

Project Manage

Basecamp

Maps Googlemaps

Business Salesforce

Music Napster

Movies Machinma

Events EVDB

Encyclopedia Wikipedia

Diary Blogging

Radio Podcasting

Classified Craigslist

Mashups Housingmaps

Gaming Xbox Live

Telephony Skype

Support Katrinalist

Web 2.0 Characteristics Map

Microsoft Presentation Tier Technologies

Windows

Web Browser

Downlevel-WindowsMac

Windows VistaWindows XP

Microsoft UI Platfrom Capabilities

Functional

Broadest Reach / Ubiquity

Basic ExperienceAlways

Connected

Superior UX

Targeted ExperiencesIncreased

PerformanceGreater Richness

Occasionally Connected

XAML / .NET FX

Full fidelity & performance

Full integration with desktop

“Beyond the browser” Full development framework

ClientPlatform

Devices

Windows VistaWindows XP

DHTML/ AJAX

Lower latency, better UX Fully standards compliantBetter UX / complex development

HTML (baseline) + JavaScriptFunctional

Windows Server& Services ASP.NET “Atlas” Live

“WPF/E”XAML & App Model

XAML / .NET FX

Graphics, Media, Animation

High reach, X-platform

Friction Free

ASP.NET 2.0 „ATLAS“

Overview

What is ASP.NET “ATLAS”?

High Productivity AJAX Development FrameworkFewer concepts, fewer lines of codeApplication and UI building blocks for common scenariosBuilds on Top of ASP.NET 2.0

Easy to Author, Debug, and MaintainClean separation of content, style, behavior, and codeWell integrated with design and development tools

Seamlessly integrated application modelWorks with ASP.NET pages and server controlsAllows access to ASP.NET web services and components

Standards-Based: Works Cross-Browser!

A Framework for building Richer, more A Framework for building Richer, more Interactive, Standards-based Web ExperiencesInteractive, Standards-based Web Experiences

ASP.NET 2.0 „ATLAS“

Architecture

ASP.NET „ATLAS“ Architecture

““Atlas” Client Framework and Atlas” Client Framework and ServicesServices

“Atlas”-enabled ASP.NET Pages

Web Services(ASMX or WCF)

HTML, Script,“Atlas”Markup

“Atlas”ServiceProxies

““Atlas” Server Atlas” Server FrameworkFramework

ASP.NET 2.0ASP.NET 2.0

Application Services

Application Services

Page Framework,

Server Controls

Page Framework,

Server Controls

ASP.NET “Atlas” Server ExtensionsASP.NET “Atlas” Server Extensions

“Atlas”Server

Controls

“Atlas”Server

Controls

App Services Bridge

App Services Bridge

Web Services Bridge

Web Services Bridge

“Atlas” Client Script Library“Atlas” Client Script Library

Controls, Components

Controls, Components

Script CoreScript Core

Base Class LibraryBase Class Library

Component Model and UI FrameworkComponent Model and UI Framework

Browser Compatibility

Browser Compatibility

“Atlas” Client Application Services

“Atlas” Client Application Services

Local StoreLocal Store

BrowserIntegratio

n

BrowserIntegratio

n

Sharing Application Business Logic

PrivateData TierUser Interface

TierPresentation

Tier

Views

StoredProcedures

IISHTMLWebClient ASP

.NET

BusinessLogic

Component

PublicBusiness Tier

IIS

XML WebService

BusinessLogic

Component

BusinessLogic

Component

BusinessFacade

Component

Session-State

Offline Cache

SmartClient

„ATLAS“

Sharing Application Services

DataControls

DataControls

LoginControls

LoginControls Web PartsWeb Parts “AJAX”

Controls / Components

“AJAX”Controls /

Components

MembershipMembership RoleManagement

RoleManagement ProfilesProfiles ConfigurationConfiguration

SiteMaps

SiteMaps

HealthMonitoring

HealthMonitoring

OtherServices

OtherServices

Controls

Servicesand APIs

SQLProvider

SQLProvider

AccessProviderAccess

ProviderCustomProviderCustomProvider

ProviderFramework

PersistanceLayer

SQL Server Access Custom Data Store

“Atlas” Scenarios

Server-centric Ajax Web DevelopmentIncremental Ajax approach to add UI enrichment Enrich Applications without lots of Javascript CodeKeep core UI/Application logic on server (VB/C#)

Client-centric Ajax Web DevelopmentLeverage full power of script/DHTMLProvide richer and more interactive user experienceBuild 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

ASP.NETASP.NET

Application Services

Application Services

Page Framework,

Server Controls

Page Framework,

Server Controls

Atlas Script FrameworkAtlas Script Framework

Client Application

Services

Client Application

Services

Component/UIFramework,

Controls

Component/UIFramework,

Controls

Browser “Application”Browser “Application”

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

ASP.NET ApplicationASP.NET Application

PagesPagesPagesPages

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

UI BehaviorUI Behavior(Managed(Managed

Code)Code)

Input Data

Updated UI + Behavior

Initial Rendering

(UI + Behavior)

The New <atlas:> Controls

Example: The <atlas:UpdatePanel> ControlContainer control that enables “updatable” regions in a pageAtlas 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 ControlsAdding Interactivity

Extend ASP.NET controls with “Atlas” behaviorsReusable piece of interactive functionalityAttach to HTML UI declaratively or in codeDrag-and-drop, Tooltips, Popups, Auto-complete

Example: <atlas:AutoCompleteExtender>Enables textbox auto-complete supportSupports 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”Browser “Application”

PresentationPresentation(HTML/CSS)(HTML/CSS)

PresentationPresentation(HTML/CSS)(HTML/CSS)

““Atlas”Atlas”ServiceServiceProxiesProxies

““Atlas”Atlas”ServiceServiceProxiesProxies

UI BehaviorUI Behavior(Script)(Script)

UI BehaviorUI Behavior(Script)(Script)

ASP.NETASP.NET

Application Services

Application Services

Page Framework,

Server Controls

Page Framework,

Server Controls

ASP.NET ApplicationASP.NET Application

PagesPagesPagesPages

WebWebServicesServices

WebWebServicesServices

Atlas Script FrameworkAtlas Script Framework

Client Application

Services

Client Application

Services

Component/UIFramework,

Controls

Component/UIFramework,

Controls

Initial Rendering

(UI + Behavior)

Data

Data

Powerful Script FrameworkRich Type System and Class Library for JavascriptComponent Model and UI FrameworkRich Client-Side Data access and Databinding

Easily integrated with Server Application ModelEasily consume Web services from BrowserScript access to ASP.NET Application Services Server-side Bridge to reuse 3rd party Services

“Atlas” Client Script LibraryScript core and base class library

Atlas Client Script LibraryAtlas Client Script Library

Controls and ComponentsControls and Components

Script CoreScript Core

Base Class LibraryBase Class Library

Component Model and UI Framework

Component Model and UI Framework

Browser CompatibilityBrowser Compatibility

“Atlas” Client Script Library Networking

XMLHTTP – Variations in Browsers, tough to hand-codeClient networking stack layered on XMLHTTP

WebRequest, WebResponse, MethodRequest classes

ASP.NET “Atlas” Web Services BridgeAccess 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" />Search for: <input id=“Query" type="text" /><div id="completionList"></div><div id="completionList"></div>

function doLoad() {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 var txt1 = new Web.UI.TextBox(document.getElementById(‘Query')); 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: <input id=“Query" type="text" />Search for: <input id=“Query" type="text" /><div id="completionList"></div><div id="completionList"></div>

function doLoad() {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 var txt1 = new Web.UI.TextBox(document.getElementById(‘Query')); Web.UI.TextBox(document.getElementById(‘Query')); txt1.get_behaviors().add(auto1);txt1.get_behaviors().add(auto1);

txt1.initialize(); txt1.initialize(); auto1.initialize();auto1.initialize();}}

“Atlas” Client Script Library Declarative XML ScriptSearch for: <input id=“Query" type="text" />Search for: <input id=“Query" type="text" />

<div id="completionList"></div><div id="completionList"></div>

<script type="text/xml-script"><script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">script/2005">

<components><components>

<textBox id=“Query"><textBox id=“Query">

<behaviors><behaviors>

<autoComplete <autoComplete

completionList="completionList" completionList="completionList"

serviceURL="AutoCompleteService.asmx" serviceURL="AutoCompleteService.asmx"

serviceMethod="GetWordList"serviceMethod="GetWordList"

completionSetCount="15" completionSetCount="15"

completionInterval="500" />completionInterval="500" />

</behaviors></behaviors>

</textBox></textBox>

</components></components>

</page></page>

</script></script>

Search for: <input id=“Query" type="text" />Search for: <input id=“Query" type="text" />

<div id="completionList"></div><div id="completionList"></div>

<script type="text/xml-script"><script type="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">script/2005">

<components><components>

<textBox id=“Query"><textBox id=“Query">

<behaviors><behaviors>

<autoComplete <autoComplete

completionList="completionList" completionList="completionList"

serviceURL="AutoCompleteService.asmx" serviceURL="AutoCompleteService.asmx"

serviceMethod="GetWordList"serviceMethod="GetWordList"

completionSetCount="15" completionSetCount="15"

completionInterval="500" />completionInterval="500" />

</behaviors></behaviors>

</textBox></textBox>

</components></components>

</page></page>

</script></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 ServerLocal Server proxies request to Service

Avoids Cross-Domain Script call-back Issues

No Security Prompts for the Browser

ExamplesAmazon, FlickR, Virtual Earth, Google Maps, etc

Windows Live Gadgetsand the Windows Vista Sidebar

DHTMLJavaScript

CSS„ATLAS“

GadgetWeb

service

ASP.NET 2.0 „ATLAS“

Roadmap

“Atlas Control Toolkit”

Separate download from core AtlasGreat library of free Atlas enabled controlsDownload from http://atlas.asp.net/

Developed using a collaborative source modelAll source freely available with modification licenseBoth Microsoft & non-Microsoft developers can contribute

Already contains some really cool controlsGoal is to get 50-100 great controls by end of year

“ATLAS” Resources

“Atlas” Web sitehttp://atlas.asp.net Bits, Forums, Quickstarts, Docs, Updates

Blogshttp://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.