DevTeach Ottawa - Silverlight5 and HTML5

811 views
759 views

Published on

A shorter version of the presentation I did with Laurent at the .NET usergroup in Montreal

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
811
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

DevTeach Ottawa - Silverlight5 and HTML5

  1. 1. DevTeach Ottawawww.devteach.comNovember 3, 2011
  2. 2. Frédéric HARPER Laurent DUVEAU RunAtServerfredh@microsoft.com laurent@runatserver.comhttp://blogs.msdn.com/b/cdndevs/ http://weblogs.asp.net/lduveau/@fharper @LaurentDuveau
  3. 3. SILVERLIGHT IN 10SDevelop for the web with managed code (.NET) for: Windows/Mac OS All major browsers Windows PhoneBrowser pluginInstallation base : 77%First version : 2007
  4. 4. • SilverDiagram• House Builder 3D
  5. 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. 6. • Angry Birds• Never Mind The Bullets
  7. 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. 8. AGENDA Adoption Tools and languages Controls DataBinding Graphic, media, 3D and text System integration Performances
  9. 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
  10. 10. 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
  11. 11. 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…
  12. 12. SILVERLIGHT TEMPLATED CONTROLSControl UI (XAML) separated from its behavior (C# or VB)Excellent support in Blend (Control Template, Visual State Manager, …)
  13. 13. http://silverlight.codeplex.com/
  14. 14. • HTML5 elements• KendoUI
  15. 15. 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}"/>
  16. 16. • Style Binding• Ancestor Binding• DataBinding Debugging• Implicit Data Template
  17. 17. HTML Use JavaScript for DataBinding jQuery, Backbones.js or Knockout.js (use nuget in VS) facilitate it
  18. 18. • Data Attributes• KnockoutJs Twitter
  19. 19. SILVERLIGHTVector graphics•Transformations and animationsDeep ZoomPixel ShaderAudio•WMA, MP3, AACVideo•H.264, WMV, VC-1 (hardware acceleration )•Trick-play•Smooth Streaming•DRM (on/offline)•Remote control support3D APITexte•OpenType, Text Clarity, Pixel Snapping, Text Overflow
  20. 20. • 3D• Bouncing Plane (Animation, Perspective 3D, HD Video, Pixel Shader)
  21. 21. HTMLGraphics•Canvas•SVGMedias•Video (MPEG-4/H.264, WebM VP8, OGG Theora)•Audio (MP3, WAV PCM, OGG/Theora, ACC)3D•WebGLTexte•Web Open Font Format (aka WOFF)
  22. 22. • Destruction video• SVG girl• Google Body *
  23. 23. 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
  24. 24. • System Font dialog (P/Invoke)• USB drive• Native Windows
  25. 25. HTMLOffline & storage  HTML5 App Cache  Local Storage  Indexed DB  File API specificationDevice Access  Geolocalisaton API  Microphone access (in progress)  Camera access (in progress)  …
  26. 26. • Foursquare Playground• Local storage demo• File API image *
  27. 27. SILVERLIGHT 5 & HTML 5Lots of features are coming to parity (or very soon)=> Let’s compare the performance!Benchmark: Row performance Vector manipulation Bitmap manipulation
  28. 28. • Row perf• Vector Graphics• Bitmap Graphics
  29. 29. SO, WHAT TO CHOOSE?
  30. 30. LINKSSilverlighthttp://tinyurl.com/3mojwy2http://riastats.comHTML5http://beautyoftheweb.comhttp://html5labs.interoperabilitybridges.com/http://diveintohtml5.org/http://html5gallery.com/
  31. 31. QUESTIONS ?

×