DevTeach Ottawa - Silverlight5 and HTML5
1 like483 views
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
DevTeach Ottawa - Silverlight5 and HTML5
- 2. Frédéric HARPER Laurent DUVEAU RunAtServer [email protected] [email protected] 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, …)
- 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?
- 38. QUESTIONS ?