asp.net 2.0 "atlas" in-depth look at building enhanced web

Creating AJAX-style Creating AJAX-style Applications using ASP.NET Applications using ASP.NET and “Atlas”and “Atlas”

Ron Cundiff and William J. SteeleRon Cundiff and William J. SteeleMSDN Developer Community ChampionsMSDN Developer Community ChampionsMicrosoft CorporationMicrosoft Corporation

What We Will CoverWhat We Will Cover

What is AJAX?What is AJAX?

What is “Atlas”?What is “Atlas”?

ScenariosScenarios

Architecture OverviewArchitecture Overview

Programming ModelsProgramming Models

Demonstration – Getting Started with “Atlas”Demonstration – Getting Started with “Atlas”

““Atlas” ExamplesAtlas” Examples

What is AJAX?What is AJAX?

AJAX buzzwordAJAX buzzwordWeb development technique for creating Web development technique for creating interactive web applications using a interactive web applications using a combination of DHTML, JavaScript and combination of DHTML, JavaScript and XMLHTTPXMLHTTP

AJAX == Asynchronous JavaScript and XMLAJAX == Asynchronous JavaScript and XML

Technology is Technology is very widely deployedvery widely deployedBeing used for a large number of web sitesBeing used for a large number of web sites

Map – MSN VirtualEarth, Google MapsMap – MSN VirtualEarth, Google Maps

Email – new MSN Hotmail, Google MailEmail – new MSN Hotmail, Google Mail

4

AJAX TechnologyAJAX Technology

DHTML DOMDHTML DOMBrowser DOM manipulated through JavaScript to Browser DOM manipulated through JavaScript to dynamically display and interact with informationdynamically display and interact with informationCSS stylesheets for formattingCSS stylesheets for formatting

JavaScriptJavaScriptLoosely typed scripting languageLoosely typed scripting languageMostly used as the “glue” to wire things together on a Mostly used as the “glue” to wire things together on a pagepageCan quickly get hard to maintainCan quickly get hard to maintain

XMLHttpRequest object XMLHttpRequest object Exchange data asynchronously with the web serverExchange data asynchronously with the web serverAny data format will work - HTML fragments, text, Any data format will work - HTML fragments, text, XML, JSONXML, JSONIntroduced in 1998 for IE 5.0 by the Exchange Introduced in 1998 for IE 5.0 by the Exchange Outlook Web Access teamOutlook Web Access team 5

What is “Atlas”?What is “Atlas”?

High productivity AJAX developmentHigh productivity AJAX development

Builds on top of ASP.NET 2.0Builds on top of ASP.NET 2.0

Works cross-browserWorks cross-browser

End-to-End FrameworkEnd-to-End Framework

ExtensibleExtensible

at-las - (ăt-lәS)at-las - (ăt-lәS)noun: A Framework for Building Richer, Interactive, noun: A Framework for Building Richer, Interactive, Personalized Web Experiences and ApplicationsPersonalized Web Experiences and Applications

Architecture DiagramArchitecture Diagram

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” Server Atlas” Server FrameworkFramework

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

“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 Store, …

Local Store, …

BrowserIntegration

BrowserIntegration

ASP.NET 2.0ASP.NET 2.0

Application Services


Page Framework,

Server Controls

Page Framework,

Server Controls

““Atlas”-enabled Atlas”-enabled ASP.NET PagesASP.NET Pages

““Atlas”-enabled Atlas”-enabled ASP.NET PagesASP.NET Pages

Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)

Web ServicesWeb Services(ASMX or WCF)(ASMX or WCF)

HTML, Script,HTML, Script,““Atlas”Atlas”MarkupMarkup

HTML, Script,HTML, Script,““Atlas”Atlas”MarkupMarkup

““Atlas”Atlas”ServiceServiceProxiesProxies


Server-Centric Programming ModelServer-Centric Programming Model

ASP.NETASP.NET



Page Framework,

Server Controls

Page Framework,

Server Controls

Atlas Script FrameworkAtlas Script Framework

Client Application

Services

Client Application

Services

Component/UIFramework,

Controls


Controls

Browser “Application”Browser “Application”

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)

Client-Centric Programming ModelClient-Centric Programming Model

Browser “Application”Browser “Application”





UI BehaviorUI Behavior(Script)(Script)

UI BehaviorUI Behavior(Script)(Script)

ASP.NETASP.NET



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


Controls


Controls

Initial Rendering

(UI + Behavior)

Data

Data

Getting Started with Getting Started with “Atlas”“Atlas”

““Atlas” ScenariosAtlas” Scenarios

Client-centric Web ApplicationsClient-centric Web ApplicationsInteractive and rich, intuitive UXInteractive and rich, intuitive UX

Leverage full power of script/DHTMLLeverage full power of script/DHTML

Next generation Web applicationsNext generation Web applications

““AJAX”ified ASP.NET ApplicationsAJAX”ified ASP.NET ApplicationsIncremental approach to enrichmentIncremental approach to enrichment

Enables key scenarios in easy mannerEnables key scenarios in easy manner

Example Key ScenariosExample Key Scenarios

Dynamically update controlsDynamically update controlsUser selects CountryUser selects Country

States are populated based on country selectionStates are populated based on country selectionCities are populated based on state selectionCities are populated based on state selection

User selects ProductUser selects ProductAvailable accessories are populated based on product Available accessories are populated based on product selectionselection

Notify users based on system eventNotify users based on system eventDisplay E-mail received toast notificationDisplay E-mail received toast notification

AutoCompleteAutoCompletePopulates optional dropdown with Server dataPopulates optional dropdown with Server data

Enriching ASP.NET ApplicationsEnriching ASP.NET Applications

Atlas-Enabling PagesAtlas-Enabling PagesAdd a ScriptManager controlAdd a ScriptManager control

Enable Partial RenderingEnable Partial RenderingContinue to use the postback model, but work out-of-bandContinue to use the postback model, but work out-of-bandOnly portions of the page are rendered on the serverOnly portions of the page are rendered on the serverExisting page is updated using scriptExisting page is updated using script

Extend Existing ControlsExtend Existing ControlsAdd rich client-side behavior to enable key scenariosAdd rich client-side behavior to enable key scenariosAutoCompleteExtender, etc.AutoCompleteExtender, etc.

Atlas Script Framework is an enabling technologyAtlas Script Framework is an enabling technologyControl developers have a richer target to build forControl developers have a richer target to build forPage developers continue to use server controlsPage developers continue to use server controls

Enable key “AJAX” and user experience scenarios Enable key “AJAX” and user experience scenarios in an incremental manner while preserving the in an incremental manner while preserving the

existing server controls and server-side existing server controls and server-side development modelsdevelopment models

Client-centric Web ApplicationsClient-centric Web Applications

Disciplined and more manageable scriptDisciplined and more manageable scriptOOP in JavaScriptOOP in JavaScript.NET-like APIs on core script objects.NET-like APIs on core script objectsClasses to encapsulate data and logic, and Classes to encapsulate data and logic, and attach to HTML in an unobtrusive mannerattach to HTML in an unobtrusive mannerDeclarative XML script to define behavior of Declarative XML script to define behavior of applicationapplicationCross-browser abstraction layer to provide a Cross-browser abstraction layer to provide a uniform DOM APIuniform DOM API

Provide a script framework that makes it possible Provide a script framework that makes it possible to create next-generation interactive applications, to create next-generation interactive applications, and to interact easily with the server and services and to interact easily with the server and services

while scripting in a disciplined manner.while scripting in a disciplined manner.

Building our first “Atlas” Building our first “Atlas” applicationapplication

Session SummarySession Summary

““Atlas” is a key part of the ASP.NET storyAtlas” is a key part of the ASP.NET story

““Atlas” GoalsAtlas” GoalsMake it super easy to incorporate AJAX Make it super easy to incorporate AJAX patterns, and create rich user experiences, patterns, and create rich user experiences, and leverage the browserand leverage the browser

Create a natural progression from Web Create a natural progression from Web applications to Smart clients using a common applications to Smart clients using a common application modelapplication model

Still in its early stages – preview builds for Still in its early stages – preview builds for greater transparency, more opportunities greater transparency, more opportunities for feedback to have impactfor feedback to have impact

ResourcesResources

““Atlas” Web siteAtlas” Web sitehttp://atlas.asp.nethttp://atlas.asp.net

Bits, Forums, Quickstarts, Docs, UpdatesBits, Forums, Quickstarts, Docs, Updates

BlogsBlogshttp://www.nikhilk.nethttp://www.nikhilk.net

http://weblogs.asp.net/scottguhttp://weblogs.asp.net/scottgu

http://weblogs.asp.net/bleroyhttp://weblogs.asp.net/bleroy

““Atlas” Control ToolkitAtlas” Control Toolkithttp://atlas.asp.net/default.aspx?http://atlas.asp.net/default.aspx?tabid=47&subtabid=477tabid=47&subtabid=477

asp.net 2.0 "atlas" in-depth look at building enhanced web

Documents