Architecture + Strategy

Musings from David Chou - Architect, Microsoft

July, 2009

  • Architecture + Strategy

    Office Web Applications as Native Browser Apps in Microsoft Office 2010


    A couple of announcements at the Microsoft Worldwide Partner Conference (WPC09) have been making a lot of noise today. One is the unveiling of the much anticipated Office Web Applications, part of the overall Office 2010 announcements – that Office 2010, SharePoint Server 2010, Visio 2010 and Project 2010 have reached the technical preview engineering milestone.

    Unlike the previous online Office service offerings, such as Office Online, Office Live and Office Live Small Business; Office Web Applications are indeed browser-based Office clients. Specifically, Excel, OneNote, PowerPoint, and Word; in addition to Outlook which had the Web Access version for a number of years already.

    And as part of Office 2010, Office Web Applications will be available to nearly half a billion customers at launch:

    • 400 million users on Windows Live – FREE! 
    • 90 million Office annuity customers will have access to on-premise deployments
    • Office customers will also be able to host and access the Office Web Applications through Microsoft Online Services

    A few screenshots below. As you can see, one of the major common themes is that all of the Web Application clients will use the Office Fluent ribbon menu system as well.

    Excel Web Application

    And in FireFox:


    OneNote Web Application

    PowerPoint Web Application

    Word Web Application

    Use Office Anywhere!

    The Office Web Applications can be accessed by simply opening the documents as listed on a web page. Even though not just any web page, but can be document folder pages that are hosted in Office Live Workspaces, Windows Live Skydrive, SharePoint Online, on-premise SharePoint Server 2010 instances, etc. Just opening the document (for editing) will open the Office Web Applications in the same browser.

    These browser-based clients are considered “basic” cousins to the full desktop client versions. But as you can see, the level of fidelity and richness in the Office Web Applications are actually much better than “basic”. In fact, the included features are quite effective at editing documents from any browser.

    Plus some new features in Office Mobile 2010:

    • Full compatibility with the Open XML File Formats
    • SmartArt Graphics for viewing documents and presentations
    • Over-the-air sync for OneNote notebooks
    • The ability to sync SharePoint content to the device

    This means that, users will have access to, and can use Microsoft Office to edit/modify Office documents anywhere. From the most basic experience, but highest mobility on mobile devices, to most common/streamlined experience on any computer with an Internet connection, and to the richest/professional desktop experience installed locally on your own computer.

    Some people may criticize Microsoft for not innovating and still holding on to the desktop dinosaur, but we think a not one-size-fits-all approach, and offering the spectrum of options to use, is actually better for the customer. Someone has used an analogy – trying to fit everything into the browser, and ask all users to use that one model, is like asking everyone to ride mopeds.

    Real-Time Collaboration!

    In addition to the ability to save/store documents and access/edit them anywhere (cloud, server, desktop, device, etc.), users will also be able to share and collaboratively edit the same document over the network. And this will work access the desktop and browser-based clients. With “fast dynamic sync”, changes from multiple simultaneous users can be synchronized across the group almost instantaneously.

    Other new collaboration features include:

    • “Automagic” change merging
    • Unread change highlighting
    • View recent/historical edits
    • Author highlighting
    • Change versioning and management

    Things sure are looking quite interesting with the Office 2010 release.

    For more information:

  • Architecture + Strategy

    Silverlight and Photosynth at Stargate Universe



    MGM and Microsoft partnered to build an application intended to give old and new fans of Stargate a first look at the main location of the new Stargate Universe show, an ancient starship called the Destiny. The sets for the Destiny are amongst the most sophisticated ever built for a TV show, accurately capturing the spirit of a spaceship that has been abandoned for millennia. 

    MGM wanted to give fans an accurate experience of what it would be like to walk around and explore the Destiny, and using Microsoft Silverlight and Photosynth were able to deliver an immersive 3-D experience.

    UPDATE 2009.09.04 – a Microsoft Case Study and video has been published for this project. You can view the Case Study at, and the video at


    Over the space of two days, several hundred photographs were taken of some of the locations of the Destiny starship. These include the fan-favorite Gate Room, from where the crew embarks on their adventures through the Stargate as well as locations such as the ship’s control center, observation deck, and main shuttle.

    These photographs were used to create a number of 3D scenes using Microsoft Photosynth technology.  This technology analyzes pictures and creates a virtual 3D space using the different viewpoints from different pictures. Because the pictures were shot in high resolution, fans can zoom in and see the sets in great detail.


    See the Stargate Universe Photosynth set at

    Application Scenario

    Now Photosynth does not require any programming effort. All we need to do, is to take pictures. Lots of pictures. Then all we need to do is upload the pictures to, and Photosynth will do the rest, by interpreting textures in each photo and correlate the photos by matching similar textures, and figuring out spatially where each photo is located. Then finally, all of the photos in one set are stitched into a 3D environment for visitors to navigate through.

    Compare Photosynth to traditional approaches of trying to deliver 360 degree view of items, rooms, etc., which requires carefully planned photo shoots, then writing or obtaining specialized software to render them and allow viewers to interact with them. The time and effort required to create a “synth” can literally be minutes. Then just a few HTML-level changes to embed the Silverlight viewer for Photosynth into a web page, and anyone visiting that page can now interact with the synth.

    A screen shot of the gallery view is shown below.


    Kind of like a photo gallery on steroids. However, Photosynth is not just a slideshow. It allows viewers to traverse through the set of pictures in a non-linear manner, and to see the spatial perspectives between pictures (where each photo was taken relative to other photos).

    At the same time, specific considerations should be taken when taking photos for Photosynth. Basically, cover lots of angles and have lots of overlaps for overview shots, then lots of close-ups for detailed shots. Here’s a short tutorial on how to shoot for Photosynth.

    For the Stargate Universe synth, extra attention was paid to the physical architecture of the Destinty set. And the series of shots were taken so that the resulting synth would provide viewers an experience of walking through the set.

    Thus Photosynth can be leveraged in many scenarios, especially when a project has physical content that can be shared online. These can be anything, such as product showcases, exterior environments, interior walk-throughs, etc. Another simple and elegant way to enhance user acquisition and retention on websites.


  • Architecture + Strategy

    Silverlight and Live Messenger at Photobucket


    image Photobucket has collaborated with Microsoft to build Photobucket Visual Search (, making use of Silverlight, Windows Live Services and Photobucket's Open API platform. Photobucket Visual Search uses Silverlight to provide a rich and entertaining search experience, by displaying photos and videos in an easy-to-browse interface. The experience shows up search results, as well as related terms, helping users to find images they might not have in the past.

    Recognizing that photos are about sharing a social experience, Photobucket decided to use Microsoft's new Windows Live Messenger Web Toolkit to socially enable this Visual Search experience. Windows Live Messenger has over 320 Million active users, with over 32 billion social relationships between them. Sharing an image with friends on Windows Live is as easy as a click of a button with Photobucket Visual Search.



    Photobucket is a very popular site on the Internet for uploading, sharing, linking and finding photos, videos and graphics. Photobucket is usually used for personal photographic albums, remote storage of avatars displayed on internet forums, and storage of videos. Photobucket's image hosting is often used for eBay, MySpace (now a corporate cousin), Bebo, Neopets and Facebook accounts, LiveJournals or other blogs, and message boards. Users may keep their albums private, allow password-protected guest access, or open them to the public.

    Below are some statistics (circa 2007) regarding the website.

    • 30+ million searches processed / day
    • 25 million unique site visitors/month in the US, and over 46 Million unique site visitors/month worldwide
    • Over 7 billion images uploaded
    • #31 in Top 50 Sites in the US
    • #41 top 100 Global Sites
    • 18th Largest Ad supported site in the US
    • 41.4% share of U.S. visits to photography web sites
    • 56% of users are under 35, and 52% are female

    This project is intended to enhance Photobucket’s user experience while mapping specific objectives to the following core business goals:

    • Leverage rich software to create a fun and engaging experience
    • Social communication features that provide increased web traffic
    • Encourage users to add their own tags and collect metadata in the process
    • Improve user acquisition and retention to the Photobucket website

    Richer visualization and interaction, plus social networking capabilities, were chosen as the means to achieve the goals of improving user acquisition and retention. Consequently, Silverlight and Windows Live Messenger Web Toolkit were chosen as the components from the Microsoft platform that can be leveraged for the Photobucket Visual Search project. Photobucket’s existing open API’s (HTTP/REST-based) are used directly to support the search client application.


    The project architecture consists of Photobucket’s existing server infrastructure, which provides the open REST-based API’s, images, albums, thumbnails, groups (featured, most active, most recent, most contributions, contests, etc.), static content, etc. The website itself is a user interaction/presentation layer on top of the thousands of servers deployed as part of the content infrastructure. The website manages all the metadata associated with the massive amount of content, such as tags, descriptions, comments, image ownerships and relationships, user memberships, etc. Searches done on the Photobucket website is performed on the metadata and indexes; and the search results point to actual locations of content and assets across the massively parallel content infrastructure.

    The content infrastructure consists of multiple farms of thousands of servers, each manages different types of content, with user data partitioned horizontally across servers in each group. The content servers can be accessed directly using sub-domains on, such as for one of the image clusters, for one of the thumbnail clusters.

    Application requests are managed by the website, and the open API’s are managed via servers. Search queries retrieve an XML response, which represent search hits, with associated metadata, and actual image locations potentially pointing to hundreds of different servers where they physically reside.

    The Silverlight search client implementation is designed to fully leverage the search service as part of’s open API’s. It captures the search queries from the user, then sends it to for processing, then interprets the returned XML, renders the result, and downloads individual thumbnails from actual server locations in the thumbnails server farm.

    The Windows Live Messenger Web Toolkit implementation is mostly client-side. Photobucket hosts some of the files such as static images for branding the messenger interface, but most of the files are retrieved directly from the messenger service in the Live Services platform. Integration with the Silverlight Visual Search application is done through the JavaScript bridge.

    A diagram representing the logical architecture is shown below.


    The overall end-to-end architecture consists of these components

    • Client – Silverlight 2, Windows Live Messenger Web Toolkit, JavaScript, CSS, HTML, etc.
    • Server (Photobucket) – Linux, Apache 2.2.4 (EL4), PHP 5.2.6, MySql
    • Server (Live Services) – IIS 6, ASP.NET 2.0.50727
    • Tools – Visual Studio 2008, Expression Studio

    Silverlight Visual Search Development

    The default target dimensions for the application are 1024 X 768. However, the application supports browser resizing and will adjust accordingly when the user changes browser window size dynamically.

    The application has two primary states:

    • Main View (Search & Explore) – This is the state the user will be in initially and for a majority of the search and explore functionality. The main view displays thumbnails of the image results. It also allows users to modify their searches, or explore further using alternative searches.
    • Zoom View – The secondary state of the application brings the user into a view where the focus is on the viewing aspect of the large image and the image options, including sharing with Live Services.

    The project team went through many data visualization designs for the search results. In the end, a simplistic one that represented a similar model to the rest of the Photobucket site was chosen.

    Windows Live Messenger Web Toolkit Integration

    While in Zoom View, a user can share the photo via IM using Live Messenger. Doing so will prompt the user to sign in or register to sign up for Live Messenger. If the user is already signed in, this will trigger the user's Windows Live contact list to pop up.

    Delegated Authentication

    Signing in will link a user’s Windows Live ID with the website, granting an authentication consent (as a site-wide stored consent token) to Photobucket so that web pages generated from Photobucket can reuse this session with Live Messenger, and not have to require the user to sign-in on each page.

    The project team decided to leverage Live Messenger’s Delegated Authentication method because it provides the most unobtrusive method to the existing Photobucket’s membership system, as well as simplicity in implementation as the identity federation approach would be significantly more complex.

    Messenger Web Bar

    The Messenger Web Bar is a single UI Control that contains a full Windows Live Messenger experience. The Messenger Web Bar has the following functionality:

    • Contact list—The contact list enables the user to manage contacts and interact with them.
    • Conversation list—The conversation list contains all active conversations.
    • User area—The user area shows the user's presence and enables the user to update this information
    • Cross-page navigation—Cross-page navigation enables the user to stay signed in to Live Messenger while navigating from page to page within your application Web site.

    This functionality is encapsulated within a small bar at the bottom of the page. Because the Live Messenger Web Bar works across pages, conversations that start on a page on the application Web site can continue on another page of the application Web site. This functionality enables an application Web site to use the Live Messenger Web Bar as a platform to deeply integrate Live Messenger functionality and data into the site. Making an application Web site more social with the Messenger Web Bar and UI Controls can significantly increase user engagement.

    Shown below is a picture of the Messenger Web Bar used as part of the Visual Search experience.


    Once the user is logged into the Windows Live Messenger service, the user can view and interact with the list of contacts managed in the Windows Live service. The user can see also see presence information in terms of who among the contacts is online or offline at the moment. An IM conversation can then be initiated just by selecting a contact. If the user initiates an IM conversation while in Zoom View, Visual Search will automatically insert a link that says “Check this photo” with a URL to the actual image.

    Application Scenario

    This project demonstrated how Silverlight can be leveraged to add value to a website completely built on the LAMP stack. It also showed how Live Services can be leveraged, without any significant custom development effort, to add social computing capabilities to any website. The combination of rich clients, and composition of multiple cloud-based services on the Web, represents a Software Plus Services implementation approach, and how it enhances existing Web browsing models and improves user acquisition and retention.

    Related Resources

  • Architecture + Strategy

    Embedded Database Engine for Silverlight Applications


    So far, rich Internet applications (RIA) don’t have to be concerned with data management on the client side, as most connected implementations are designed to be simply a visualization and interaction layer to data and services on the server side. In these cases, data is retrieved from the server as JSON or XML data types (or serialized binary objects for some platforms), then cached in-memory as objects and collections, part of the application, and eventually discarded as part of the application lifecycle.

    But for relatively more complex applications that require larger and more distributed data sets, lower application latency, reduced chattiness, data relationships (even basic ones), the implementation starts to get a little complicated, and becomes more difficult with procedural languages like JavaScript. In that case, a simple and light-weight in-memory embedded database may become quite useful.

    Perst for .NET

    McObjectMcObject’s Perst is an open source, object-oriented embedded database system. Perst has been available in Java (SE, ME, and EE) and in .NET and .NET Compact Framework, and Mono. But recently McObjects ported Perst to Silverlight as well. Its small library size (~1MB including support for generics; ~5,000 lines of code) and small in-memory footprint is packed with a very sophisticated set of features, such as:

    • Support for direct and transparent object persistence
    • Full text search with indexing support
    • Full-ACID transactions support
    • SQL-based interface
    • XML import/export

    Perst inherited much of its heritage from McObject’s eXtremeDB embedded database product, which has been used in devices such as MP3 players, WiMAX base stations, digital TV set top boxes, military and aerospace applications, etc. Yes, even embedded applications and firmware can use databases.

    Interestingly, the C# code tree was initially produced from the Java version using the Java-to-C# converted in Visual Studio, then some additional changes to enable specific C# features. While not all Java applications can be converted this easily, this shows that some can. And this also means how similar C# and Java are.

    As an embedded database engine, Perst presents a very viable in-memory data management solution to Silverlight applications. It can be instantiated and used directly as part of the application, instead of something that runs in a separate process and memory space, or over the network on the back-end server for most RIA’s. Perst can also use Silverlight’s isolated storage to manage additional data that can be cached in a persistent manner. This enables many more complex scenarios than simply storing JSON, XML, CSV, or plain text data in isolated storage.

    Silverlight 3 Out-Of-Browser

    One can argue that the “connected client” design (as described above) works best for RIA’s, as they’re rich Web applications intended to enhance the user experience when connected to the cloud, to begin with. Or essentially, everyone can assume ubiquitous connectivity anytime and everywhere, so applications only need to live in the cloud, then all we need is a browser.

    But we’re also starting to see very valid scenarios emerge to access the cloud outside of the browser. And applications in these scenarios are often more refined/specialized than their HTML-based counterparts. For example, iPhone apps, iTunes, Wii, Adobe AIR, Google Gears, Google Desktop, Apple Dashboard Widgets, Yahoo! Gadgets, Windows Gadgets, FireFox extensions and plug-ins, Internet Explorer 8 WebSlices, SideBars, and ToolBars, etc. These out-of-browser application models are very valid because it has been observed that users tend to spend more time with them, than the websites behind those clients.

    There are many potential reasons for this observation, with some more prevalent in some scenarios. For example, local content is more visible to users and easier to access, without having to open a browser and then finding the website (sometimes needing to re-authenticate) and downloading the content. And of course, content and data can be stored locally for off-line access.

    Now that Silverlight 3 also supports installation of applications locally on the desktop, we can add the option of caching some data locally, in addition to being a locally installed visualization and interaction layer to cloud-based services, or a rich disconnected gadget. And McObject’s Perst embedded database would again be a really compelling solution to help with managing the data.

    This is especially important for out-of-browser and locally installed applications, as one of their primary benefits is to support off-line usage. Having a database management solution such as Perst can help increase the overall robustness of the user experience, by ensuring work continuity regardless of connection state.

    About McObject

    Founded by embedded database and real-time systems experts, McObject offers proven data management technology that makes applications and devices smarter, more reliable and more cost-effective to develop and maintain. McObject counts among its customers industry leaders such as Chrysler, Maximizer Software, Siemens, Phillips, EADS, JVC, Tyco Thermal Controls, F5 Networks, DIRECTV, CA, Motorola and Boeing.

  • Architecture + Strategy

    Silverlight 3 Released!


    Silverlight logoSilverlight 3 is officially released into production today!

    Silverlight has come a long way in the short time since its V1 launch in September 2007 and V2 release in October 2008. Each version brought very significant enhancements to the platform. My earlier post on the Silverlight 3 Beta has details on new features, adoption statistics to date, and a small list of interesting Silverlight applications.

    To summarize though, some significant changes in this release are:


    Silverlight 3 offers a new set of features for building safe, secure, sandboxed companion experiences for the Web through a single coherent platform, that run on user desktops. Out-of-browser support allows Silverlight applications to run on Windows or Mac desktops and deliver online, offline, or intermittently connected access to applications and content—without having to rebuild applications on another platform. Silverlight application can be easily found on the desktop or start menu, and launched with a single click—eliminating the requirement for privileges to run. In addition, it can test if the network is connected, update itself with newer versions, and have access to isolated storage.

    This works very similar to Adobe AIR, but Silverlight does not need a separate platform/runtime download in order to install applications and run them. If an application is enabled to run from the desktop, all a user has to do is right-mouse click on the application directly on the web page, which will have an option to “Install to Desktop”.

    Smooth Streaming

    Smooth Streaming technology is the union of online player experiences delivered through Silverlight and the streaming capabilities provided through Windows Server + IIS, that enables adaptive streaming of media so users with high bandwidth connections can experience HD-quality streaming while others with lower bandwidth receive the appropriate stream for their connectivity.

    This is the technology first used for the 2008 Beijing Olympics event by NBC to deliver live and on-demand programs over the Internet, then used at many other places such as Netflix, NCAA March Madness 2009 for CBS, the 2009 Presidential Inauguration, and most recently for the Michael Jackson’s memorial service.

    What’s significant about Smooth Streaming is that to deliver long-form content, along with all types of advertising scenarios (pre/post-roll, interstitial, overlay, etc.), can be delivered from Microsoft’s Internet Information Server (IIS) over the ubiquitous HTTP protocol, without requiring use of traditional streaming servers. Short-form content can still leverage out-of-the-box progressive download feature as well. Furthermore, this means it is much simpler to scale out the back-end infrastructure to serve the content to any amount of online audience, as an operation can add IIS servers quickly, plus leveraging web caches from CDN’s to further improve the scale and reach of any content.

    Prototyping with SketchFlow

    SketchFlow, the dynamic prototyping feature in Expression Blend 3, demonstrates the flow, layout, and transitions of an application through interactive “sketches” to convey initial concepts. And concurrent workflows between design, user experience, and development ensure that the visuals, interaction model, and the underlying architecture of an application can be simultaneously evolved and delivered as a completed project.

    SketchFlow ehances the speed and efficiency to prototype a vision for an application. Rapidly demonstrate and iterate on ideas, application flows, screen layout, and functionality of an application using a SketchFlow prototype.

    Web Ad_240b

    Lastly, visit these resources for more information:

    As well as a few of the projects my team and I worked on this year:

Page 1 of 2 (7 items) 12