DevTeach Ottawa - Silverlight5 and HTML5

DevTeach Ottawa
www.devteach.com
November 3, 2011

Frédéric HARPER Laurent DUVEAU
RunAtServer
fredh@microsoft.com laurent@runatserver.com
http://blogs.msdn.com/b/cdndevs/ http://weblogs.asp.net/lduveau/
@fharper @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…
Hello!

Silverlight is a cross-browser,
cross-platform web client
runtime for building rich
interactive applications on
the web

Life is good…

AGENDA
 Adoption
 Tools and languages
 Controls
 DataBinding
 Graphic, media, 3D and text
 System integration
 Performances

ADOPTION

S I LV E R L I G H T HTML 5

 Browser Plugin to install  Already include in the last
once version of all major
 PC, MAC, Linux browsers
 PC, MAC, Linux
 Windows Update
 Adoption strategies
optional
 Lowest Common
 Major websites help: Denominator
 Olympics, NCAA, …  Polyfill Enriched
 77% of browsers  Alternate Experiences

DevTeach Ottawa - Silverlight5 and HTML5

TOOLS AND LANGUAGES

S I LV E R L I G H T 5 HTML 5

VS 2010 SP1 VS 2010 + Web upd.
Blend 5 VS 2011 & Blend 5
Sketchflow WebMatrix
Notepad…
XAML
C# ou VB HTML / CSS
JavaScript

CONTROLS

S I LV E R L I G H T 5 HTML5

 Silverlight 5  HTML5
 ~38 controls  16 elements
 Silverlight Toolkit  9 structure tag
 ~40 controls  13 new input type
 Open source  Third Party
 Codeplex, …  PhoneGap, KendoUI…
 Third party  JavaScript
 Telerik, DevExpress, …  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 Silverlight 4 Silverlight 5

•Isolated Storage •Webcam and •interoperability via
•OpenFileDialog and Microphone P/Invoke
SaveFileDialog •Out Of Browser •Natives windows
•Out Of Browser (OOB) Elevated Trust (OOBE): •Full file system access
•Connection detection interop COM (Office, in Elevated Trust mode
…), Notifications •Elevated Trust in
•Full screen
•OOBE: file system browser!
access: My* folders •Remote Control
•Clipboard Support
•Print API •Pinned full screen
•Drag and drop

• System Font dialog (P/Invoke)
• USB drive
• Native Windows

HTML
Offline & storage  HTML5 App Cache
 Local Storage
 Indexed DB
 File API specification

Device Access  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

LINKS
Silverlight
http://tinyurl.com/3mojwy2
http://riastats.com
HTML5
http://beautyoftheweb.com
http://html5labs.interoperabilitybridges.com/
http://diveintohtml5.org/
http://html5gallery.com/

DevTeach Ottawa - Silverlight5 and HTML5

Recommended

More Related Content

What's hot (18)

Viewers also liked (7)

Similar to DevTeach Ottawa - Silverlight5 and HTML5 (20)

More from Frédéric Harper (20)

Recently uploaded (20)

DevTeach Ottawa - Silverlight5 and HTML5