Silverlight Architecture Overview

August 14, 2007 § Leave a comment

Barak Cohen

Microsoft Corporation

April 2007

Applies to:

Silverlight Community Technology Preview (CTP) Feb 2007

Summary:
This white paper provides a high-level overview of the Silverlight
(formerly known as code name “WPF/E”) architecture and how it fits into
the Microsoft offering for building next-generation Web applications.
Also, this white paper provides an architectural review of the
Silverlight technology. (6 printed pages)

Contents

Introduction
Silverlight as Part of a User-Experience Continuum
Silverlight Architecture
Deployment and Packaging
Scenarios for Using Silverlight
Conclusion

Introduction

Microsoft
Silverlight is a cross-browser, cross-platform plug-in for delivering
the next generation of .NET based media experiences and rich
interactive applications (RIAs) for the Web. Silverlight offers a
flexible and consistent programming model that supports AJAX, Python,
Ruby, and .NET languages such as VB and C#, and integrates with
existing Web applications. Silverlight media capabilities include fast,
cost-effective delivery of high-quality audio and video to all major
browsers including Firefox, Safari and Internet Explorer running on the
Mac or on Windows. By using Expression Studio and Visual Studio,
designers and developers can collaborate more effectively using the
skills they have today to create Silverlight web experience.

Silverlight as Part of a User-Experience Continuum

Now,
more than ever, customers are demanding applications and online
experiences that not only meet their individual needs in terms of
effectiveness and efficiency, but also address the perception of
satisfaction the user has with a company’s products or services. In
most cases, the level of satisfaction will have a network and an
emotional effect, shaping perceptions of the company as a whole, and,
as an extension, the perceptions of those with whom the individual
comes into touch. Microsoft acknowledges this connection and has a made
a renewed commitment to user experience (UX) as a part of the
end-to-end experience. UX is more than a pretty UI; it is the
aggregation of the interaction point of a user with an application. Our
mission is thus to enable a great user experience wherever the customer
needs that: on the Web, on devices, in Office, and in Windows.

Two
recent examples of Microsoft’s own investment in UX are Microsoft
Windows Vista and Microsoft Office 2007. By focusing on the end-user
experience first, subtle and somewhat radical changes were made to both
products in order to address productivity and satisfaction.

  • Windows Vista
    introduces easier ways to visualize and organize your files, media, and
    communications. In every case of the UI, a focus on user-centric task
    accomplishment and experience was put first. Other examples of focusing
    on UX include the new task switcher (Alt+Tab) and Wi-Fi signal
    notification.
  • Microsoft Office 2007
    has introduced the new “Ribbon” concept to replace traditional
    toolbars. A natural extension, the ribbon reduces time to find any
    given feature in an Office application to about 10 seconds.

Both
of these decisions were heavily influenced by design and designers,
working collaboratively with the rest of the development team. To learn
more, visit http://www.microsoft.com/design

Figure1. Microsoft UX continuum

From
a platform perspective, Microsoft introduces a consistent offering that
uses common skills to address the different application-interaction
surfaces, as indicated in Figure 1.

  • ASP.NET AJAX offers the benefits of standard
    Microsoft support (around-the-clock support for a period of 10 years)
    for AJAX-enabled applications built around Web standards. It allows
    standard Web applications to be more effective by improving the
    interaction parameters of the application (such as refresh, resource
    usage, and navigation).
  • For Web experiences that need 2-D
    animation, vector graphics, and high-fidelity audio and video on the
    Web, Silverlight is being introduced to extend the capability of the
    browser to render XAML in addition to HTML. By embracing Web
    architecture for development, including industry-standard AJAX
    (Asynchronous JavaScript+XML) and inline XML markup (XAML) for
    presentation, Microsoft is working to break rich elements on Web pages
    out of the “black box” that exists today. As an added benefit, content
    authored in Silverlight and ASP.NET AJAX becomes more discoverable
    while offering the benefits of being cross-platform (Windows and
    Macintosh) and cross-browser (Internet Explorer, Firefox, Safari).
  • ASP.NET
    AJAX and Silverlight are designed to be complementary technologies. In
    the broader sense, Silverlight can interact with any AJAX application,
    both client- and server-side. Examples for such integration include
    mapping applications, video playback with rich presentation, and more.
  • For
    connected applications on Windows, Microsoft provides the .NET
    Framework 3.0 programming layer (shipped in Windows Vista and available
    for Windows XP) that includes the Windows Presentation Foundation
    (WPF). By using WPF, one can create rich, immersive, connected
    applications and experiences that can take full advantage of the
    Windows platform, including UI, media, offline communication, and
    document support. WPF uses a superset of the same XAML that is used by
    Silverlight.

Figure 2. Microsoft end-to-end offering for UX

As
Figure 2 shows, Silverlight is not an isolated island; it is a piece in
a consistent end-to-end offering that enables taking application
experiences to the next level. This offering includes server-side
components, tools (Microsoft Expression and Microsoft Visual Studio), and UX technologies.

Silverlight Architecture

Silverlight has few basic properties:

  • It integrates with various browsers on Windows and on the Macintosh.
  • It enables rendering of richer user experiences that are defined by XAML.
  • It render media (music and video).
  • It enables programming that is consistent with the Web programming model.
  • It is small.

Silverlight was designed to address these properties, as Figure 3 shows.

Figure 3. Silverlight architecture

  • Lightweight browser plug-in—Silverlight
    has Windows and Macintosh modules that are designed to enhance Internet
    Explorer (versions 6.0 and 7.0), Firefox 2.0, and Safari browsers. The
    December 2006 CTP for Windows is 1.1 MB in size.
  • Native presentation runtime
    Software-based browser enhancement that allows rendering of XAML-based
    interactive 2-D graphics, text, and media, in addition to the browser
    native rendering of HTML. XAML can be used inline, in a file, or in a
    package.
  • Interactive video and audio—Cross-platform
    independent media runtime that can render Windows Media content (WMV
    and WMA) in addition to MP3 (will be available after the December 2006
    CTP). Video and audio are handled as a media element in XAML, enabling
    flexibility in their presentation. Furthermore, the media support
    leverages the huge infrastructure and ecosystem around Windows Media,
    enabling cost-effective delivery of top-quality media.
  • Programming layer—In
    consistency with the Web architecture, Silverlight XAML is exposed
    using a DOM model to JavaScript. That way, AJAX programs can utilize
    the extended markup rendering capability using the same programming
    paradigms and practices (on the client and on the server). After the
    December 2006 CTP, we will also enable a managed code programming model
    using a subset of full CLR that will enhance the programmability side
    of the browsers to enable more performant and more scalable Web
    applications.

Deployment and Packaging

Content for a Web page that contains Silverlight elements can be created by using the following tactics:

  • Inline XAML and JavaScript.
  • External XAML files and JavaScript files.
  • Compressed
    content package (available after the December 2006 CTP) that contains
    XAML, managed code, images, fonts, and media. Streaming media sources
    can be referenced from the XAML media elements.

Figure 4. Silverlight packaging (after Feb 2007 CTP)

We
believe that the flexibility of application packaging and the
consistency of the application architecture with Web standards and
operations will create many opportunities for improving the impact and
effectiveness of Web applications, making applications more scalable,
fault-tolerant, and dynamic (they can change their markup on the fly),
and making content more discoverable.

Web pages that require
Silverlight can detect if the Silverlight plug-in is installed, and can
direct users to download it and install it (either through a redirect
or through an object tag). The Silverlight SDK has documentation on
that.

Scenarios for Using Silverlight

Silverlight is perfect for the following Web application scenarios that encompass many real-world scenarios:

  • Web media— Branded playback with events, video and marketing mix, dynamic videos with ads, audio playback, and so forth
  • Rich islands on a page (mini apps)— Casual games and gadgets
  • Web visualization elements— Navigation properties, data visualization, and ads

Silverlight
is designed for Web page content that is connected to its host (it will
not work offline), that deeply engages the user, and that can render on
any browser.

Conclusion

This
article provided a high-level overview of the Silverlight architecture
and how it fits into the Microsoft offering for building
next-generation Web applications. Silverlight is part of a larger
revolution of the ways applications are designed, built, and delivered.
With markup-based UI and flexible programming models, businesses will
be able to offer better experiences on the right form factor for their
customers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

What’s this?

You are currently reading Silverlight Architecture Overview at Naik Vinay.

meta

%d bloggers like this: