Transcript ATLAS

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.