Une présentation que j'ai fait avec Laurent Duveau au groupe d'utilisateurs .NET de Montréal

1. Communauté .NET Montréal
www.dotnetmontreal.com
3 Octobre 2011

2. Frédéric HARPER Laurent DUVEAU
RunAtServer
fredh@microsoft.com laurent@runatserver.com
http://blogs.msdn.com/b/cdndevsfr/ http://weblogs.asp.net/lduveau/
@fharper @LaurentDuveau

4. SILVERLIGHT EN 10S
Développer pour le web en langage managed (.NET) sur
 Windows/Mac OS
 Tous les principaux navigateurs du marché
 Windows Phone
Nécessite un plugin
Taux de déploiement : 77%
Première version : 2007

5. • SilverDiagram
• House Builder 3D
• Tou.TV

6. HTML 5 EN 10S
 Disponible dans le core des principaux navigateurs
 Accessible sur tout appareil munis d’un navigateurs récent
 ordinateurs
 tablettes
 téléphones intelligents
 En « développement » depuis 2009
 En brouillon, mais déjà fort utilisé

7. • Angry Birds
• Never Mind The Bullets
• Double Rainbow

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

9. AGENDA
 Évolution de HTML et Silverlight
 Outils et langages
 Contrôles
 DataBinding
 Graphique, média, 3D et texte
 Intégration avec le système
 Performances

11. ÉVOLUTION DE SILVERLIGHT
Silverlight Silverlight Silverlight Silverlight Silverlight
1.0 2 3 4 5
XAML +
XAML + CLR XAML + CLR XAML + CLR XAML + CLR
JScript
Released in Released in Released in Released in
In RC
2007 2008 2009 2010
VS 2005 VS 2008 VS VS2010 VS2010
Support Required 2008/2010 Required Required

12. ÉVOLUTION DE HTML
HTML 2.0: 1995
HTML 3.2: 1997
HTML 4.0: 1997
HTML 5: Version finale estimée pour 2014
 Spécifications en progression
 Déjà un support partiel des principaux navigateurs

13. HTML 5, C’EST QUOI?

14. HTML 5, C’EST QUOI?
Performance Sémantiques Styles Multimédia
Effets 3D Hors ligne & Connectivité Accès appareils
stockage

15. STATUT DE HTML 5

16. STATUT DE HTML 5
Candidat à la
Premier brouillon public Brouillon de travail Dernier appel Recommendation
recommendation

17. NOUVELLES FONCTIONNALITÉS HTML5
 Video/audio
 Canvas/SVG
 Mode hors ligne
 CSS3 Media Queries
 WOFF
 Éléments sémantiques
 Web Sockets
 Web Workers
…

18. SUPPORT DE HTML5 ?
http://caniuse.com/
http://doesmybrowsersupportwebgl.com
http://www.modernizr.com/

21. OUTILS ET LANGAGES
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

23. SILVERLIGHT
S I LV E R L I G H T 5 HTML5
 Silverlight 5  HTML5
 HTML4
 ~38 contrôles  16 éléments
 Silverlight Toolkit  9 tag de structure
 13 nouveau type d’input
 ~40 contrôles  …
 Open source  Third Party
 PhoneGap, KendoUI…
 Codeplex, …  JavaScript
 Third party  jQuery, Modernizr, Knockoutjs, ..
 Telerik, DevExpress, …  CSS
 Less Framework,
52framework…

24. SILVERLIGHT TEMPLATED CONTROLS
UI du contrôle (XAML) séparé de son comportement (C# ou VB)
Excellent support dans Blend (Control Template, Visual State Manager, …)

25. http://silverlight.codeplex.com/

26. • Exemple Modernizr
• Exemple super site Web

28. SILVERLIGHT: BINDING ET XAML
 Modèle simple et puissant
 Binding bi-directionnel (TwoWay) avec support des notifications
(INotifyPropertyChanged)
 Formattage, converters, …
 DataTemplate
 Command
 Silverlight 5
 Binding au niveau de la propriété Setter des styles
 DataTemplate implicites
 DataBinding debugging!
 Ancestor Binding via RelativeSource
 Nouvel événement : DataContextChanged
 Support du mode PropertyChanged pour la mise à jour de la source:
<TextBlock Text="{Binding ElementName=lst, Path=SelectedItem.Text,
Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

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

30. HTML
 Pas de “data binding” directement dans HTML
 Utilisation du JavaScript
 jQuery, Backbones.js ou Knockout.js (utiliser nuget pour VS)

31. • http://knockoutjs.com/exampl
es/twitter.html

33. SILVERLIGHT
Vectoriel
•Transformations et animations
Deep Zoom
Pixel Shader
Audio
•WMA, MP3, AAC
Vidéo
•H.264, WMV, VC-1 (accélération matérielle)
•Trick-play
•Smooth Streaming
•DRM (on/offline)
•Support de la télécommande
3D API
Texte
•OpenType, Text Clarity, Pixel Snapping, Text Overflow

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

35. HTML
Graphique
•Canvas
•SVG
Médias
•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)

36. • Destruction vidéo
• La fille SVG
• Google Body *

38. SILVERLIGHT
Silverlight 3 Silverlight 4 Silverlight 5
• Isolated Storage • Webcam et Microphone • intéropérabilité via
• OpenFileDialog et • Out Of Browser Elevated P/Invoke
SaveFileDialog Trust (OOBE): interop • Fenêtres natives
• Out Of Browser (OOB) COM (Office, …), • Accès complet au
• Détection de Notifications système de fichiers en
connection • OOBE: Accès au mode Elevated Trust
• Full screen système de fichiers: • Possibilité d’être
répertoires My* Elevated Trust dans le
• Clipboard navigateur!
• Print API • Remote Control Support
• Drag and drop • Pinned full screen

39. • System Font dialog (P/Invoke)
• USB drive
• Fenêtres natives

40. HTML
Hors-ligne  HTML5 App Cache
stockage  Local Storage
 Indexed DB
 Spécifications File API
Accès appareils  API de géolocation
 Accès au microphone (en cours)
 Accès à la caméra (en cours)
 …

41. • Foursquare Playground
• Local storage boring demo
• File API image *

42. SILVERLIGHT 5 VS HTML 5
Silverlight 5 HTML 5
Data Binding Puissant! JavaScript & 3rd party
framework
Local Storage Isolated Storage Web Storage
Video H264, Smooth Streaming, MPEG-4/H.264,
DRM WebM/VP8,
OGG/Theora
Networking Sockets TCP WebSockets
Web requests WebClient, HttpWebRequest XMLHtpRequest
Web Services WCF, ASMX, RSS Need AJAX Framework
3D 3D API WebGL

43. SILVERLIGHT 5 VS HTML 5
Beaucoup de fonctionalités arrivent à parité (ou très bientôt)
=> Comparons les performances!
Benchmark:
 Row performance
 Vector manipulation
 Bitmap manipulation

44. • Row perf
• Vector Graphics
• Bitmap Graphics

45. RECOMMANDATIONS

46. LES BONNES ADRESSES
Silverlight
http://tinyurl.com/3mojwy2
http://riastats.com
HTML5
http://beautyoftheweb.com
http://html5labs.interoperabilitybridges.com/
http://diveintohtml5.org/

47. POUR EN SAVOIR PLUS ET APPROFONDIR
TechDays 2011
 A Lap around Microsoft Silverlight 5
 Application Development with HTML5
 HTML5 and CSS3 Techniques You Can Use Today
Et plus…
http://techdays.ca

48. QUESTIONS ?
QUI N’AURAIENT BIEN SÛR PAS DE RAPPORT AVEC LE
F U T U R D E S I LV E R L I G H T ; )