Upload
frederic-harper
View
1.582
Download
1
Embed Size (px)
DESCRIPTION
Une présentation que j'ai fait avec Laurent Duveau au groupe d'utilisateurs .NET de Montréal
Citation preview
Communauté .NET Montréal
www.dotnetmontreal.com
3 Octobre 2011
Frédéric HARPER
http://blogs.msdn.com/b/cdndevsfr/
@fharper
Laurent DUVEAU
RunAtServer
http://weblogs.asp.net/lduveau/
@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…
Silverlight is a cross-browser,
cross-platform web client
runtime for building rich
interactive applications on
the web
Life is good…
Hello!
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 1.0
XAML + JScript
Released in 2007
VS 2005 Support
Silverlight 2
XAML + CLR
Released in 2008
VS 2008 Required
Silverlight 3
XAML + CLR
Released in 2009
VS 2008/2010
Silverlight 4
XAML + CLR
Released in 2010
VS2010 Required
Silverlight 5
XAML + CLR
In RC
VS2010 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?
Effets 3D
Performance Sémantiques
Hors ligne &
stockage
Styles
Connectivité
Multimédia
Accès appareils
STATUT DE HTML 5
STATUT DE HTML 5
Premier brouillon public Brouillon de travail Dernier appel Candidat à la
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 L V E R L I G H T 5
VS 2010 SP1
Blend 5
Sketchflow
XAML
C# ou VB
H T M L 5
VS 2010 + Web upd.
VS 2011 & Blend 5
WebMatrix
Notepad…
HTML
JavaScript
CSS
SILVERLIGHT
S I L V E R L I G H T 5
Silverlight 5
~38 contrôles
Silverlight Toolkit
~40 contrôles
Open source
Codeplex, …
Third party
Telerik, DevExpress, …
H T M L 5
HTML5 HTML4
16 éléments
9 tag de structure
13 nouveau type d’input
…
Third Party PhoneGap, KendoUI…
JavaScript jQuery, Modernizr, Knockoutjs, ..
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
• Isolated Storage
• OpenFileDialog et SaveFileDialog
• Out Of Browser (OOB)
• Détection de connection
• Full screen
Silverlight 4
• Webcam et Microphone
• Out Of Browser Elevated Trust (OOBE): interop COM (Office, …), Notifications
• OOBE: Accès au système de fichiers: répertoires My*
• Clipboard
• Print API
• Drag and drop
Silverlight 5
• intéropérabilité via P/Invoke
• Fenêtres natives
• Accès complet au système de fichiers en mode Elevated Trust
• Possibilité d’être Elevated Trust dans le navigateur!
• Remote Control Support
• Pinned full screen
• System Font dialog (P/Invoke)
• USB drive
• Fenêtres natives
HTML
Accès appareils
Hors-ligne
stockage
HTML5 App Cache
Local Storage
Indexed DB
Spécifications File API
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,
DRM
MPEG-4/H.264,
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 ? Q U I N ’ A U R A I E N T B I E N S Û R P A S D E R A P P O R T A V E C L E
F U T U R D E S I L V E R L I G H T ; )