Transcript Windows Presentation Foundation and User Experience

Windows Presentation Foundation and
User Experience … and Atlas 
Paul Cross
Richard Godfrey
Microsoft
Agenda
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' Matters
What is UX?
http://www.artlebedev.com/
VHS VCR
PVR (Windows MCE)
The world we are in …
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 Enterprise
• Consumer activity drives enterprise activity
• Windows
• Office
• XBox Live
• GPU
• Blogging
• Online Presence – Messenger, Yahoo, AOL, ICQ …
• …
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?
•
Through the decades …
•
White coats
•
•
•
•
Empowering the user
•
•
The 00s: Users & Experiences?
Observations
•
Computing power moving to the ‘edge’ of the network
•
•
•
•
•
The 90s: Internet & Services
Community
•
•
The 80s: PCs & Client-Server
User self-service
•
•
The 50s: Scheduling Time
The 60s: Batch Processing
The 70s: Timesharing & OLTP
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)?
• '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. Complexity
Developer Productivity
ASP.NET 2.0
(HTML)
Windows
Forms 2.0
DHTML
Direct 3D
v9
UX Richness
Availability:
1997
2005
Web Services &
Offline/Online
support
Heavy
Footprint
Network
Dependency
Rich User
Experience
Easy Change
Management
Tough to
Deploy
Limited User
Experience
Ease of
Deployment
Responsive
DLL Hell
Developer
Productivity
Complex
To Develop
AJAX/Atlas
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 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 AJAX
•
•
•
•
•
•
•
XHTML and CSS
Document Object Model (DOM)
XMLHttpRequest object
JavaScript
XML
XSLT
Etc.
Demo
Atlas 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 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 Overview
• Collection of JavaScript (.js) files providing features for objectoriented 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 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
What is Atlas?
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
Windows Presentation Foundation
Windows Presentation Foundation
• 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
Windows Vista Platform
WinFX
Presentation
Data
Windows Presentation
Foundation
Documents
UI
Windows
Forms
ASP.NET
'Atlas' Client
Script Framework
Server
Controls
Desktop
Window
Manager
Visual System
App
Services
Software
Rendering
Integration
Base Operating
System Services
GDI/GDI+ Window
Manager
Input
Manager
Memory
Manager
Global
Audio
Engine
Audio
Drivers
Power
Manager
Kernel
Hardware Abstraction Layer
'Atlas'
Services
Bridge
Standard
Query
Operators
'XLinq'
(System.
XML)
'DLinq'
(ADO.NET)
…
Windows Communication Foundation
System.ServiceModel
Application
Services
Composition Engine
Plug and
Play
…
Page
Designer
Services
DDI
(System.Workflow)
Collaboration
Services
(People Near
Me, …)
Controls Interop
Elements
Hardware
Rendering
Identity
and Access
Services
(AD-RMS, AD-STS,
'InfoCard')
Windows Workflow
Foundation
Language Integrated Query
Media
Application
Services
Communication
Objects
XML
SQL
WinFS
Application
Hosting
Controls
…
(DB2,
Oracle,
Binding (WS-*, HTTP/XML, …)
…
Message
Channel (TCP, Peer, Security, Reliability, …)
Declarative Programming
Contracts
Web Services
(XAML, Workflow, ASP.NET, …)
(XSL, XSD, WSDL, SDM,… )
(HTTP, REST, XML-RPC, RSS, WS*, …)
Protocols
(Pipes, IPvX/Sec, UDP, TCP, SMTP, …)
CLR Base Class Libraries
Application Deployment
Engine
(Click-Once)
Memory Manager
Network Class Library
Code Execution
Loader
Network Services
Transactions
Storage
Graphics drivers
Lightweight
Transactions
Virtual Shadow
Copy Service
Config
Manager
Kernel
Transaction
Manager
Process
Manager
Serialization
Hosting Layer
Direct 3D
Graphics
DirectX
Graphics
Mini port
Security
Security
Reference
Monitor
Transaction
Coordinator
Logging
Service
LPC
Facility
Identity &
Security
System
File Replication
Service
Virtual Disk
Service
Filter
Redirectors Distributed
File System Manager
Transacted
NTFS
Universal
Data
Format
Management
Services
(Event Logs,
Tracing,
Probes,
Auto Update,
Admin)
IO Manager
SCSI/FC
Native SIP
WiFi
TCP
Listener
UDP
Listener
IPC
Listener
Internet Connection Firewall
Protocols
Filter
Engine
Cache
Manager
FAT 16/32
PNRP
Demand Activation and Protocol Health
TCP, UDP
IPV4, IPV6
IPSEC
Device Drivers
802.3
802.11
..
QOS
HTTP
Listener
Windows Presentation Foundation (1)
Full Trust or
Web Browser App (.wba)
Click-Once Deployment
Windows Presentation Foundation (2)
Declarative XAML
Tool-able
Data Driven
Graphics Designer & Developer in Perfect Harmony 
Windows Presentation Foundation (3)
Control Composition
Unified API for UI, Documents, Media
Rich Control Set
Windows Presentation Foundation (4)
Rich Media
Scalable UI
Vector
Raster
Video
3D
Text
Animation
Hardware Rendering & Composition
Windows Presentation Foundation (5)
Readability
Printing
What couldn’t be done easily 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 Foundation
Demo
'WPF/E' Web Architecture
Browser
Application / OS
Content
Package
Images
Programming
Model
JavaScript
Fonts
Video/Audio
XAML
Native API
C# / VB.NET
Plug-ins
XML - Data
Platform Specific
Hosting Model
'WPF/E' Runtime
Native 'WPF/E' API
UI & Rendering Core
Platform Abstraction Layer
'WPF/E' Features
Core Runtime
Base Services
Media Integration Layer
Other Services
XML/XAML Parser
2D
Text
Core Controls
Accessibility
Audio
Video
Container Controls
Input and Eventing
Imaging
Animation
Basic Layout
Property System
Composition Engine
Summary
Richness vs. Complexity
Approachable
Optimised Richness
& Approachable
ASP.NET 2.0
(HTML)
ASP.NET
'Atlas'
Developer Productivity
Windows
Presentation
Foundation
Windows
Forms 2.0
Richness
DHTML
(AJAX)
Direct 3D
v9
Direct 3D
v10
UX Richness
Availability:
1997
2005
2006
What to use … and when?
•
•
Atlas Pros
• Platform reach
• Extends current web technology
(HTML, CSS, etc.)
• Zero deployment
•
Atlas Cons
•
Learning curve (less with)
•
Maintainability (less with)
•
Requires Javascript on browser
•
Restricted by Javascript and
HTTP abilities
•
Compatability?
•
Tools lag
•
WPF Pros
•
Richest experience
•
Offline capability
•
ClickOnce deployment
•
Text/Fonts
WPF Cons
•
Microsoft XP & Vista specific
(for now)
•
Client footprint required
•
Tools lag
Platform Roadmap
2007
Expression Interactive
Designer
VS 'Orcas' (inc Atlas)
2006 H2
Vista Release
(inc WPF)
2006 H1
WPF Beta2
Now
WPF Feb CTP
Atlas Mar CTP & Go Live Licence
Next Session – WRK10104
• Workshop
• A look at Atlas and WPF in action
• Q&A & Debate
• In Conwy 2 Room