Communauté .NET Montréal
  www.dotnetmontreal.com
          3 Octobre 2011
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
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
• SilverDiagram
• House Builder 3D
• Tou.TV
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é
• Angry Birds
• Never Mind The Bullets
• Double Rainbow
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
 Évolution de HTML et Silverlight
 Outils et langages
 Contrôles
 DataBinding
 Graphique, média, 3D et texte
 Intégration avec le système
 Performances
É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
É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
HTML 5, C’EST QUOI?
HTML 5, C’EST QUOI?

Performance   Sémantiques        Styles      Multimédia




 Effets 3D     Hors ligne &   Connectivité   Accès appareils
                stockage
STATUT DE HTML 5
STATUT DE HTML 5




                                                                    Candidat à la
Premier brouillon public   Brouillon de travail   Dernier appel                     Recommendation
                                                                  recommendation
NOUVELLES FONCTIONNALITÉS HTML5
 Video/audio
 Canvas/SVG
 Mode hors ligne
 CSS3 Media Queries
 WOFF
 Éléments sémantiques
 Web Sockets
 Web Workers
…
SUPPORT DE HTML5 ?
http://caniuse.com/
http://doesmybrowsersupportwebgl.com
http://www.modernizr.com/
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
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…
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, …)
http://silverlight.codeplex.com/
• Exemple Modernizr
• Exemple super site Web
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}"/>
•   Style Binding
•   Ancestor Binding
•   DataBinding Debugging
•   Implicit Data Template
HTML
 Pas de “data binding” directement dans HTML
 Utilisation du JavaScript
 jQuery, Backbones.js ou Knockout.js (utiliser nuget pour VS)
• http://knockoutjs.com/exampl
  es/twitter.html
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
• 3D
• Bouncing Plane (Animation,
  Perspective 3D, Video HD, Pixel
  Shader)
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)
• Destruction vidéo
• La fille SVG
• Google Body *
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
• System Font dialog (P/Invoke)
• USB drive
• Fenêtres natives
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)
                     …
• Foursquare Playground
• Local storage boring demo
• File API image *
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
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
• Row perf
• Vector Graphics
• Bitmap Graphics
RECOMMANDATIONS
LES BONNES ADRESSES
Silverlight
http://tinyurl.com/3mojwy2
http://riastats.com
HTML5
http://beautyoftheweb.com
http://html5labs.interoperabilitybridges.com/
http://diveintohtml5.org/
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
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 ; )

HTML5 & SilverLight 5

  • 1.
    Communauté .NET Montréal www.dotnetmontreal.com 3 Octobre 2011
  • 2.
    Frédéric HARPER Laurent DUVEAU RunAtServer [email protected] [email protected] http://blogs.msdn.com/b/cdndevsfr/ http://weblogs.asp.net/lduveau/ @fharper @LaurentDuveau
  • 4.
    SILVERLIGHT EN 10S Développerpour 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 • HouseBuilder 3D • Tou.TV
  • 6.
    HTML 5 EN10S  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 ATIME… 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 deHTML 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 HTML2.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.
  • 14.
    HTML 5, C’ESTQUOI? Performance Sémantiques Styles Multimédia Effets 3D Hors ligne & Connectivité Accès appareils stockage
  • 15.
  • 16.
    STATUT DE HTML5 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 UIdu contrôle (XAML) séparé de son comportement (C# ou VB) Excellent support dans Blend (Control Template, Visual State Manager, …)
  • 25.
  • 26.
    • Exemple Modernizr •Exemple super site Web
  • 28.
    SILVERLIGHT: BINDING ETXAML  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.
  • 33.
    SILVERLIGHT Vectoriel •Transformations etanimations 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 • BouncingPlane (Animation, Perspective 3D, Video HD, Pixel Shader)
  • 35.
    HTML Graphique •Canvas •SVG Médias •Video (MPEG-4/H.264, WebMVP8, 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 Fontdialog (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 VSHTML 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 VSHTML 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.
  • 46.
  • 47.
    POUR EN SAVOIRPLUS 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’AURAIENTBIEN SÛR PAS DE RAPPORT AVEC LE F U T U R D E S I LV E R L I G H T ; )