© 2009 RoCk SOLid KnOwledge 1
RoCkKnOwledge
SOLiD
http://www.rocksolidknowledge.com
RIAs for architectsDavid Wheeler
© 2009 RoCk SOLid KnOwledge 3
ContextUI and the architecture
Does the UI affect the architecture of the application?
How
© 2009 RoCk SOLid KnOwledge 4
Context
Myriad of UI technologies available todayJava
Windows Forms / WPF
Flash / Flex
Silverlight
HTML / Javascript
UI choices
© 2009 RoCk SOLid KnOwledge 5
Context
UI technologies all come with constraintsdeployment & versioning
connectivity
richness
reach
performance (responsiveness, startup, etc.)
UI challenges
© 2009 RoCk SOLid KnOwledge 6
Context
HTML + Javascript == migraine
HTTP is statelesscookies or hidden fields, anyone?
But they’re easy to deploy relative to their desktop cousins
Web apps suck! Not really!
© 2009 RoCk SOLid KnOwledge 7
Context
Powerful
Fast and powerful
Fast, powerful and beautiful (with WPF)
Why would we even consider anything else?
Desktop apps rock!
Reach, deployment &versioning to name just 3!
Maybe! Maybe not!
© 2009 RoCk SOLid KnOwledge 8
Context
Does the team have the requisite skill set?do they understand the paradigms?
do they understand the tech issues?
Is the tooling up to the job?are there productive design / dev tools?
can you test?
Secondary factors on choosing a UI technology
© 2009 RoCk SOLid KnOwledge 9
What is a Rich Internet Application?
Rich Internet Applications (RIA) provide a “close-to-desktop” user experience
typically hosted in a browser plug-in
utilize animations, graphics, media content, etc.
useful for games, product sites, advertising, shopping cart, etc.
casual gaming
media playingproducts and services
© 2009 RoCk SOLid KnOwledge 10
STOP!
Not standards compliant
Subject to versioning issues
Might not be installed on the clientpoor initial user experience
Plug-ins are EVIL Maybe! Maybe not!
© 2009 RoCk SOLid KnOwledge 11
STOP!
Don’t comply to standards
Subject to versioning issuesIE quirks mode, anyone?
Unreliable client platformcookies / scripting can be disabled
text sizing, zoom levels, you name it
Browsers are EVIL Maybe! Maybe not!
© 2009 RoCk SOLid KnOwledge 12
The two main RIA competitors
Flash / Flex is dominant range of platforms
greater level of design / developer experience
Silverlight and Flash/Flex
Flash/Flex Silverlight 3
SupportedPlatforms
Mac OSX, Windows, Linux,PDA and handheld
Intel Mac (OSX 10.5+), Windows, Linux
Packaging .SWF (binary) .XAP (zip)
Programming ActionScript 3.0, Flex C#, VB.NET, etc.
Tools Flex Builder / Flash Visual Studio, Expression Blend
Plug-in size ~1MB ~ 4MB
Media support H.263, H.264, On2 VP6, MP3 HD-VC1 WMV, WMA, WMA Pro, MP3, H.264
© 2009 RoCk SOLid KnOwledge 13
Positioning
RIAs provide a close-to-desktop experiencebalance of rich content and supported platforms
richer UI
broader reach
Windows Presentation Foundation
XBAP / ClickOnce / .XAML
Silverlight
Flash / Flex
Ajax
HTML / ASP.NET
© 2009 RoCk SOLid KnOwledge 14
A typical RIA platform
RIAs will normally be an end-to-end solution
development tools and languages
range of designer toolsCLR
powerful runtime engine
© 2009 RoCk SOLid KnOwledge 15
Typical RIA programming model
Declarative user interfacesXAML for Silverlight, MXML for Flex
Declarative binding of data
Declarative validation of input
Powerful OO coding language / frameworkC#/.NET for Silverlight, ActionScript for Flex
© 2009 RoCk SOLid KnOwledge 16
Designer / developer workflows
.xaml
.sln
Designer
Integration designer
Developer
© 2009 RoCk SOLid KnOwledge 19
Web application architecture
Navigation supportbrowser forward and back buttons
Deep linking“hey, this is cool, I’ll bookmark it”
Searchhow do people find the app?
Core features
© 2009 RoCk SOLid KnOwledge 21
Bridging to the page
Silverlight & Flash/Flex can bridge to pagecool for adding interactivity and responsiveness
but is it a security issue?
© 2009 RoCk SOLid KnOwledge 23
Networking stacks
Plug-ins tend to use browser network stacklimited HTTP functionality
Additional features are availablee.g. sockets, “client” HTTP stacks
There are ALWAYS issuescross-domain access
firewalls
security
© 2009 RoCk SOLid KnOwledge 24
Cross-domain access
Servers require protection from RIA clientsuser plays a fun game ... ... managed code performs DDoS attack
Silverlight is secure
Sandbox
Silverlight application
limited cross-domainnetwork calls
© 2009 RoCk SOLid KnOwledge 25
HTTP cross-domain
Apps can talk to their site of origin over HTTPrequest URIs must use the same domain, protocol, and port
http://www.acme.comOK: site of origin
http://www.microsoft.comError: wrong host
https://www.acme.comError: wrong protocol
http://www.acme.com:8080Error: wrong port
http://apps.acme.comError: wrong sub-domain
Silverlight application
http://www.acme.com
© 2009 RoCk SOLid KnOwledge 26
HTTP cross-domain
Policy files control cross-domain access
Same technique used in SL and Flash
<?xml version="1.0" encoding="utf-8"?><access-policy><cross-domain-access>
<policy> <allow-from><domain uri="http://www.acme.com"/>
</allow-from> <grant-to> <resource path="/api" include-subpaths="false"/>
</grant-to> </policy>
</cross-domain-access></access-policy>
© 2009 RoCk SOLid KnOwledge 27
Right mouse button support
Silverlight has no support for right mouse button
can use DOM programming to hook event(if HTML bridge is open)
not all clients actually have two mouse buttons
best to avoid RMB for mainstream apps
© 2009 RoCk SOLid KnOwledge 28
Key events [full-screen limitations]
Key access restricted in full-screen modeimportant security feature
prevents impersonating apps and harvesting data from the user
Space, tab supported for minimal nav UI
© 2009 RoCk SOLid KnOwledge 29
Escaping the browser
Adobe Integrated Runtime (AIR)deploy Flash/Flex/Javascript apps to the client
extended APIs for working with files, etc.
Silverlight 3 “out of browser”deploy app to the client
© 2009 RoCk SOLid KnOwledge 30
Closing thoughts
Alternate content in the <object> elementa “taster” of the app if plug-in not there
Keep the initial app smalldownload the rest of the app in the background
Be wary of focus issues
Get the initial experience right
© 2009 RoCk SOLid KnOwledge 31
Closing thoughts
Multi-page within the RIA appgood for some scenarios
watch out for page refresh / back button
What does back actually mean?to you?
to your users?
is it “undo”?
Consider the navigation story
© 2009 RoCk SOLid KnOwledge 32
Closing thoughts
.NET shops can easily move to Silverlightfamiliar tools, frameworks, etc.
if reach is not a critical factor
issues with skillslack of designers with relevant Blend experience
Choosing the platform
© 2009 RoCk SOLid KnOwledge 33
Closing thoughts
Flash / Flex great for many organisationslarge(r) pool of existing Flash designers
Javascript (almost) == ActionScript
closer affinity to web programminge.g. use of CSS to style elements
it is a more mature platform than Silverlight
Choosing the platform
© 2009 RoCk SOLid KnOwledge 34
Closing thoughts
Silverlight OOB and AIR are interestinguser-deployed applications
partially connected scenarios
limited access to the machine resources
In or out of browser