Windows Presentation Foundation and Windows Presentation Foundation and User Experience User Experience … and Atlas … and Atlas

Paul Cross

Richard Godfrey

Microsoft

AgendaAgenda

Aims• Suggest how we have got to ‘here’

• Show where Microsoft are heading as a ‘Roadmap’

Side-Aims• Provide examples and demos for illustration

Anti-Aims• Too much marketing • Show ‘how’ to use the technologies

• Dig into implementation depth

User Experience 'UX' MattersUser Experience 'UX' Matters

VHS VCR PVR (Windows MCE)

http://www.artlebedev.com/

What is UX?What is UX?

The world we are in …The world we are in …

The 'Real World'The 'Real World'

• Functionality traditionally comes first

• Little application development time for 'user experience' beyond prototypes• Cost/Value justification breaks down?

• Developers are not designers!

• Except some Web developers?

• Tooling inadequate

• Flash? CSS?

Consumers and the EnterpriseConsumers and the Enterprise

• Consumer activity drives enterprise activity• Windows

• Office

• XBox Live

• GPU

• Blogging

• Online Presence – Messenger, Yahoo, AOL, ICQ …

• …

Why does it matter now?Why does it matter now?

• It always mattered • Information Overload

• Real Business impact• Faster

• Make business decisions faster on more data

• Cheaper• Reduce costs

• Less training time (e.g. PoS operators)

• Reduce errors e.g. restricted UI, User self service

• Better• Enhanced user/customer experience

• Data visualisation

• ‘Stickiness’ e.g. Making it more stylish, approachable

Is it a Client or a Server?Is it a Client or a Server?

• Through the decades …• White coats

• The 50s: Scheduling Time• The 60s: Batch Processing• The 70s: Timesharing & OLTP

• Empowering the user• The 80s: PCs & Client-Server

• User self-service• The 90s: Internet & Services

• Community• The 00s: Users & Experiences?

• Observations• Computing power moving to the ‘edge’ of the network

• E.g. CPU, GPU• Mobile devices

• Move to user centricity• BUT … Issues with deployment, manageability, security …

• Rhetorical Question: Is the Thin Client era a stop-gap?

Where are we now (or nearly)?Where are we now (or nearly)?

• 'SOA' in the Enterprise

• Thin client experience seen as lacking (AJAX)

• 'Web 2.0' and 'Mashups' in the consumer space

• Designers engaged in the software lifecycle

• Tooling directed at the User Experience domain

• Agile development practices

Richness vs. ComplexityRichness vs. Complexity

UX RichnessUX Richness

Developer

Developer

Productivity

Productivity

ASP.NET 2.0(HTML)

Windows Forms 2.0

Direct 3D v9

AvailabiliAvailability: ty:

2005

DHTML

1997

Web Services &Offline/Online

support

DeveloperProductivity

NetworkDependency

Limited UserExperience

ComplexTo Develop

Easy ChangeManagement

Ease ofDeployment

Tough toDeploy

HeavyFootprint

DLL Hell

Rich UserExperience

Responsive

AJAX/AtlasAJAX/Atlas

AJAX is …AJAX is …

• Not a product

• Not a specification

• Not a standard

• Not a floor cleaning product

• Not the name of the son of Telamon of Salamis who fought against Troy

• Not an Amsterdam football team

AJAX isAJAX is

• Asynchronous Javascript And XML

• A layer of abstraction between the browser and the web server

• Available in Internet Explorer since 1999

• Improved UX through client-side interactions while data fetches are asynchronous

• According to some commentators, the future of all web development …

Typical Technologies for AJAXTypical Technologies for AJAX

• XHTML and CSS• Document Object Model (DOM)• XMLHttpRequest object• JavaScript• XML• XSLT• Etc.

DemoDemo

Atlas OverviewAtlas Overview

• End-to-end application framework• Enables building rich, interactive DHTML applications

• Component-oriented framework

• Imperative and declarative programming models

• Integrates with ASP.NET

• Extensible Application framework• Custom script components, controls, behaviours

• Custom server controls

• Enables complex script-based applications• Makes script development more approachable

Atlas Approach to DevelopmentAtlas Approach to Development

• Application development• Simple inclusion of script-based functionality via script

components, server controls

• Separation of UI and behaviour

• Component development• Enables disciplined approach to scripting

• Framework for encapsulating data and logic

• Abstracts browser differences

• Provides building blocks for higher level development

Atlas Client OverviewAtlas Client Overview

• Collection of JavaScript (.js) files providing features for object-oriented development• Browser compatibility layer• Atlas core services

• Classes, namespaces, event handling, inheritance, data types and object serialisation

• Base class library• String builders, debuggers, timers and tracing

• Networking layer• Communication with web-based services and applications• Management of the asynchronous remote method calls

• UI layer providing a number of Atlas client capabilities:• Behaviours• The Atlas declarative syntax• UI components• Data binding

• Controls layer that creates Atlas-specific controls • Data-bound, scripted, drag and drop, auto-completion text box, ordinary

form controls, data-bound listview control, navigation controls

Atlas Server OverviewAtlas Server Overview

• Includes components in ASP.NET, including web services and server controls• Work in conjunction with Atlas client script libraries

• Leverages the following:• Profiles service• Membership service• Roles service• Personalisation services• Globalisation and culture-specific services

• Atlas server controls that resemble ASP.NET server controls• Emit Atlas client script• Simplify the process of producing Atlas client script• E.g. Buttons, labels, options, textboxes, check boxes, hyperlinks and

validation controls• Special Atlas controls that emit JavaScript to produce client

behaviours• HoverBehavior control, a ClickBehavior control, a Popup control and an

AutocompleteBehavior control

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

What is Atlas?What is Atlas?

Atlas Server Atlas Server FrameworkFramework

Atlas Client Framework and Atlas Client Framework and ServicesServices

Atlas Client Script LibraryAtlas Client Script Library

Controls, ComponentsControls, 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 StoreLocal StoreBrowser

Integration

BrowserIntegratio

n

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,AtlasAtlasMarkupMarkup

HTML, Script,HTML, Script,AtlasAtlasMarkupMarkup

AtlasAtlasServiceServiceProxiesProxies

AtlasAtlasServiceServiceProxiesProxies

Windows Presentation Windows Presentation FoundationFoundation

Windows Presentation Windows Presentation FoundationFoundation• Next generation framework for building smart clients

• That could only be built by very experienced graphic programmers previously

• Declarative (XAML) for designers• Object-based for developers

• Available for Windows Vista, Windows XP and Windows Server 2003

WinFXWinFXData Communication

Base Operating System Services

ObjectsObjects SQLSQLXMLXML WinFSWinFS ……

'DLinq'(ADO.NET)'DLinq'(ADO.NET)

'XLinq'(System.XML)

'XLinq'(System.XML)

StandardQueryOperators

StandardQueryOperators

Language Integrated QueryLanguage Integrated Query

……

Identity and AccessServices(AD-RMS, AD-STS, 'InfoCard')

Identity and AccessServices(AD-RMS, AD-STS, 'InfoCard')

CollaborationServices(People Near Me, …)

CollaborationServices(People Near Me, …)

……Windows WorkflowFoundation

(System.Workflow)

Windows WorkflowFoundation

(System.Workflow)

Presentation

ASP.NETWindowsForms

Windows Presentation Foundation

Composition EngineComposition Engine

Visual SystemVisual System

ElementsElements

DocumentsDocuments

Desktop Window Manager

Desktop Window Manager

HardwareRenderingHardwareRendering

Software RenderingSoftware Rendering

UIUI MediaMedia

ControlsControls

Designer ServicesDesigner Services

App ServicesApp Services

ApplicationServicesApplicationServices Controls InteropControls Interop

ApplicationHostingApplicationHosting

Application ServicesApplication Services

PagePage

ServerControlsServerControls

'Atlas' ClientScript Framework'Atlas' ClientScript Framework

'Atlas'ServicesBridge

'Atlas'ServicesBridge

…(DB2,Oracle,

…(DB2,Oracle,

Message Message

Channel (TCP, Peer, Security, Reliability, …)Channel (TCP, Peer, Security, Reliability, …)

Binding (WS-*, HTTP/XML, …)Binding (WS-*, HTTP/XML, …)

System.ServiceModelSystem.ServiceModel

Windows Communication Foundation

Web Services(HTTP, REST, XML-RPC, RSS, WS*, …)

Protocols(Pipes, IPvX/Sec, UDP, TCP, SMTP, …)

Contracts(XSL, XSD, WSDL, SDM,… )

Declarative Programming(XAML, Workflow, ASP.NET, …)

Integration

Transactions Storage

Protocols

Network Services

Base Class LibrariesBase Class Libraries

Memory ManagerMemory Manager

Hosting LayerHosting Layer

Code ExecutionCode Execution LoaderLoader SecuritySecurity SerializationSerialization

LightweightTransactionsLightweightTransactions

TransactionCoordinatorTransactionCoordinator

KernelTransactionManager

KernelTransactionManager

LoggingServiceLoggingService

KernelKernel

Hardware Abstraction LayerHardware Abstraction Layer

ProcessManagerProcessManager

SecurityReference Monitor

SecurityReference Monitor

LPCFacilityLPCFacility

MemoryManagerMemoryManager

PowerManagerPowerManager

ConfigManagerConfigManager

Plug andPlayPlug andPlay

TransactedNTFSTransactedNTFS

Cache ManagerCache

ManagerUniversalData Format

UniversalData Format

FilterEngineFilterEngine

TCP, UDPIPV4, IPV6TCP, UDPIPV4, IPV6 IPSECIPSEC QOSQOS HTTP

ListenerHTTPListener

Internet Connection FirewallInternet Connection Firewall

Demand Activation and Protocol HealthDemand Activation and Protocol Health

PNRPPNRP NativeWiFiNativeWiFi SIPSIP TCP

ListenerTCP Listener

UDP ListenerUDP Listener

IPC ListenerIPC Listener

Network Class LibraryNetwork Class Library

GDI/GDI+GDI/GDI+ WindowManagerWindowManager

GlobalAudio Engine

GlobalAudio Engine

Direct 3DGraphicsDirect 3DGraphics

Graphics driversGraphics drivers

DDIDDI InputManagerInputManager

AudioDriversAudioDrivers

DirectX GraphicsMini port

DirectX GraphicsMini port

RedirectorsRedirectors

SCSI/FCSCSI/FC 802.3802.3 802.11802.11 ....

Device Drivers

ManagementServices

(Event Logs,Tracing,Probes,

Auto Update,Admin)

ManagementServices

(Event Logs,Tracing,Probes,

Auto Update,Admin)

IO ManagerIO Manager

Application DeploymentEngine (Click-Once)

Application DeploymentEngine (Click-Once)

Identity &SecuritySystem

Identity &SecuritySystem

FAT 16/32FAT 16/32

FilterManagerFilterManager

DistributedFile SystemDistributedFile System

Virtual ShadowCopy ServiceVirtual ShadowCopy Service

File ReplicationServiceFile ReplicationService

Virtual DiskServiceVirtual DiskService

CLR

Windows Vista PlatformWindows Vista Platform

Full Trust or Web Browser App (.wba)

Click-Once Deployment

Windows Presentation Foundation Windows Presentation Foundation (1)(1)

Tool-ableDeclarative XAML

Data Driven

Windows Presentation Foundation Windows Presentation Foundation (2)(2)

Graphics Designer & Developer in Perfect Graphics Designer & Developer in Perfect Harmony Harmony

Unified API for UI, Documents, Media

Rich Control Set

Control Composition

Windows Presentation Foundation Windows Presentation Foundation (3)(3)

Animation

Hardware Rendering & Composition

Scalable UIRich Media

Vector Raster

Text

3DVideo

Windows Presentation Foundation Windows Presentation Foundation (4)(4)

Readability

Printing

Windows Presentation Foundation Windows Presentation Foundation (5)(5)

What couldn’t be done easily What couldn’t be done easily before?before?

• 2-dimensional and 3-dimensional graphics

• Animation

• Vector-based graphics

• the capability to zoom without distorting the image

• Audio and video integration

• Fixed and flow format documents

• Easy data binding, styling, templates

• WYSIWYG & vector-based printing

Windows Presentation FoundationWindows Presentation Foundation

DemoDemo

'WPF/E' Web Architecture'WPF/E' Web Architecture

Browser Application / OS

ContentPackage

XAML

ProgrammingModel

'WPF/E' Runtime

Plug-insPlug-ins Platform SpecificHosting ModelPlatform SpecificHosting Model

JavaScript

C# / VB.NET

Native API

XML - DataFonts Video/AudioImages

Native 'WPF/E' APINative 'WPF/E' API

UI & Rendering CoreUI & Rendering Core

Platform Abstraction LayerPlatform Abstraction Layer

'WPF/E' Features'WPF/E' Features

Core Runtime

Media Integration LayerMedia Integration Layer

AudioAudio VideoVideo

Composition EngineComposition Engine

Base ServicesBase Services

XML/XAML ParserXML/XAML Parser

AccessibilityAccessibility

Property SystemProperty System

Input and EventingInput and Eventing

TextText

ImagingImaging

2D2D

AnimationAnimation

Other ServicesOther Services

Core ControlsCore Controls

Basic LayoutBasic Layout

Container ControlsContainer Controls

SummarySummary

Richness vs. ComplexityRichness vs. Complexity

UX RichnessUX Richness

Developer

Developer

Productivity

Productivity

ASP.NET 2.0(HTML)

Windows Forms 2.0

Direct 3D v9

AvailabiliAvailability: ty:

2005 2006

DHTML(AJAX)

1997

ASP.NET 'Atlas'

Approachable

Direct 3Dv10

Richness

WindowsPresentationFoundation

Optimised Richness

& Approachable

What to use … and when?What to use … and when?

• Atlas Pros• Platform reach• Extends current web technology

(HTML, CSS, etc.)• Zero deployment

• WPF Pros

• Richest experience

• Offline capability

• ClickOnce deployment

• Text/Fonts

• Atlas Cons

• Learning curve (less with)

• Maintainability (less with)

• Requires Javascript on browser

• Restricted by Javascript and HTTP abilities

• Compatability?

• Tools lag

• WPF Cons

• Microsoft XP & Vista specific (for now)

• Client footprint required

• Tools lag

2006 2006 H2H2Vista Release(inc WPF)

2006 2006 H1H1

WPF Beta2

Platform RoadmapPlatform Roadmap

NowNow

WPF Feb CTPAtlas Mar CTP & Go Live Licence

20072007

Expression Interactive DesignerVS 'Orcas' (inc Atlas)

Next Session – WRK10104Next Session – WRK10104

• Workshop• A look at Atlas and WPF in action

• Q&A & Debate

• In Conwy 2 Room