Developing A Better User Experience With "Atlas"

1
Developing A Better User Experience With "Atlas"
NGW014

• Shawn Burke
• Director NDP Agility
• Microsoft Corporation

2
Better Web User Experiences

• Responsive to users
• Naturally interactive
• Personalized for users
• Connected to the web
• Immersive beyond the site

3
Atlas
A framework for building a new generation of
richer, more interactive, highly personalized
standards based Web applications
4
Atlas

• Easy-to-use, high-productivity framework
• Full integration with server programming model
• World-class tools for AJAX-style applications
• Cross-platform, works on all modern browsers

5
Developing With Atlas
Server-centric application model
6
Developing With Atlas
Client-centric application model
7
Server Or Client Centric?

• Server-centric web sites and apps
• Work with existing server application model
• Keep core UI/application logic on server
• Improve latency, interactivity, personalization
• Client-centric browser applications
• Fully exploit DHTML in presentation tier
• Use AJAX for data, services, composition
• Enable new immersive experiences
• Atlas provides a great framework for both

8
Server-Centric Development With Atlas And
ASP.NET
9
Atlas Server Controls

• Easily build rich experiences with ASP.NET
• Application UI and core logic still runs on
  server
• Avoid need to master JavaScript and async
  programming
• Use AJAX techniques to reduce full roundtrips
• Enable incremental page UI updates
• Examples data navigation and editing, form
  validation, auto refresh
• Fall back for down-level browsers
• Richer interactivity for existing ASP.NET
  controls
• Enrich the client UI experience of web
  applications
• Examples auto-completion, drag-and-drop, tooltips

10
Atlas Server Controls
Reducing full roundtrips

• ltAtlasUpdatePanelgt control
• Easily define updatable regions of a page
• Server roundtrips become asynchronous
• Atlas handles all the infrastructure
• ltatlasUpdatePanel idu1 runatservergt
• ltContentTemplategt
• lt!-- This content can be dynamically
  updated! -gt
• ltaspCalendar idcal1 runatserver/gt
• ltContentTemplategt
• lt/atlasUpdatePanelgt

11
Update Panels
12
Atlas Server ControlsAdding interactivity

• Atlas client behaviors
• Reusable piece of interactive functionality
• Attach to HTML UI declaratively or in code
• Examples
• Drag-and-drop
• Tooltips
• Popups
• Auto-complete
• Easily extend or write your own in Javascript

13
Atlas Server Controls
Adding interactivity

• Atlas control extenders
• Extend ASP.NET controls with Atlas behaviors
• Encapsulate both client and server behavior
• Same familiar programming model as ASP.NET server
  controls
• ltaspTextBox runat"server" ID"TextBox1" /gt
• ltatlasAutoCompleteExtender runat"server"
  ID"AC1"gt
• ltatlasAutoCompleteProperties
• TargetControlID"TextBox1"
• ServicePath"AutoComplete.asmx
• ServiceMethod"GetWords" Enabled"true" /gt
• lt/atlasAutoCompleteExtendergt

14
Control Extenders Atlas Control Toolkit
15
Client-Centric Development With Atlas
16
Atlas Script Framework

• Scenarios
• Mash-up and composite applications and sites
• Components and Gadgets (Live.com, Windows
  Sidebar)
• Powerful script framework
• Rich type system and class library for Javascript
• Component model and UI framework
• Rich client-side data access and databinding
• 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

17
Atlas Script FrameworkNetworking

• A networking stack for asynchronous services
• High-level classes for requests/responses
• Customizable behavior batching, prioritization,
  queuing
• Pluggable data format and wire protocol
• Uses JSON (JavaScript Object Notation) and REST
  by default
• Easy access to server-based services
• Easily call server-hosted web services
• Atlas takes care of proxy generation, plumbing,
  serialization
• Automatic serialization of .NET types to and from
  JavaScript
• Integrated with ASP.NET application services
• Autentication, authorization, session state,
  caching

18
Networking
19
Atlas Script Framework
20
Atlas Script FrameworkComponent and control
model

• Enables rich encapsulation and reuse
• For UI behavior
• For non-visual components data, services
• Rich client-side databinding and validation
• Clean developer/designer workflow
• UI defined using standard XHTML and CSS
• Page behavior defined and attached separately
• Atlas components and controls can be declared
  procedurally or declaratively

21
Atlas Script FrameworkComponent and control
model

• Search for ltinput idQuery" type"text" /gt
• ltdiv id"completionList"gtlt/divgt
• ........
• 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.getEleme
  ntById(Query'))
• txt1.get_behaviors().add(auto1)
• txt1.initialize()
• auto1.initialize()

22
Atlas Script FrameworkComponent and control
model

• Search for ltinput idQuery" type"text" /gt
• ltdiv id"completionList"gtlt/divgt
• ........
• ltscript type"text/xml-script"gt
• ltpage xmlnsscript"http//schemas.microsoft.com
  /xml-script/2005"gt
• ltcomponentsgt
• lttextBox idQuery"gt
• ltbehaviorsgt
• ltautoComplete
• completionList"completionList
  "
• serviceURL"AutoCompleteServic
  e.asmx"
• serviceMethod"GetWordList"
• completionSetCount"15"
• completionInterval"500" /gt
• lt/behaviorsgt
• lt/textBoxgt
• lt/componentsgt

23
Atlas Script FrameworkClient data

• Enable rich client-side data scenarios
• Rich data navigation and visualization
• Batched data editing
• Data components
• Disconnected dataset for Javascript
• Filtering, sorting, batched updates
• Integrated with ASP.NET data service
• ListView client control
• Present rich data using HTML templates

24
Client Components And Data
25
Atlas Script Framework

• Using Atlas without ASP.NET

26
Atlas Script FrameworkUsing Atlas without
ASP.NET

• Use Atlas client script with any server
• Get the client script files from Program Files
  directory after installation
• What ASP.NET provides
• Great integration with server-centric UI and
  programming model
• Browser detection
• Access to rich set of application services
• Web services, proxies, and bridges

27
Using Atlas With PHP
28
How Do I Get Started?

• Atlas Community Technology Preview
• Releases every 6-8 weeks
• Installs on Visual Web Developer 2005 and ASP.NET
  2.0 (both available for free)
• Go Live CTP build live sites with Atlas
  today!
• Atlas community site http//atlas.asp.net
• Download the latest bits
• Tutorials, samples, forums, resources
• Source code from MIX sessions
• ASP.NET Atlas Control Toolkit and Samples
• See www.codeplex.com for full source
• We want your feedback!

29
Questions?
30
(No Transcript)