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

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:

•   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 ; )