RoCk SOLiD KnOwledge - Microsoftrocksolidknowledge.blob.core.windows.net/demos/SA2009+RIAs+for... · motivation technologies issues ... Secondary factors on choosing a UI technology

© 2009 RoCk SOLid KnOwledge 1

RoCkKnOwledge

SOLiD

http://www.rocksolidknowledge.com

RIAs for architectsDavid Wheeler


Agenda

Broad examination of RIAsmotivation

technologies

issues


ContextUI and the architecture

Does the UI affect the architecture of the application?

How


Context

Myriad of UI technologies available todayJava

Windows Forms / WPF

Flash / Flex

Silverlight

HTML / Javascript

UI choices


Context

UI technologies all come with constraintsdeployment & versioning

connectivity

richness

reach

performance (responsiveness, startup, etc.)

UI challenges


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!


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!


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


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


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!


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!


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


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


A typical RIA platform

RIAs will normally be an end-to-end solution

development tools and languages

range of designer toolsCLR

powerful runtime engine


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


Designer / developer workflows

.xaml

.sln

Designer

Integration designer

Developer


What is the application?Aren’t web apps page-based?


What is the application?

“Application”


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


What is the application?No app is an island

“Application”


Bridging to the page

Silverlight & Flash/Flex can bridge to pagecool for adding interactivity and responsiveness

but is it a security issue?


What is the application?Where does my data come from?

“Application”


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


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


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


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>


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


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


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


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


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


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


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


Closing thoughts

Silverlight OOB and AIR are interestinguser-deployed applications

partially connected scenarios

limited access to the machine resources

In or out of browser


RoCkKnOwledge

SOLiD

http://www.rocksolidknowledge.com

Q & AThanks for coming

Documents

RoCk SOLiD KnOwledge - Microsoftrocksolidknowledge.blob.core.windows.net/demos/SA2009+RIAs+for... · motivation technologies issues ... Secondary factors on choosing a UI technology