An Introduction to Microsoft Silverlight

Glen GordonDeveloper Evangelist – Microsoft

Corporationhttp://www.glengordon.nameglen.gordon@microsoft.com

http://twitter.com/glengordon

Agenda• A brief history of time (I mean the Web)• What is this Silverlight thing?• Who’s using it?• How do you code it?• Designer/Developer interaction• Summary

Presentation Title | PP | DD Month YYYY

History of UX on the Web• Early 90’s – Blue & purple Links on a gray background

History of UX on the Web• Mid 90’s – DHTML introduced - <blink> tags and other

annoying JavaScript tricks

History of UX on the Web• Late 90’s/Early 00’s – Dynamic Server Driven Web

Apps

History of UX on the Web• 2002 – Mozilla implements XmlHttpRequest (5 years

AFTER Microsoft did in IE 5. )• 2005 – AJAX is the new ‘Hotness’!

Note: Ajax = DHTML revisited, just done cooler!

JavaScript? Really?!Which version?

Have you programmed in JavaScript lately?• You might recognize this:

if (Netscape) {//tell the user they’re a dinosaur! }

else if (Firefox) {//do something interactive }

else if (Safari) {//do something interactive slightly

differently } else if (IE) {

if (IE7) { //do it almost like FF } else if (IE6) { //do it in a crazy way you’ll

spend all night on Google trying to figure out how to. }

else if (IE5) { //just give up! } }

Have you programmed in JavaScript lately?

Wait… there’s more! else if (IE8) {

//Decide to act like FF & Safari or IE7 } else if (Chrome) {

//What?! Another browser to support! } else if (Mobile Device) {

//#$^&%^*&*$%%&*!!!!! }

Introducing Silverlight • Cross-Platform, Cross

Browser RIA• Mac, Windows, Linux*• Firefox, IE, Safari, Chrome

• Code + Markup• XAML + (CLR | DLR)

• Managed Silverlight: .NET• Cross-platform Version of .NET

Framework• No external dependencies

• Fully Supports VB and C# in the Browser

Rich Media Experiences• Quality• Streaming video quality up

to HD (1080p)• DVD-like interactivity and

overlays• Markers and Events• IIS 7 Smooth Streaming

• Flexible Development• Integrate existing AJAX

frameworks• SMPTE standard VC-1,

WMV and MP3• H.264, AAC

• Delivery• Live Streaming or On-

Demand

Timeline• Silverlight 1• Beta December 2006• RTM September 5, 2007

• Silverlight 2• Beta March 2008• RTM October 14th 2008

• Silverlight 3 • Beta March 2009• RTM – July 12th, 2009

• Silverlight 4• Beta November 2009• RTM - ???

Silverlight and the Web

HTML / JavaScript

HTML / .NET

XAML / JavaScript

XAML / .NET

Silverlight Market Penetration

http://riastats.com/

demos

Microsoft Silverlight

Silverlight "Transparency"No black box here!

• XAML is text-based & SEO friendly• XAP is a ZIP – Open up and “view source” if

you wish• XAML DOM and HTML DOM are first class

citizens• HTML Bridge lets C# code manipulate DOM• JavaScript code can manipulate XAML

Presentation Title | PP | DD Month YYYY

Designers Developers

Create Implement

XAML

Artistic Functional

JPGTIFFPSDGIF

HTML

ASPXASCXASMX

C#VB.NET

Traditional Web Development

Silverlight Development

Introducing XAML• Defines the User

Interface• Communication Between

Designers and Developers

• No Translation Required• Toolable, Readable

• Represents Code• eXtensible Application

Markup Language• Shared with WPF, WF• Represents .NET Objects• Based on XML

• True Separation of UI and Logic

Building your Silverlight UI• Controls• Events• Data Binding• Custom Control Model• Animations• Storyboards, not tweening

• Styling• Out of Browser• Toolkit & Community

Tools

Presentation Title | PP | DD Month YYYY

Silverlight Developer's Toolkit

Minimum

Any Text

Editor

Any Web

Server

Silverlight Developer's Toolkit

Minimum Any Text Editor

Any Web Server

Maximum Productivi

ty

Visual Studio 2008

Silverlight 3 Extensions for Visual

Studio

Expression Blend

Expression Blend - SketchFlow• Mock up your site• Establish navigation and general layout• “Wiggly” styles help clients understand sketch nature• Realistic looking sample data• Real events• Convert sketch app to real app with ease

Silverlight Developer's Toolkit

Minimum Any Text Editor

Any Web Server

Maximum Productivi

ty

Visual Studio 2008

Silverlight Extensions for Visual

Studio

Expression Blend

Maximum PHP Dev

Productivity

Visual Studio 2008

Silverlight Extensions for Visual

Studio

Expression Blend VS.PHP

Mac Tooling

Eclipse 4 Silverlight

Fusion or Parallels

Plus - All of the Above

demo

Silverlight Tools

Getting Silverlight Connected• Silverlight talks many formats• SOAP services• XML• RSS• AtomPub• REST• Sockets

• Built in networking stack• Not subject to limitations of browser stack• Full HTTP verb support• Independent security model• Full visibility of request/response headers, codes, etc

Deep Zoom• Implementation of the Seadragon technology• Allows users to pan around and zoom in a large, high

resolution image or a large collection of images. • Reduces the time required for initial load• Downloads only the region being viewed and/or only at the

resolution it is displayed at• As user pans or zooms, subsequent regions are downloaded• Animations hide any jerkiness in the transition• Supported in iPhone as Seadragon Mobile

• Use Deep Zoom Composer to build and publish

Smooth Streaming• HTTP-based adaptive streaming• Support in IIS 7 with Media Services extension• Expression Encoder multi-stream generation• Specs released under the Community Promise

Initiative• Support for iPhone

Conclusion - Silverlight• Great choice for RIA solutions• Powerful media platform• Comprehensive tooling• Designer/developer collaboration• Vibrant ecosystem• Continually evolving• Adoption is huge

Resources• MIX conference: http://live.visitmix.com • Community Site: http://silverlight.net • Main Product Site:

http://www.microsoft.com/silverlight • MSDN Center: http://msdn.microsoft.com/silverlight • Smooth Streaming: • Online SDK: http://

msdn2.microsoft.com/bb188266.aspx • Top Silverlight Blogs• Shawn Wildermuth: http://wildermuth.com • Tim Heuer: http://www.timheuer.com • Tim Sneath: http://blogs.msdn.com/tims • Mike Harsh: http://blogs.msdn.com/mharsh • Joe Stegman: http://blogs.msdn.com/jstegman • Laurence Moroney: http://blogs.msdn.com/webnext • Ernie Booth: http://blogs.msdn.com/ebooth

41