Building AOL's High Performance, Enterprise Wide Mail Application With Silverlight 2
Upcoming SlideShare
Loading in...5

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



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.

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.



Total Views
Views on SlideShare
Embed Views



26 Embeds 206

http://appsec-targ17.pd.local 33
http://appsec-targ18.pd.local 32 25
http://appsec-targ12 21
http://appsec-targ01 16
http://appsec-targ14.pd.local 11
http://w3x32s05-pv011 9
http://appsec-targ02.pd.local 9
http://r5x64o11-pv097.pd.local 8
http://appsec-targ10.pd.local 7
http://localhost 6
http://appsec-targ15 5
http://appsec-targ11.pd.local 3
http://appsec-targ17 3
http://appsec-targ09 3
http://appsec-targ15.pd.local 2
http://r5x64o11-px043 2
http://r5x64o11-px034 2
http://appsec-targ22 2
http://w8x64s08-pv055.pd.local 1
http://appsec-atarg02.pd.local 1
http://appsec-targ14 1 1
http://r5x64o11-px015.pd.local 1
http://r5x64o11-px032 1
https://w8x64s08-pv133.pd.local 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • 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
    • 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
    • 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
    • “grid” & “stack” prototype
    • 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 ..
    • namespace Client.Controls.Button { [TemplatePart(Name=quot;Part_MouseUp“,Type=typeof(S toryboard)), … public abstract class ButtonBase : Control { … } }
    • 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
    • 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 …
    • using (Stream xstream = new CryptoStream(stream, _alghoritm.CreateDecryptor(), CryptoStreamMode.Read)) { using (Stream zstream = new GZipStream(xstream, CompressionMode.Decompress)) { data = LoadObject<T>(zstream); } }
    • 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; } } }
    • Appealing – Look good Rich in assets - Vibrant Feel alive!! – non static look Dynamic/Resizable Skinnable Fast – seem effortless
    • 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
    • Artists/Designers create application Think multiple/Differentiating skins Utilize tools. Create in natural format - xaml Build application to adopt designer requirements
    • Identify Key Components Components are themselves controls Define Root Layout of Application
    • First things first!! -- Custom Controls DataGrid Cells List Tree TreeNodes GridSplitter Buttons …
    • 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
    • <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>
    • namespace Client.Controls { public class ButtonCell : Control { ResourceHelper.GetControlTemplate(typeof(ButtonCell)); } public ButtonCell() { base.Template = s_CellTemplate; base.ApplyTemplate(); } }
    • 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
    • ControlTemplate> < <Grid x:Name=“Part_Root”> <Controls:ViewPanel> <Path x:Name=“Part_Frame” Data=“….”/> <Rectangle x:Name=“Part_Background” /> </Controls:ViewPanel> </Grid> <ControlTemplate>
    • public abstract class ViewPanel : Panel { protected override Size MeasureOverride(Size availableSize) { } protected override Size ArrangeOverride(Size finalSize) { } }
    • Skin is a project Comprised of Templates and Images
    • Skins ResourceHelper Class Loads Skin Assembly Helper functions to locate and load templates GetControlTemplate() Helper functions to load resources Application Background Background animation
    • 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
    • The quest for a rich, interactive user experience Custom controls Silverlight overlays
    • High performance Extreme flexibility Skinnable Small download
    • Template based controls Extensive data binding Template binding whenever possible Shared resources and styles Virtualized controls for large data sets
    • public class ItemData : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; }
    • VirtualizedList _list1; ObservableCollection<ItemData> _dataSource; … _list1.ItemsSource = _dataSource;
    • public class VirtualizedList : Control { … public IList ItemsSource { … } public DataTemplate ItemTemplate { … } }
    • <c:VirtualizedList x:Name=quot;_list1”> <c:VirtualizedList.ItemTemplate> <DataTemplate> <c:ListItem Foreground=quot;Blue“ Text=“{Binding Caption}”/> </DataTemplate> </c:VirtualizedList.ItemTemplate> </c:VirtualizedList>
    • <DataTemplate> <TextBlock Text=quot;{Binding Caption}quot; Foreground=quot;Gold“ Padding=quot;2quot;/> </DataTemplate>
    • Overlay HTML
    • 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
    • Creating Silverlight overlay plugin Communication between plugins Sharing code and resources Plugin lifetime management
    • 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
    • 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);
    • 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
    • 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
    • Model.dll Main.xap Popup.xap Popup.dll Controls.dll
    • _webClient = new WebClient(); _webClient.OpenReadCompleted += delegate(object sender,… e) { Load(new StreamResourceInfo (e.Result, null)); }; _webClient.OpenReadAsync( new Uri(“shared.xapquot;, UriKind.Relative));
    • StreamResourceInfo ri = Application.GetResourceStream(xap, new Uri(“shared.dll“, UriKind.Relative)); AssemblyPart p = new AssemblyPart(); Assembly a = p.Load(ri.Stream);
    • 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
    • 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
    • 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
    • Sign up today to be notified when the preview is available