98
Architecting RIA with

Architecting RIAs with Silverlight

Embed Size (px)

DESCRIPTION

This is the deck that I used in my European Silverlight Tour in Spain, Switzerland, Denmark, Sweden, Bengium, Netherlands and Ireland. It\'s about architecting Rich Internet Applications with Silverlight 2.0.

Citation preview

Page 1: Architecting RIAs with Silverlight

Architecting

RIAwith

Page 2: Architecting RIAs with Silverlight

Contact

Josh HolmesUX Architect [email protected]

Page 3: Architecting RIAs with Silverlight

What is

by Kushal Das

Page 4: Architecting RIAs with Silverlight

Is it…Rural Inoculation Association?Rare Isotope Accelerator?Royal Institute of ActingRampantly Inept Alien?Royally Idiotic Annoyance?Really Inane Acronym?Rich Internet Application?

Page 5: Architecting RIAs with Silverlight

What is a Rich Internet Application?

Page 6: Architecting RIAs with Silverlight

RIA for me is all about expanding the experience for the user. Those "gray beards" amongst us remember the old days of just being happy seeing plain, static text show up in the browser. We've come a long way since then. While dynamic web sites have pushed us way beyond the simple pages of the old days, RIA is helping us now provide the same level of dynamic interaction on the client side as well. I think this is wonderful as it improves the entire process (server and client)!

While we have a great opportunity here to help users, the challenge is to not actually make things more difficult. Like any new feature, the web is rife with examples of poorly designed and hard to use applications. It is not enough to learn how to make HTTP requests and change content dynamically, but rather how to do it well in ways that help the user and not scare them off.

Raymond Camdenhttp://www.insideria.com/2008/01/what-is-ria-

1.html

Page 7: Architecting RIAs with Silverlight

But the term still begs the question: Rich in what sense? Responsiveness, immediacy, convenience? production values, chrome, animation?

http://www.insideria.com/2008/01/what-is-ria-1.html

Christian Crumlish

Page 8: Architecting RIAs with Silverlight

Rich Internet applications (RIA) are web applications that have the features and functionality of traditional desktop applications. RIAs typically transfer the processing necessary for the user interface to the web client but keep the bulk of the data (i.e., maintaining the state of the program, the data, etc.) back on the application server.

RIAs typically:•run in a web browser, or do not require software installation•run locally in a secure environment called a sandbox

http://en.wikipedia.org/wiki/Rich_Internet_application

Page 9: Architecting RIAs with Silverlight

Back Button and Refresh Visual VocabularyState management

Browser Sandbox Business Logic in UI

Component Level Logic

Animation

new for Desktop Developers

new for Web Developer

What’s different with RIA?

Limited Runtime

Service Orientation

Non-text based layoutHype

Page 10: Architecting RIAs with Silverlight

Ubiquity Richness Next Generation

Page 11: Architecting RIAs with Silverlight

SharePoint ASP.NET+AJAX Gadgets Silverlight Infopath OBA Winforms WPF XNA

Ubiquity Richness Next Generation

Page 12: Architecting RIAs with Silverlight

cross-browser, cross-platform, cross-device

for building and delivering the next generation of

.NET basedmedia experiences and rich interactive applications

for the Web

Page 13: Architecting RIAs with Silverlight

Legend

V2Legend

V1.0

CLR Execution Engine

Framework

HTML DOMIntegration

XAML

Networking

JSONREST POXRSS

DataLIN QXLINQ

DLRRubyPython

WPFExtensible

ControlsBCL

Generics Collections

InputsKeyboard

Mouse InkMedia

VC1 WMA MP3

Browser Host

IntegratedNetworking

Stack

Installer

ApplicationServices

MS AJAXLibrary

UI Core

Vector TextAnimation

Images

DRM

MediaControls

Layout Editing

Page 14: Architecting RIAs with Silverlight

Whether you are designing rich standards-based websites, ultimate experiences on the desktop, or managing digital assets and content, Expression professional design tools give you the flexibility and freedom to bring your vision to reality.

The professional

Webdesign tool

The professional Interactive design tool

The professional

Media Encoding tool

The professionalAsset

Managementtool

2

Page 15: Architecting RIAs with Silverlight

+ Silverlight tools for Visual Studio

Page 16: Architecting RIAs with Silverlight
Page 17: Architecting RIAs with Silverlight
Page 18: Architecting RIAs with Silverlight

Usable Useful

Adaptive

Reliable Cost-effective

Desirable

Page 19: Architecting RIAs with Silverlight

User NeedsInteraction DesignInformation DesignVisual Design

Experiences that create value!

++

+

Page 20: Architecting RIAs with Silverlight
Page 21: Architecting RIAs with Silverlight
Page 22: Architecting RIAs with Silverlight
Page 23: Architecting RIAs with Silverlight
Page 24: Architecting RIAs with Silverlight

Taliesin West: Drafting Studio

Page 25: Architecting RIAs with Silverlight
Page 26: Architecting RIAs with Silverlight
Page 27: Architecting RIAs with Silverlight

MVP Pattern View is more loosely

coupled to the model Easier to unit test Usually view to

presenter map one to one

Complex views may have multi presenters 

MVC Pattern Controller are

based on behaviors and can be shared across views

Can be responsible for determining which view to display (Front Controller Pattern)

Page 28: Architecting RIAs with Silverlight
Page 29: Architecting RIAs with Silverlight
Page 30: Architecting RIAs with Silverlight
Page 31: Architecting RIAs with Silverlight
Page 32: Architecting RIAs with Silverlight
Page 33: Architecting RIAs with Silverlight
Page 34: Architecting RIAs with Silverlight

• Uses tiled image pyramids

• The overhead of pyramids is 33%:

Page 35: Architecting RIAs with Silverlight

• Preprocessing tool breaks image into 256 x 256 tiles

• Then generates pyramids of tiles at lower resolutions

Page 36: Architecting RIAs with Silverlight

• When the image is displayed on the client the lowest resolution tiles are shown first

• Then as the higher quality tiles are downloaded, they are smoothly blended in

Page 37: Architecting RIAs with Silverlight

• When the image is displayed on the client the lowest resolution tiles are shown first

• Then as the higher quality tiles are downloaded, they are smoothly blended in

Page 38: Architecting RIAs with Silverlight

• When the image is displayed on the client the lowest resolution tiles are shown first

• Then as the higher quality tiles are downloaded, they are smoothly blended in

Page 39: Architecting RIAs with Silverlight
Page 40: Architecting RIAs with Silverlight
Page 41: Architecting RIAs with Silverlight
Page 42: Architecting RIAs with Silverlight

..but don’t forget the power users

70 20 10

Page 43: Architecting RIAs with Silverlight
Page 44: Architecting RIAs with Silverlight
Page 45: Architecting RIAs with Silverlight
Page 46: Architecting RIAs with Silverlight
Page 47: Architecting RIAs with Silverlight
Page 48: Architecting RIAs with Silverlight
Page 49: Architecting RIAs with Silverlight

with usability

Page 50: Architecting RIAs with Silverlight

• Cookies are on a domain level• bar.com cannot access foo.com cookies…• Same domain - http://foo.com  is different

than http://bar.foo.com or http://www.foo.com • Same protocol - http://foo.com is different

than https://foo.com • Same port - http://foo.com is

different than http://foo.com:8080

• foo.com should feel securestoring user data in cookies

• Prevent cross-site forgery• Exploits a sites trust for a user

Page 51: Architecting RIAs with Silverlight
Page 52: Architecting RIAs with Silverlight

• “Private” services (for your own app)• DO use browser-based authentication • Cookies, HTTP Auth, etc. • DO NOT enable public access via cross-domain policy file

• “Public” services (for 3rd-party apps)• DO NOT use browser-based authentication • DO publish cross-domain policy files • DO use “cross-domain-safe” authentication • E.g. URL signatures

• DO separate public services in their own domain• E.g. api.flickr.com vs. www.flickr.com

Page 53: Architecting RIAs with Silverlight
Page 54: Architecting RIAs with Silverlight
Page 55: Architecting RIAs with Silverlight
Page 56: Architecting RIAs with Silverlight
Page 57: Architecting RIAs with Silverlight
Page 58: Architecting RIAs with Silverlight

1.0 minimal Accessibility support We only provide some root “alt” information No focus and keyboard support

2.0 Accessibility greatly improved Full keyboard support Decorate XAML UI elements with Accessibility info Add accessibility to custom controls Accessibility reader support (AT) Accessibility tree exposition for UIA

Note - UIA on Windows, OS X does not support accessible plug-ins

Page 59: Architecting RIAs with Silverlight
Page 60: Architecting RIAs with Silverlight
Page 61: Architecting RIAs with Silverlight
Page 62: Architecting RIAs with Silverlight

by Caution Mike

Page 63: Architecting RIAs with Silverlight
Page 64: Architecting RIAs with Silverlight
Page 65: Architecting RIAs with Silverlight

private void Application_Startup(object sender, StartupEventArgs e){string startPageParameter = "/StartPage"; if (!e.InitParams.ContainsKey(startPageParameter)) { this.RootVisual = new DefaultStartPage(); } else { switch (e.InitParams[startPageParameter]) { case "DefaultStartPage": this.RootVisual = new DefaultStartPage(); break; case "NonDefaultStartPage": this.RootVisual = new NonDefaultStartPage(); break; default: throw new Exception(

"/StartPage must be 'DefaultStartPage' or 'NonDefaultStartPage'."); } }}

Page 66: Architecting RIAs with Silverlight
Page 67: Architecting RIAs with Silverlight
Page 68: Architecting RIAs with Silverlight
Page 69: Architecting RIAs with Silverlight

by billaday

Page 70: Architecting RIAs with Silverlight
Page 71: Architecting RIAs with Silverlight
Page 72: Architecting RIAs with Silverlight
Page 73: Architecting RIAs with Silverlight
Page 74: Architecting RIAs with Silverlight
Page 75: Architecting RIAs with Silverlight
Page 76: Architecting RIAs with Silverlight

by joeltelling

Page 77: Architecting RIAs with Silverlight
Page 78: Architecting RIAs with Silverlight
Page 79: Architecting RIAs with Silverlight
Page 80: Architecting RIAs with Silverlight

by mikeyexists

Page 81: Architecting RIAs with Silverlight
Page 82: Architecting RIAs with Silverlight
Page 83: Architecting RIAs with Silverlight
Page 84: Architecting RIAs with Silverlight

Who is using Silverlight now?

Page 85: Architecting RIAs with Silverlight

France Internet Marketing

Page 86: Architecting RIAs with Silverlight
Page 87: Architecting RIAs with Silverlight

Japan Great UX

Page 88: Architecting RIAs with Silverlight
Page 89: Architecting RIAs with Silverlight
Page 90: Architecting RIAs with Silverlight
Page 91: Architecting RIAs with Silverlight
Page 92: Architecting RIAs with Silverlight
Page 93: Architecting RIAs with Silverlight
Page 94: Architecting RIAs with Silverlight
Page 95: Architecting RIAs with Silverlight

Rich Internet Applications are meant to enhance user experience

Architecture of the client matters Use good development practices Leverage the framework Build for the user Don’t get religious

Take-aways

Page 96: Architecting RIAs with Silverlight

http://silverlight.net/getstarted http://www.joshholmes.com

Take the Next Step

Page 97: Architecting RIAs with Silverlight

Architecting

RIAwith

Page 98: Architecting RIAs with Silverlight

Contact

Josh HolmesUX Architect [email protected]