Developing Rich Web Applications with ASP'NET Atlas

1
Developing Rich Web Applications with ASP.NET
Atlas

• Matt Gibbs
• ASP.NET Dev Manager
• matt.gibbs_at_microsoft.com

2
Agenda

• What is AJAX?
• Improving the web app experience?
• Atlas Drilldown and Demos
• Networking and Services
• Client-side data binding
• UI behaviors
• Personalization
• Roadmap

3
What it AJAX?

• AJAX buzzword
• Web development technique for creating
  interactive web applications using a combination
  of DHTML, JavaScript and XMLHTTP
• AJAX Asynchronous JavaScript and XML
• DHTML DOM
• Browser DOM manipulated through JavaScript to
  dynamically display and interact with information
• CSS stylesheets for formatting
• JavaScript
• Loosely typed scripting language
• Mostly used as the glue to wire things together
  on a page
• Can quickly get hard to maintain
• XMLHttpRequest object
• Exchange data asynchronously with the web server
• Any data format will work - HTML fragments, text,
  XML, JSON
• Introduced in 1998 for IE 5.0 by the Exchange
  Outlook Web Access team
• Technology is very widely deployed
• Being used for a large number of web sites
• Map MSN VirtualEarth, Google Maps
• Email new MSN Hotmail, Google Mail

4
A Richer Web Experience?
5
Improving the web app experience?

• Make the UI interactive and dynamic
• Improve the perceived performance of app
• Refresh parts of the page
• Do not freeze the UI experience
• Enable richer natural user interactions
• Leverage CSS for positioning and layout
• Web Platform
• Use the Web as a platform to consume services
• Expose Services from your Web applications
• Differentiate your web app experience from
  competitors!

6
Atlas Architecture
Atlas-enabled ASP.NET Pages
Web Services (ASMX or WCF)
HTML, Script, Atlas Markup
Atlas Service Proxies
Atlas Client Script Library
ASP.NET Atlas Server Extensions
App Services Bridge
Atlas Server Controls
Controls, Components
Web Services Bridge
Atlas Client Application Services
Component Model and UI Framework
Base Class Library
Local Store
ASP.NET 2.0
Script Core
Application Services
Page Framework, Server Controls
Browser Integration
Browser Compatibility
Atlas Server Framework
Atlas Client Framework and Services
7
Atlas - Powerful Client Framework

• Atlas script core a full Javascript type system
• Classes, namespaces, interfaces, and enums
• Multi-cast event handlers similar to .NET
• Enriched tools support in Visual Studio Orcas
• Base class library
• Helper classes, extensions to existing types
• Debugging and tracing, networking
• Component and control model
• Easy to compose, connect, and reuse

8
Atlas - Seamless Server Access

• Easy access to server components
• ASMX and WCF services
• .NET components
• Components and methods on ASP.NET pages
• Automatic proxy generation, object serialization
• Use ASP.NET application services from script
• Authentication and roles
• Roaming user profiles and UI personalization
• Session state and caching
• Goal Enable interesting reuse scenarios
• Bridging services from other servers
• Federated authentication
• Access to common services

9
Atlas Networking, Services, Authentication,
Caching, Services on a Page
10
Atlas - Richer Data Navigation and Editing

• Client-side databinding infrastructure
• Bindings connect properties of components/controls
  
• Supports 1-way or 2-way bindings, data
  transformers
• Abstraction over asynchronous nature of AJAX model

• Automatic data bindings between components

john
User Name
Databound Controls
Number of characters 4
Transformers reshape data
john_11
Alternates
1-way or 2-way Databinding
10
11
Atlas Components and Binding

12
Atlas - Richer Data Navigation and Editing

• Data access
• Disconnected dataset-like model with batch
  support
• Call update to commit changes
• Call select to re-select data
• Optimistic concurrency
• DataSource in browser wired to DataService on
  server
• Executes Select, Insert, Update methods on
  service
• Support parameterization
• Templated data controls
• ListView
• ItemView

13
Atlas Data, Editing

14
Interactive, Natural User Experiences

• Controls and behaviors add interactivity to any
  web application
• Easily attached to a DHTML element
• Built-in controls and behaviors
• Visual navigation tooltips, floating windows
• Interactive input auto-complete, drag and drop
• Animation and visual effects
• Common patterns for AJAX-style applications
• Navigation, localization, accessibility
• Work on all modern browsers

15
Atlas UI Behaviors, Personalization
16
Enriched ASP.NET for the Page Developer

• Enhance user experience of a page or control
• Manage scripts and markup - ScriptManager
• Fewer postbacks UpdatePanel, TimerControl
• Add interactivity Control Extenders
• Client-side OM for controls on page
• Easily expose page/control methods as services
• Server support for Atlas client framework
• Render Atlas declarative markup
• New Server Controls

17
Atlas UpdatePanel, Control Extenders,
TimerControl
18
Richer Browser Integration

• Programming model to light up on Windows
• Local store/cache
• API for sandboxed local storage in web
  applications
• Support for caching of responses from server
  requests
• Browser Integration Services
• Integrate web app with desktop experience
• Examples
• Add auction item to calendar
• Upload from My Pictures
• Coming soon

19
Atlas Wiki
20
Atlas Roadmap

• Prototype technology preview release available
  now
• Support for ASP.NET 2.0 and Visual Studio 2005
  RTM
• Install VSI into VS 2005
• Atlas community site
• http//atlas.asp.net
• Updates, samples, documentation on a regular
  basis
• Community Forums - We want your feedback!
• Go live Beta release sometime in H2 2006

21
Questions