A real-world overview of Silverlight

Walter SmithJackson Fish Market

30 Jan 2008Web Directions North ’08

What to expect! Who is this guy?

! Silverlight: What, Why, How, and When

! Demos

! Pros, Cons, and Advice

...not a Silverlight tutorial

About the author

We make beautiful software for the weband o!er exclusive sponsorships to brand advertisers.

! Aesthetics are part of functionality

! Designers and developers work very closely

! We are technology-agnostic

Ta!ti

! Commissioned by Microsoft

! Exploration of di"erent client UI concepts for Live Search

! Built in Silverlight 1.0 (pre-release!) so we did not have the tools available now

Context:Silverlight & WPF

WPF(Windows Presentation Foundation)

! New framework for building UI of Windows applications

! Delivered with .NET Framework 3.0

! Part of a huge wave of new tools and technologies from Microsoft

WPF is cool—but not for this audience!

! Windows only

! Part of .NET 3.0 Framework — up to 50MB download, full installer wizard

! Not well-integrated with web technologies

Silverlight = stream-lined WPF for the web

! Windows, Mac, Linux

! Standalone, ~4MB, one-click installer

! Browser plugin (IE, FF, Safari), two-way integration with HTML/JS

! Still has plenty of WPF and .NET goodness

Object model

Brush

Line

Path

Image

Canvas

StoryboardAnimation

Media

Transform

Control

Runtime

!Rendering!Event handling!Animation!A/V media!Networking!CLR/.NetFx

subset in SL new for SL

Markup (XAML)

Essence of WPF/Silverlight

XAML! Simple XML serialization of objects

! Markup model = object model

! Plain text, easy to read and write

! Can generate/load at runtime

RoadmapSilverlight 1.0 (now)

! Visual hierarchy

! Input events

! Animation

! Image & A/V codecs

! Downloader

! Code in browser’s JavaScript engine

Silverlight 2.0 (" now, # soon)

! Controls

! Layout managers

! Data binding

! CLR (.NET runtime)

! .NET Framework subset

! DLR (dynamic languages)

! Code in C#, Ruby, Python

Media support! Codecs built-in—not dependent on WMP

! WMV, VC-1, WMA, MP3, streaming support (w/Windows Server)

! Expression Media Encoder: encodes, annotates, wraps in skinnable player

! Silverlight Streaming service: free CDN for Silverlight content

(Caveat: we have not used any of this yet)

Tools

Designer + Developer = UI

! Separation of visuals from behavior

! In HTML world:Structural markup + CSS + <script src=>

! In Silverlight world:XAML (w/Resources) + code-behind

! Designers and developers can work independently, together

Programming

Graphic Design

Interaction Design

.rb.cs

XAML

ExpressionBlend

ExpressionDesign

VisualStudio

TextEditor

.js

VC1MP3

PNG

DLLZIP

(names)

Code $ Names % XAML

Demos

For more info

silverlight.net

Thank you