Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2


Published on

Come join the Rich Internet Application engineering team from AOL and see first-hand how AOL created a rich, scalable mail application using Microsoft Silverlight 2.

Published in: Technology, Business
  • Be the first to comment

Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2

  1. 1. Mail RIA & Silverlight – Defining new experience on the Web Our RIA objectives - Eric Hoffman A Silverlight development tale – Eric Hoffman A new verse in web User Interface – Marc Katchay The underlying nuts and bolts – Stefan Gal Monetization opportunities – Seth Halvaksz An Invitation
  2. 2. The next chapter for web applications Rich and performant Personalization taken to another level Write it once, run it everywhere Beyond the web cache Enhanced engagement New monetization opportunities
  3. 3. Beginning with Silverlight 1.0 / 2.0 Research and exploration project We were hopeful… High Definition video and audio playback Compact size and the idea of “write it once” The “DNA” for some controls .NET runtime – really appealing to us developers Challenges presented themselves throughout the summer of 07
  4. 4. “grid” & “stack” prototype
  5. 5. Silverlight 2.0 provided… Basic layout Grid & stack panels Isolated storage – size was a factor still Could we build an application with just this .. Pivotal moment was reached Hybrid approach was contemplated Delay project several months In the end ..our team decided to write some code ..
  6. 6. namespace Client.Controls.Button { [TemplatePart(Name=quot;Part_MouseUp“,Type=typeof(S toryboard)), … public abstract class ButtonBase : Control { … } }
  7. 7. What we really needed … more advanced controls.. Buttons, checkboxes Tree control ListView,- virtualized .. Listboxes – for settings Html control for read and write mail Grid splitters & custom layout Databinding – move data from model to our controls
  8. 8. Morphed into a Collaboration .. Contribution to the core Silverlight feature set Request functionality as we needed .. A validation of the usability of the framework Some examples Adding encryption for secure isolated storage Imagine background worker threads – in a web application ! Cross domain would be nice …
  9. 9. using (Stream xstream = new CryptoStream(stream, _alghoritm.CreateDecryptor(), CryptoStreamMode.Read)) { using (Stream zstream = new GZipStream(xstream, CompressionMode.Decompress)) { data = LoadObject<T>(zstream); } }
  10. 10. public void SaveObject<T>(string path, T data, Action<Exception> cb) where T : class { // Main thread here … ThreadPool.QueueUserWorkItem(delegate(object state) { // Anonymous function – C# // Worker thread here … Exception exception = null; try{ SaveObject(path, data); } catch (Exception ex){ exception = ex; } } }
  11. 11. Appealing – Look good Rich in assets - Vibrant Feel alive!! – non static look Dynamic/Resizable Skinnable Fast – seem effortless
  12. 12. Designers create UI layout Developers build controls and components Controls paint visuals and bind to business data UI elements taken from designers layout and rendered in respective controls
  13. 13. Artists/Designers create application Think multiple/Differentiating skins Utilize tools. Create in natural format - xaml Build application to adopt designer requirements
  14. 14. Identify Key Components Components are themselves controls Define Root Layout of Application
  15. 15. First things first!! -- Custom Controls DataGrid Cells List Tree TreeNodes GridSplitter Buttons …
  16. 16. Custom visual controls derive from control class Control Class supports Control Templates All components and visual controls use templates Critical for skinning model Templates collected to form a skin
  17. 17. <ControlTemplate/> <Grid x:Name=quot;Part_Rootquot;> <Grid.Resources> <Storyboard x:Name=quot;Part_MouseEnterquot;> <ColorAnimation Duration=quot;00:00:00.2“ To=quot;#50FFFFFFquot; Storyboard.TargetName=quot;Part_HighlightRect” Storyboard.TargetProperty=quot;(Shape.Fill).(SolidColorBrush.C olor)quot; /> </Grid.Resources> <Rectangle x:Name=quot;Part_HighlightRectquot; Fill=quot;#00FFFFFFquot;/> <TextBlock x:Name=quot;Part_Caption” FontSize=quot;12quot; Text=quot;Buttonquot; /> </ControlTemplate>
  18. 18. namespace Client.Controls { public class ButtonCell : Control { ResourceHelper.GetControlTemplate(typeof(ButtonCell)); } public ButtonCell() { base.Template = s_CellTemplate; base.ApplyTemplate(); } }
  19. 19. Browser resizes Grid Splitters Some UI elements grow as skin is resized Manage Multiple UI elements Built specialized layout panels to encapsulate and draw multiple elements of a skin Code behind should never have custom code dedicated to a skin
  20. 20. ControlTemplate> < <Grid x:Name=“Part_Root”> <Controls:ViewPanel> <Path x:Name=“Part_Frame” Data=“….”/> <Rectangle x:Name=“Part_Background” /> </Controls:ViewPanel> </Grid> <ControlTemplate>
  21. 21. public abstract class ViewPanel : Panel { protected override Size MeasureOverride(Size availableSize) { } protected override Size ArrangeOverride(Size finalSize) { } }
  22. 22. Skin is a project Comprised of Templates and Images
  23. 23. Skins ResourceHelper Class Loads Skin Assembly Helper functions to locate and load templates GetControlTemplate() Helper functions to load resources Application Background Background animation
  24. 24. Summary We have a skin solution Separate assemblies Change skins Dynamic living skins Well defined layer for designers to work with UI Infrastructure Controls – Templates Components – define key sections of app
  25. 25. The quest for a rich, interactive user experience Custom controls Silverlight overlays
  26. 26. High performance Extreme flexibility Skinnable Small download
  27. 27. Template based controls Extensive data binding Template binding whenever possible Shared resources and styles Virtualized controls for large data sets
  28. 28. public class ItemData : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; }
  29. 29. VirtualizedList _list1; ObservableCollection<ItemData> _dataSource; … _list1.ItemsSource = _dataSource;
  30. 30. public class VirtualizedList : Control { … public IList ItemsSource { … } public DataTemplate ItemTemplate { … } }
  31. 31. <c:VirtualizedList x:Name=quot;_list1”> <c:VirtualizedList.ItemTemplate> <DataTemplate> <c:ListItem Foreground=quot;Blue“ Text=“{Binding Caption}”/> </DataTemplate> </c:VirtualizedList.ItemTemplate> </c:VirtualizedList>
  32. 32. <DataTemplate> <TextBlock Text=quot;{Binding Caption}quot; Foreground=quot;Gold“ Padding=quot;2quot;/> </DataTemplate>
  33. 33. Overlay HTML
  34. 34. Requirement introduced by the usage of browser based HTML rendering and composition Also used for Context menus Modal dialogs Rich Tooltips „Out of banner‟ Silverlight ads Legacy ads
  35. 35. Creating Silverlight overlay plugin Communication between plugins Sharing code and resources Plugin lifetime management
  36. 36. Hosted by an absolute positioned DIV Host element is child of main host element, sibling of the main plugin Silverlight.js support to create the additional plugin Windowless mode supports transparency and irregularly shaped windows
  37. 37. ScriptObject arg = (ScriptObject) HtmlPage.Window.Eval(quot;new Object;quot;); arg.SetProperty(quot;initParamsquot;, “parentId=quot; + HtmlPage.Plugin.Id; ScriptObject slso = (ScriptObject) HtmlPage.Window. GetProperty(quot;Silverlightquot;); slso.Invoke(quot;createObjectExquot;, arg);
  38. 38. Each plugin runs in its own application domain JSON payload passed as parameters and returned as result. Input and output passed by value. Scriptable objects used for callbacks and interaction Creation is asynchronous, the child plugin will find and connect to the parent based on initialization parameters
  39. 39. Separate .xap archive files are used for main plugin and overlay plugins Distributing shared code and resources in both archives is possible but not desirable due to increased download size. We chose to have the overlay load the required assemblies dynamically from the main archive It is fast because the download will find the main archive cached by the browser
  40. 40. Model.dll Main.xap Popup.xap Popup.dll Controls.dll
  41. 41. _webClient = new WebClient(); _webClient.OpenReadCompleted += delegate(object sender,… e) { Load(new StreamResourceInfo (e.Result, null)); }; _webClient.OpenReadAsync( new Uri(“shared.xapquot;, UriKind.Relative));
  42. 42. StreamResourceInfo ri = Application.GetResourceStream(xap, new Uri(“shared.dll“, UriKind.Relative)); AssemblyPart p = new AssemblyPart(); Assembly a = p.Load(ri.Stream);
  43. 43. Flexible separation of data, control logic and control visuals Lightweight and high performance Extensive binding Virtualized controls for large data sets Rich, highly interactive visuals Skins downloaded on demand
  44. 44. AOL Mail RIA & Monetization Objectives Engaging High-performing Standards-based Integration between ads and application Skins Panels Rich media options High impact audio & video Rich animations
  45. 45. AOL Mail RIA & Silverlight A new experience on the web Industry-leading performance Unique skinning capabilities High impact content delivery Mail from AOL Innovative products Get the email identity and experience that expresses who you are and what you like
  46. 46. Sign up today to be notified when the preview is available