Overview of MS AtlasOverview of MS AtlasWallace B. McClureWallace B. McClureScalable Development, Inc.Scalable Development, Inc.www.scalabledevelopment.www.scalabledevelopment.comcomASP.NET PodcastASP.NET Podcastwww.aspnetpodcast.comwww.aspnetpodcast.com

Who the heck am I….Who the heck am I….

Developer/Architect.Developer/Architect. Microsoft MVP.Microsoft MVP. ASPInsider.ASPInsider. Author.Author.

““Building Highly Scalable Database Applications” Building Highly Scalable Database Applications” – 2002.– 2002.

““Professional ADO.NET V2” – Soon.Professional ADO.NET V2” – Soon. ““AJAX with ASP.NET” – 2006.AJAX with ASP.NET” – 2006. ““IIS7 for Developers/Admins” – 2007.IIS7 for Developers/Admins” – 2007. ““ASP.NET in Orcas.” – In our lifetime.ASP.NET in Orcas.” – In our lifetime.

DisclaimerDisclaimer

Atlas is currently Alpha.Atlas is currently Alpha. Your mileage will vary.Your mileage will vary. Not everything is documented at this time.Not everything is documented at this time. I make no guarantees that anything will I make no guarantees that anything will

work during the demo or afterwards.work during the demo or afterwards. October, 2005 TP.October, 2005 TP. 2006 – Go Live.2006 – Go Live. Ship with the next revision of the Ship with the next revision of the

framework Orcas.framework Orcas.

What’s the problem with what we What’s the problem with what we got?got?

Roundtrips.Roundtrips. Server-oriented architecture.Server-oriented architecture. Client and server are not integrated Client and server are not integrated

together.together.

What/Why AJAX?What/Why AJAX?

Out of band client-server calls.Out of band client-server calls. AJAX - Asynchronous Javascript and XML AJAX - Asynchronous Javascript and XML

(Atlas and AJAX.NET Pro use JSON).(Atlas and AJAX.NET Pro use JSON). Decreased network utilization.Decreased network utilization. Decreased Server CPU utilization.Decreased Server CPU utilization. Much like Client-Server computing.Much like Client-Server computing. Better utilization of application resources.Better utilization of application resources. Opportunity to relearn Javascript.Opportunity to relearn Javascript. Its cool, its hip, everybody’s doing it.Its cool, its hip, everybody’s doing it.

What is Ajax? (cont.)What is Ajax? (cont.)

Major operations no longer “require” Major operations no longer “require” going back to the server.going back to the server.

What is Atlas?What is Atlas?

Floor Wax?Floor Wax? Dessert Topping?Dessert Topping? Shampoo?Shampoo? More than Microsoft’s AJAX.More than Microsoft’s AJAX. Component Framework for building Component Framework for building

client side web applications.client side web applications. Similar in concept to the .NET Similar in concept to the .NET

Framework for the client side web Framework for the client side web browser.browser.

What is Atlas(cont.)?What is Atlas(cont.)?

Out-of-band client to server calls.Out-of-band client to server calls. Asynchronous.Asynchronous. Cross-browser. Cross-browser.

Internet Explorer.Internet Explorer. Firefox.Firefox. Safari.Safari. Browser Abstraction Layer.Browser Abstraction Layer.

VSI file that plugs into VS.NET 2005.VSI file that plugs into VS.NET 2005. GAC is not required.GAC is not required.

Pieces-n-PartsPieces-n-Parts

ClientClient Browser Abstraction Layer.Browser Abstraction Layer. Script Core.Script Core. Base Class Library.Base Class Library. Component Model and UI Layer.Component Model and UI Layer. Controls & Components.Controls & Components.

ServerServer Server Control Framework.Server Control Framework. Web Services Bridge.Web Services Bridge. Application Services Bridge.Application Services Bridge.

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

Controls

“Atlas” Server

Controls

Architecture DiagramArchitecture Diagram

““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

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

““Atlas”Atlas”ServiceServiceProxiesProxies

Controls, Components

Controls, Components

““Atlas” Approach to DevelopmentAtlas” Approach to Development

Application developmentApplication development Simple inclusion of script-based functionality Simple inclusion of script-based functionality

via script components, server controlsvia script components, server controls Separation of UI and behaviorSeparation of UI and behavior

Component developmentComponent development Enables disciplined approach to scriptingEnables disciplined approach to scripting Framework for encapsulating data, and logicFramework for encapsulating data, and logic Abstracts browser differencesAbstracts browser differences Provides building blocks for higher level Provides building blocks for higher level

developmentdevelopment

Simple AJAX/Atlas ExampleSimple AJAX/Atlas Example

Two form elements.Two form elements. On a client side event, call a server On a client side event, call a server

side method without posting back to side method without posting back to the server.the server.

Asynchronous call.Asynchronous call. Process the information that is Process the information that is

returned.returned. MethodName(Param1,…ParamN, MethodName(Param1,…ParamN,

OnCompletion, OnTimeOut, OnError).OnCompletion, OnTimeOut, OnError).

Let’s go to the code.Let’s go to the code.

Namespace utilization on the client.Namespace utilization on the client. Client side framework through Client side framework through

javascript includes.javascript includes. Client side proxies generated Client side proxies generated

through “/js” option in the include.through “/js” option in the include. Use the .ClientID/UniqueID.Use the .ClientID/UniqueID.

More Complicated UI ExampleMore Complicated UI Example

AutoCompletion of Textboxes.AutoCompletion of Textboxes. Sorry, but Drag-n-Drop is not well Sorry, but Drag-n-Drop is not well

documented at this point.documented at this point. Databinding Examples are online.Databinding Examples are online. Let’s go to the code.Let’s go to the code.

Building an Atlas ComponentType.registerNamespace('PDC');Type.registerNamespace('PDC');PDC.Sequence = function() {PDC.Sequence = function() { PDC.Sequence.initializeBase(this);PDC.Sequence.initializeBase(this); var _count = 1;var _count = 1; var _value = 0;var _value = 0; var _randomize = false;var _randomize = false;

this.get_count = function() {this.get_count = function() { return _count;return _count; }} this.set_count = function(value) {this.set_count = function(value) { _count = value;_count = value; }}…………………….... this.dispose = function() {this.dispose = function() { if (_timer) {if (_timer) { _timer.tick.remove(_tickHandler);_timer.tick.remove(_tickHandler); _timer.dispose();_timer.dispose(); }} PDC.Sequence.callBaseMethod(this, 'dispose');PDC.Sequence.callBaseMethod(this, 'dispose'); }}……………………....Type.registerSealedClass('PDC.Sequence', Type.registerSealedClass('PDC.Sequence',

Web.Component);Web.Component);Web.TypeDescriptor.addType('pdc', 'sequence', Web.TypeDescriptor.addType('pdc', 'sequence',

PDC.Sequence);PDC.Sequence);}}

<atlas:Script ID="sampleScript" <atlas:Script ID="sampleScript" runat="server" runat="server" Path="~/ScriptLibrary/SequencPath="~/ScriptLibrary/Sequence.js" />e.js" />

var g_sequence = new var g_sequence = new PDC.Sequence();PDC.Sequence();

g_sequence.set_count(20);g_sequence.set_count(20);

g_sequence.next();g_sequence.next();

var value = var value = g_sequence.get_value();g_sequence.get_value();

DebuggingDebugging

debug.dump(object, name, debug.dump(object, name, true/false);true/false);

for(m in object)for(m in object)alert(m);alert(m);

Tools:Tools: Visual Studio .NET.Visual Studio .NET. Fiddler.Fiddler. WebDev Helper.WebDev Helper.

Where does Atlas/AJAX make Where does Atlas/AJAX make sense?sense?

Microsoft IIS Environment.Microsoft IIS Environment. .NET 2.0..NET 2.0. Where data transfer is limited.Where data transfer is limited. Small changes.Small changes. Limited bandwidth.Limited bandwidth.

Difficulties

No Javascript IDE Intellisense.sense. Bookmarking.. Back Button.Back Button. Accessibility/Section 508.Accessibility/Section 508. Search Engines.Search Engines. Application State.Application State. Downlevel browsers.Downlevel browsers. Debugging Javascript.Debugging Javascript. Doing too much at the client.Doing too much at the client.

I’ll just save these 50,000 records on the client and not ent and not have to go back to the server for the next page of have to go back to the server for the next page of records…………..records…………..

Browsers are fairly fragile animals.Browsers are fairly fragile animals.

Resources

http://atlas.asp.net/ http://www.aspnetpodcast.com/http://www.aspnetpodcast.com/ http://www.wilcob.com/http://www.wilcob.com/ http://weblogs.asp.net/wallymhttp://weblogs.asp.net/wallym http://www.nikhilk.net/http://www.nikhilk.net/ ““AJAX with ASP.NET” in 2006AJAX with ASP.NET” in 2006

Questions / Comments

Wallace B. McClure Scalable Development, Inc. http://

www.scalabledevelopment.com 865-693-3004