This document summarizes a presentation given by Frédéric HARPER and Laurent DUVEAU comparing the web development technologies Silverlight and HTML5. Some key points: - Silverlight is a plugin that allows developing rich desktop-style applications for web browsers, while HTML5 can be used on any device with recent browsers without plugins. - Both support development with Visual Studio and provide controls and capabilities for graphics, media, 3D, and data binding, though Silverlight controls and capabilities are more extensive currently. - Performance benchmarks comparing row processing, vector graphics, and bitmap manipulation between the two technologies were demonstrated. - The presenters concluded there is no clear winner currently as both technologies continue advancing

1. DevTeach Ottawa
www.devteach.com
November 3, 2011

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

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

4. • SilverDiagram
• House Builder 3D

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

6. • Angry Birds
• Never Mind The Bullets

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

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

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

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

14. 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…

15. SILVERLIGHT TEMPLATED CONTROLS
Control UI (XAML) separated from its behavior (C# or VB)
Excellent support in Blend (Control Template, Visual State Manager, …)

16. http://silverlight.codeplex.com/

17. • HTML5 elements
• KendoUI

19. 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}"/>

20. • Style Binding
• Ancestor Binding
• DataBinding Debugging
• Implicit Data Template

21. HTML
 Use JavaScript for DataBinding
 jQuery, Backbones.js or Knockout.js (use nuget in VS) facilitate it

22. • Data Attributes
• KnockoutJs Twitter

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

25. • 3D
• Bouncing Plane (Animation,
Perspective 3D, HD Video, Pixel
Shader)

26. 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)

27. • Destruction video
• SVG girl
• Google Body *

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

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

31. 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)
 …

32. • Foursquare Playground
• Local storage demo
• File API image *

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

35. • Row perf
• Vector Graphics
• Bitmap Graphics

36. SO, WHAT TO CHOOSE?

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

38. QUESTIONS ?