HTML5 & SilverLight 5

Communauté .NET Montréal

www.dotnetmontreal.com

3 Octobre 2011

Frédéric HARPER

[email protected]

http://blogs.msdn.com/b/cdndevsfr/

@fharper

Laurent DUVEAU

RunAtServer

[email protected]

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