Architecting Web Applications with Microsoft Silverlight and Expression

Zhiming Xue “Z”Architect Evangelist

zxue@microsoft.comblogs.msdn.com/zxue

Agenda• What is Microsoft Silverlight

• Architecture and components

• OS and Browser Compatibility

• v1.0 and v1.1

• Silverlight Tools

• Demos

• Architectural issues related to Silverlight

• Silverlight Deployment

• Silverlight Roadmap and Resources

What is Silverlight?

• Cross platform (Windows/Mac), cross browser( IE/FireFox/Safari) plug-in used to develop Rich Internet Applications (RIAs)• Codename „WPF/E‟ , Windows Presentation Foundation / Everywhere

• Support for browsers on Linux will be provided by Novell through “Moonlight”

• Silverlight offers a flexible programming model • supports AJAX, VB, C#, Python, and Ruby, and integrates with existing Web

applications.

• Development Tools: • Expression Studio and/or Visual Studio

• V1.0 (Just Released)• Browser Plug-In with APIs to render XAML which is then scriptable via JavaScript

• V1.1 Alpha September Refresh• Browser Plug-In with APIs to render XAML and execute .Net code

XAMLJavaScript

XAML

C#

What is Silverlight?• Silverlight is oriented toward the seamless deployment of

applications across the Web, the enterprise server, the PC and mobile devices

• Ray Ozzie, Microsoft's chief software architect

• Rich Interactive Applications

• applications that combine the light touch and ubiquity of a web application with the interactivity and functionality of a desktop application and offer a consistent and effective user experience, both online and offline across a variety of devices and networks.

• By a U.K. based analyst firm

• Three core audiences

• content providers that want to distribute video and rich media over the Web;

• designers and developers that are building rich interactive applications; and

• end users that want the best possible experience when viewing Web-based media.

Light up the Web

Platform Characteristics

• Small and factored• Silverlight 1.0 RC is 1.4MB (compressed)

for personal computers and

4.8MB (compressed) universal binary

for Mac (PowerPC and Intel).

• Sandboxed Application Model

• Cross-platform, cross-browser• support all major browsers on

both Mac OS X and on Windows (Firefox, Safari, and Internet Explorer)

Components

• Audio and Video (WMV, WMA, MP3) and Imaging (PNG, JPG)

• WMV v7, v8, v9, VC-1 (SMPTE std)

• Vector graphics, text and animations

• Basic elements that allow for the construction of higher level components

• Canvas, shapes, input and eventing

• JavaScript programming model

Silverlight v1.0

Silverlight v1.0

Servicing Component

Runtime

Presentation Core

Media (video, audio)

XAML

Java Script DOM API

Browser

Hosting

Silverlight v1.1 AlphaSilverlight 1.1

.NET Framework

Execution Engine

HTML BridgeWPF Subset

XMLDynamic

Language

Runtime

App Model & Services

Friction-free Installer & Updater

Runtime

Presentation Core

Media (video, audio)

XAML

Java Script DOM API

Framework Libraries

Browser

Hosting

BCL

NET

LINQ

Platform Characteristics

• Small and factored• 4.49 MB (exe file on Windows)

• Sandboxed Application Model

• Cross-platform, cross-browser• support all major browsers on

both Mac OS X and on Windows (Firefox, Safari, and Internet Explorer)

Components

• Friction-free installer

• Native presentation runtime

• Factored CLR and .NET Framework

• Dynamic Language Runtime

• IronPython, IronRuby, Managed JavaScript, Managed VB

Compatible Operating Systems and Browsers

Operating System IE 7 IE 6 Firefox 1.5 Firefox 2 Safari

Windows Vista Yes - Yes Yes -

Windows XP Yes Yes Yes Yes -

Windows 2000 - Soon** Soon** Soon** -

Windows Server 2003

(excluding IA-64)Yes Yes Yes Yes -

Mac OS 10.4.8+ (PowerPC) - - Yes* Yes* Yes*

Mac OS 10.4.8+ (Intel-based) - - Yes Yes Yes

* Silverlight 1.0 Only ; ** Silverlight 1.1 Only

Silverlight Tools• Visual Studio .NET

• 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.

• Use Microsoft Visual Studio 2005 to build their Silverlight application.

• Microsoft Visual Studio 2008 Beta 2 is the next generation development tool for Windows Vista, the 2007 Office system, and the Web.

• Building the latest AJAX enabled Web site and developing Silverlight applications

• Expression Studio• Expression Blend 2 August Preview: enable designers to create compelling user

experiences for Silverlight.

• Expression Design: create rich visual elements for Silverlight applications.

• Expression Media Encoder Preview Update: enables rapid import, compression and Web publishing of digital video imported from a variety of popular formats, including AVI and QuickTime, into WMV.

• Expression Media Encoder is a template-driven system that integrates seamlessly into existing Web publishing workflows for both live and on-demand content delivery.

Silverlight Object Model

Demo

Silverlight 1.0 and 1.1 applications

Silverlight Debugging• Use debugger for javascript

• enable script debugging in the browser

• Set breaking points for .net code

How is Silverlight Deployed?

• Cross platform (Windows, Mac, cross browser)

• 15 second on-demand install within a browser

• Small 1.4 to 5MB core runtime download

• Side by side and non-impactful (no reboot)

• Default upgrade model keeps machines always current with new releases

Architectural Issues Related to Silverlight• Silverlight Streaming

• Silverlight and ASP.NET AJAX

• Silverlight vs. Flash

• Smart clients and RIAs

• Localization Support

• Online and Offline

Silverlight Streaming

Silverlight and ASP.NET AJAX• Silverlight integrates with existing Web applications, including ASP.NET

AJAX applications. Consequently, ASP.NET AJAX and Silverlight are designed to be complementary technologies. • In the broader sense, Silverlight can talk to any AJAX application, both client-side

and server-side. ASP.NET AJAX can additionally be used to control Silverlight-based visualization of data or delivery of rich experiences. Examples might include mapping applications or video playback with rich presentation.

• ASP.NET AJAX and Silverlight at final release will also benefit its status as a fully supported technology from Microsoft with the benefits of technical support around the clock and the breadth support of the Microsoft development community. AJAX is a fundamental technology supported in Silverlight and now, in ASP.NET.

• Customers can enhance existing ASP.NET or ASP.NET AJAX applications by using Silverlight's media experiences and RIAs.

• The Microsoft ASP.NET Futures July 2007 release contains an early developer preview of features providing a wide range of new functionality for both ASP.NET and Silverlight. • The Futures release includes early experimental versions of features currently

under consideration for future versions of ASP.NET and the .NET Framework.

Silverlight vs. Flash

Smart clients vs. RIAs

Smart clients are easily deployed and managed client applications that provide an adaptive and interactive experience by leveraging

local resources and intelligently connecting to distributed data sources.

Web Services &

Offline/Online

support

Device

Adaptability

Tough to

Deploy

Heavy

Footprint

DLL Hell

Network

Dependency

Poor User

Experience

Rich UI

Complex

To Develop

Rich User

Experience

Developer

Productivity

Responsive

Broad

Reach

Easy Change

Management

Ease of

Deployment

Rich Interactive Applications are applications that combine the light touch and ubiquity of a web application with the interactivity

and functionality of a desktop app and offer a consistent and effective user experience, both online and offline across a variety of devices and networks.

Web Services &

Offline/Online

support

Device

Adaptability

Rich User

Experience

Developer

Productivity

Responsive

Broad

Reach

Easy Change

Management

Ease of

Deployment

Rich

Interactive

Applications

Localization Support• Silverlight installs on localized versions of Macintosh computers and

Windows. It can support the development of video and rich Web experiences for a worldwide audience.

• In the initial release, the installation and control runtime are available in English. • Developers may provide an in-page "Get Microsoft Silverlight" experience for their customers in

English, French, German, Spanish, Italian, Chinese Simplified, Chinese Traditional, Korean, Japanese, Russian and Brazilian Portuguese. Support for additional languages is planned to follow.

• In the initial release, there is support of East Asian languages via static text (Glyph element). • Dynamic text (TextBlock element) does not fully support East Asian languages at this time.

Developers may utilize the rendering of the browser (DHTML) or text-graphics as alternative approaches.

• In the initial release, Silverlight does not support the bi-directionality, shaping or justification support required by complex script languages. • A developer, however, may utilize the rendering of the browser (DHTML) or text-graphics as

alternative approaches.

Online vs. Offline• Silverlight, Windows Forms, WPF

• Adobe AIR

• JavaFX

• Google Gears

Silverlight Roadmap

• Expression Studio

• Expression Blend 2 August Preview

• Expression Media Encoder

Today Beyond…

• Silverlight 1.0

• Silverlight 1.1 Alpha Refresh

• Silverlight Tool Alpha for

• Visual Studio „Orcas‟ Beta 2

• Expression Studio 2

• Silverlight 1.1

• Silverlight Tools for

Visual Studio „Orcas‟

Upcoming Events• Boston ReMIX07

• Architect Roundtable

• Microsoft Mobility Platform Overview

• Microsoft Mobility Infrastructure Architecture

• Best Practices in Application Infrastructure Design and Management

Check my blog at blogs.msdn.com/zxue

Resources• Silverlight Community and Support

• http://www.silverlight.net

• http://msdn2.microsoft.com/en-us/asp.net/bb187454.aspx

• Silverlight Developer Center

• http://msdn2.microsoft.com/en-us/asp.net/bb187358.aspx

• Silverlight Streaming Service

• https://silverlight.live.com/?wa=wsignin1.0

• Getting Started with Silverlight (whitepaper)

• http://msdn2.microsoft.com/en-us/library//bb404300.aspx

• Expression Product Page

• http://www.microsoft.com/expression/

• SWF2XAML Converter

• http://www.mikeswanson.com/swf2xaml/

• Blogs

• http://geekswithblogs.net/WynApseTechnicalMusings/Default.aspx

• http://blogs.msdn.com/mharsh

• http://blogs.msdn.com/jstegman

• Gallery

• http://silverlight.net/community/communitygallery.aspx

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.