DevTeach Ottawa

www.devteach.com

November 3, 2011

Frédéric HARPER

fredh@microsoft.com

http://blogs.msdn.com/b/cdndevs/

@fharper

Laurent DUVEAU

RunAtServer

laurent@runatserver.com

http://weblogs.asp.net/lduveau/

@LaurentDuveau

SILVERLIGHT IN 10S

Develop for the web with managed code (.NET) for:

Windows/Mac OS

All major browsers

Windows Phone

Browser plugin

Installation base : 77%

First version : 2007

• SilverDiagram

• House Builder 3D

HTML 5 IN 10S

Available in the core of major browsers

Access on all devices with a recent browser

Computers

Tablets/slates

Smartphones

In "development" since 2009

Still draft, but already widely used

• Angry Birds

• Never Mind The Bullets

ONCE UPON A TIME…

Silverlight is a cross-browser,

cross-platform web client

runtime for building rich

interactive applications on

the web

Life is good…

Hello!

AGENDA

Adoption

Tools and languages

Controls

DataBinding

Graphic, media, 3D and text

System integration

Performances

ADOPTION

S I L V E R L I G H T

Browser Plugin to install

once

PC, MAC, Linux

Windows Update

optional

Major websites help:

Olympics, NCAA, …

77% of browsers

H T M L 5

Already include in the last

version of all major

browsers

PC, MAC, Linux

Adoption strategies

Lowest Common

Denominator

Polyfill Enriched

Alternate Experiences

TOOLS AND LANGUAGES

S I L V E R L I G H T 5

VS 2010 SP1

Blend 5

Sketchflow

XAML

C# ou VB

H T M L 5

VS 2010 + Web upd.

VS 2011 & Blend 5

WebMatrix

Notepad…

HTML / CSS

JavaScript

CONTROLS

S I L V E R L I G H T 5

Silverlight 5

~38 controls

Silverlight Toolkit

~40 controls

Open source

Codeplex, …

Third party

Telerik, DevExpress, …

H T M L 5

HTML5

16 elements

9 structure tag

13 new input type

Third Party

PhoneGap, KendoUI…

JavaScript

jQuery, Modernizr, Knockoutjs, ..

CSS

Less Framework, 52framework…

SILVERLIGHT TEMPLATED CONTROLS

Control UI (XAML) separated from its behavior (C# or VB)

Excellent support in Blend (Control Template, Visual State Manager, …)

http://silverlight.codeplex.com/

• HTML5 elements

• KendoUI

SILVERLIGHT: BINDING AND XAML

Simple but powerful model

TwoWay Binding with notifications support (INotifyPropertyChanged)

Formatting, converters, …

DataTemplate

Command

Silverlight 5

Binding in styles (Setter)

Implicit DataTemplate

DataBinding debugging!

Ancestor Binding via RelativeSource

New event : DataContextChanged

PropertyChanged mode supported to update source:

<TextBlock Text="{Binding ElementName=lst, Path=SelectedItem.Text,

Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

• Style Binding

• Ancestor Binding

• DataBinding Debugging

• Implicit Data Template

HTML

Use JavaScript for DataBinding

jQuery, Backbones.js or Knockout.js (use nuget in VS) facilitate it

• Data Attributes

• KnockoutJs Twitter

SILVERLIGHT

Vector graphics

•Transformations and animations

Deep Zoom

Pixel Shader

Audio

•WMA, MP3, AAC

Video

•H.264, WMV, VC-1 (hardware acceleration )

•Trick-play

•Smooth Streaming

•DRM (on/offline)

•Remote control support

3D API

Texte

•OpenType, Text Clarity, Pixel Snapping, Text Overflow

• 3D

• Bouncing Plane (Animation,

Perspective 3D, HD Video, Pixel

Shader)

HTML

Graphics

•Canvas

•SVG

Medias

•Video (MPEG-4/H.264, WebM VP8, OGG Theora)

•Audio (MP3, WAV PCM, OGG/Theora, ACC)

3D

•WebGL

Texte

•Web Open Font Format (aka WOFF)

• Destruction video

• SVG girl

• Google Body *

SILVERLIGHT

Silverlight 3

• Isolated Storage

•OpenFileDialog and SaveFileDialog

•Out Of Browser (OOB)

•Connection detection

•Full screen

Silverlight 4

•Webcam and Microphone

•Out Of Browser Elevated Trust (OOBE): interop COM (Office, …), Notifications

•OOBE: file system access: My* folders

•Clipboard

•Print API

•Drag and drop

Silverlight 5

• interoperability via P/Invoke

•Natives windows

•Full file system access in Elevated Trust mode

•Elevated Trust in browser!

•Remote Control Support

•Pinned full screen

• System Font dialog (P/Invoke)

• USB drive

• Native Windows

HTML

Device Access

Offline & storage HTML5 App Cache

Local Storage

Indexed DB

File API specification

Geolocalisaton API

Microphone access (in progress)

Camera access (in progress)

…

• Foursquare Playground

• Local storage demo

• File API image *

SILVERLIGHT 5 & HTML 5

Lots of features are coming to parity (or very soon)

=> Let’s compare the performance!

Benchmark:

Row performance

Vector manipulation

Bitmap manipulation

• Row perf

• Vector Graphics

• Bitmap Graphics

SO, WHAT TO CHOOSE?

LINKS

Silverlight

http://tinyurl.com/3mojwy2

http://riastats.com

HTML5

http://beautyoftheweb.com

http://html5labs.interoperabilitybridges.com/

http://diveintohtml5.org/

http://html5gallery.com/

QUESTIONS ?