SlideShare a Scribd company logo

DevTeach Ottawa - Silverlight5 and HTML5

•
•
Frédéric Harper
Frédéric Harper

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 of 38
Download to read offline
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
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
DevTeach Ottawa - Silverlight5 and HTML5
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
DevTeach Ottawa - Silverlight5 and HTML5
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
DevTeach Ottawa - Silverlight5 and HTML5
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 *
DevTeach Ottawa - Silverlight5 and HTML5
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 *
DevTeach Ottawa - Silverlight5 and HTML5
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 ?

More Related Content

DevTeach Ottawa - Silverlight5 and HTML5

  • 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
  • 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, …)
  • 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?