WPF/E Technical Articles
 
 

Barak Cohen

Microsoft Corporation

December 2006

Applies to:
   "WPF/E" (code name) Community Technology Preview (CTP)

Summary: This white paper provides a high-level overview of the "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 "WPF/E" technology. (5 printed pages)

Contents

Introduction
"WPF/E" as Part of a User-Experience Continuum
"WPF/E" Architecture
Deployment and Packaging
Scenarios for Using "WPF/E"
Conclusion

Introduction

"WPF/E" is the code name for a new cross-browser Web presentation technology that enables the delivery of rich, visually stunning, interactive Web experiences that can run everywhere. "WPF/E" is consistent with the architecture of the Web having a powerful declarative markup that can be manipulated with JavaScript. This white paper provides an architectural review of the "WPF/E" technology.

"WPF/E" 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, "WPF/E" 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 "WPF/E" 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 "WPF/E" are designed to be complementary technologies. In the broader sense, "WPF/E" 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 "WPF/E."

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

As Figure 2 shows, "WPF/E" 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.

"WPF/E" Architecture

"WPF/E" has few basic properties. It must:

  • Enhance various browsers on Windows and on the Macintosh.
  • Be able to render XAML.
  • Be able to render media (music and video).
  • Enable programming that is consistent with the Web programming model.
  • Be small.

"WPF/E" was designed to address these properties, as Figure 3 shows.

Figure 3. "WPF/E" architecture

  • Lightweight browser plug-in—"WPF/E" 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, "WPF/E" 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 "WPF/E" 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. "WPF/E" packaging (after December 2006 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 "WPF/E" can detect if the "WPF/E" plug-in is installed, and can direct users to download it and install it (either through a redirect or through an object tag). The "WPF/E" SDK has documentation on that.

Scenarios for Using "WPF/E"

"WPF/E" 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

"WPF/E" 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 "WPF/E" architecture and how it fits into the Microsoft offering for building next-generation Web applications. "WPF/E" 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.