Architecting R IA with
Contact Josh Holmes UX Architect Evangelist [email_address] joshholmes.com
What is  by  Kushal Das
Is it… R ural  I noculation  A ssociation? R are  I sotope  A ccelerator? R oyal  I nstitute of  A cting R ampantly  I nept  A lien? R oyally  I diotic  A nnoyance? R eally  I nane  A cronym? R ich  I nternet  A pplication?
What is a  R ich  I nternet  A pplication?
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 Camden http://www.insideria.com/2008/01/what-is-ria-1.html
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
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
Back Button and Refresh Visual Vocabulary State 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 layout Hype
Ubiquity Richness Next Generation
SharePoint  ASP.NET+AJAX  Gadgets  Silverlight  Infopath  OBA  Winforms  WPF  XNA Ubiquity Richness Next Generation
cross-browser, cross-platform, cross-device for building and delivering the next generation of .NET based media experiences and rich interactive applications for the  Web
Legend V2 Legend V1.0 CLR Execution Engine Framework HTML DOM Integration XAML Networking JSON REST POX RSS Data LIN Q XLINQ DLR Ruby Python WPF Extensible  Controls BCL Generics  Collections  Inputs Keyboard Mouse Ink Media VC1 WMA MP3 Browser Host Integrated Networking Stack Installer Application Services MS AJAX Library UI Core Vector Text Animation  Images DRM Media Controls Layout Editing
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.  2 The professional  Web design tool The professional  Interactive  design tool The professional  Media Encoding  tool The professional Asset Management tool
+ Silverlight tools for Visual Studio
 
 
 
Useful Adaptive Reliable Cost-effective Desirable Usable
User Needs Interaction Design Information Design Visual Design Experiences that create value! + + +
 
 
 
 
Taliesin West: Drafting Studio
 
 
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)
 
 
 
 
 
 
Uses tiled image pyramids The overhead of pyramids is 33%:
Preprocessing tool breaks image into 256 x 256 tiles Then generates pyramids of tiles at lower resolutions
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
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
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
 
 
 
..but don’t forget the  power users 70 20 10
 
 
 
 
 
 
with usability
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 secure storing user data in cookies Prevent cross-site forgery Exploits a sites trust for a user
 
“ 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
 
 
 
 
 
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
 
 
 
by  Caution Mike
 
 
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'." ); } } }
 
 
 
by  billaday
 
 
 
 
 
 
by  joeltelling
 
 
 
by  mikeyexists
 
 
 
Who is using Silverlight now ?
France Internet Marketing
 
Japan Great UX
 
 
 
 
 
 
 
 
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
http://silverlight.net/getstarted   http://www.joshholmes.com   Take the Next Step
Architecting R IA with
Contact Josh Holmes UX Architect Evangelist [email_address] joshholmes.com

Architecting RIAs with Silverlight

  • 1.
  • 2.
    Contact Josh HolmesUX Architect Evangelist [email_address] joshholmes.com
  • 3.
    What is by Kushal Das
  • 4.
    Is it… Rural I noculation A ssociation? R are I sotope A ccelerator? R oyal I nstitute of A cting R ampantly I nept A lien? R oyally I diotic A nnoyance? R eally I nane A cronym? R ich I nternet A pplication?
  • 5.
    What is a R ich I nternet A pplication?
  • 6.
    RIA for meis 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 Camden http://www.insideria.com/2008/01/what-is-ria-1.html
  • 7.
    But the termstill 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
  • 8.
    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
  • 9.
    Back Button andRefresh Visual Vocabulary State 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 layout Hype
  • 10.
  • 11.
    SharePoint ASP.NET+AJAX Gadgets Silverlight Infopath OBA Winforms WPF XNA Ubiquity Richness Next Generation
  • 12.
    cross-browser, cross-platform, cross-devicefor building and delivering the next generation of .NET based media experiences and rich interactive applications for the Web
  • 13.
    Legend V2 LegendV1.0 CLR Execution Engine Framework HTML DOM Integration XAML Networking JSON REST POX RSS Data LIN Q XLINQ DLR Ruby Python WPF Extensible Controls BCL Generics Collections Inputs Keyboard Mouse Ink Media VC1 WMA MP3 Browser Host Integrated Networking Stack Installer Application Services MS AJAX Library UI Core Vector Text Animation Images DRM Media Controls Layout Editing
  • 14.
    Whether you aredesigning 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. 2 The professional Web design tool The professional Interactive design tool The professional Media Encoding tool The professional Asset Management tool
  • 15.
    + Silverlight toolsfor Visual Studio
  • 16.
  • 17.
  • 18.
  • 19.
    Useful Adaptive ReliableCost-effective Desirable Usable
  • 20.
    User Needs InteractionDesign Information Design Visual Design Experiences that create value! + + +
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
    MVP Pattern Viewis 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)
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
    Uses tiled imagepyramids The overhead of pyramids is 33%:
  • 36.
    Preprocessing tool breaksimage into 256 x 256 tiles Then generates pyramids of tiles at lower resolutions
  • 37.
    When the imageis displayed on the client the lowest resolution tiles are shown first Then as the higher quality tiles are downloaded, they are smoothly blended in
  • 38.
    When the imageis displayed on the client the lowest resolution tiles are shown first Then as the higher quality tiles are downloaded, they are smoothly blended in
  • 39.
    When the imageis displayed on the client the lowest resolution tiles are shown first Then as the higher quality tiles are downloaded, they are smoothly blended in
  • 40.
  • 41.
  • 42.
  • 43.
    ..but don’t forgetthe power users 70 20 10
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
    Cookies are ona 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 secure storing user data in cookies Prevent cross-site forgery Exploits a sites trust for a user
  • 52.
  • 53.
    “ 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
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
    1.0 minimal Accessibilitysupport 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
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
    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'." ); } } }
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
    Who is usingSilverlight now ?
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
    Rich Internet Applicationsare 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
  • 98.
    http://silverlight.net/getstarted http://www.joshholmes.com Take the Next Step
  • 99.
  • 100.
    Contact Josh HolmesUX Architect Evangelist [email_address] joshholmes.com

Editor's Notes