palais des congrès Paris

7, 8 et 9 février 2012

Arnaux AUROUXConsultantInfinite Square

MVVM de A à Z

Thomas LEBRUNConsultantInfinite SquareMVP Client App Dev

08/02/2012

Société de conseil, expertise, réalisation, et formation,exclusivement sur les technologies Microsoftde développement d’applications et de la plateforme applicative

25+ collaborateurs spécialisés sur les techno MS,dont 10 MVP…

GOLD Certified Partnersur 4 domaines de compétences

Agréé CIR

Centre de formationagréé

INFINITE SQUARE en quelques mots…

Les enjeux du développeur

Les modèles MVC et MVP

Le XAML

Pourquoi utiliser le pattern MVVM ?

Anatomie du pattern

Les différentes philosophies

Tests unitaires

Pour aller plus loin…

Agenda

Couplage

Les enjeux du développeurs

UI Class 1

UI Class 3

Business Class 1 Business

Class 2

Business Class 3

Data Class 2

Data Class 3

Data Class 1UI Class 2

Les enjeux du développeur

Les conséquences

Applications monolithiques

Difficilement maintenable

Difficile à faire évoluer

Non réutilisable

Difficilement testable

Régressions

Comment régler les problèmes de couple ?

Devenez célibataire!

Séparation des responsabilités (principe SRP)

Maintenabilité

Evolutivité

Testabilité

Les enjeux du développeur

Les modèles existant

MVC, MVPModel : la donnéeView : l’écranController, Presenter : l’intéraction entre l’écran et la donnée

Utilisation sur des projets .Net, Java, etc.

Les modèles MVC et MVP

Les modèles existant

Les modèles MVC et MVP

ViewPresente

r

Model

Controller

View

Model

Model View Presenter

Model View Controller

Le XAML

XAML

Windows 8

<Grid Margin="20">     <Grid.RowDefinitions>         <RowDefinition Height="Auto" />         <RowDefinition />         <RowDefinition Height="Auto" />     </Grid.RowDefinitions>     <TextBlock Text="Liste de produits"                 Grid.Row="0"/>     <ListBox Grid.Row="1>         <ListBoxItem Content="Produit 1"/>         <ListBoxItem Content="Produit 2"/>         <ListBoxItem Content="Produit 3"/>     </ListBox>     <Button Content="Ajouter produit"              Grid.Row="2" /></Grid>

PrésentationLangage de description d’interfaces graphiques

Format XML

Facile à maintenir et à réutiliser

Interprétable par différents outils

Visual studioExpression BlendInternet explorer…

Le XAML

Le XAML

<Button Width="100“ Height="30"  Click="OnClick" Background="LightBlue"> OK</Button>

private void OnClick(object sender, RoutedEventArgs e){ MessageBox.Show("Clic !");}

Page.xaml

Page.xaml.cs

Décl

ara

tif

Imp

éra

tif

Le XAML

C++C#

VB.NET

PaperJPG / TIFF

PSDPPT

MOV / WMV XAML

Le XAML

DataBinding : Connexion entre l’UI et les données

Définition de la source du Binding via la propriété DataContext

Définit par la classe FrameworkElementHéritage du DataContext

Propriété « Text »

Propriété « Nom »

Cible du binding

Source du bindingTextBlock Objet de données

« Produit »

Binding

Pour les mêmes raisons que MVC et MVP Model : Les données View : L’UI ViewModel : Le pivot entre les données et l’UI

Pour tirer pleinement profit des nouveaux concepts apportés par le XAML

MVVM ? Une version de MVC, MVP adaptée au XAML

Pourquoi utiliser le pattern MVVM ?

Démo: Ce qu’il ne faut pas faire !

Pourquoi utiliser le pattern MVVM ?

Anatomie du pattern

VIEW

Contrôles UI

Mise en page

Evènements

Animations

Transitions

VIEWMODEL

Actions

Etats

Exposition des

données

Logique

fonctionnelle

MODEL

Objets métier

Règles métier

Accès aux données

ValidationBinding

Model Données

Objets métier (Client, Produit, etc.) Transverse par rapport aux domaines

fonctionnels

Services Fournissent les requêtes de données Règles métier pour la mise à jour,

suppression, etc.

Anatomie du pattern

Model

Anatomie du pattern

SERVICE

GetProduitsByPeriod(be

gin, end)

GetProduitByName(nam

e)

…

DAL

LinqToXML

EntityFrame

work

…

<<Produit

>>

VIEWMODEL

ModelRépercussion des modifications sur l’UI

interface INotifyPropertyChangedEvènement PropertyChanged

ValidationExceptioninterface IDataErrorInfo

Peut être décliné en 2 versionsVersion globaleVersion cliente

Anatomie du pattern

Démo: Implémentation du Model

ViewModelFait le lien entre les données à traiter et l’interface utilisateur

Exposition de propriétés pour afficher/récupérer des valeursUtilisation de commandes pour interagir avec l’utilisateur

Définit l’intelligence applicative entre la donnée et sa représentation

Implémente également INotifyPropertyChanged

Elément entièrement indépendant de l’UITestabilitéRéutilisabilité avec d’autres vues

Anatomie du pattern

ViewModelLes commandes

Gestion découplée de l’interaction utilisateurInterface ICommandMéthodes Execute & CanExecuteImplémentée en standard par certains contrôles

ButtonCheckBox…

Anatomie du pattern

Démo: Implémentation du ViewModel

ViewTypiquement un écran de l’applicationEn charge de la mise en page des données pour les présenter à l’utilisateurCouple .xaml / .xaml.csNe contient aucune logique/dépendance métierOn peut par contre y mettre du code relatif à l’UI (n’hésitez pas !)

Anatomie du pattern

ViewDataTemplate

Représentation visuelle d’un objet (arbre XAML)Resource donc réutilisableContextualisation de la donnée

Anatomie du pattern

ProduitNom : Produit 1Prix : 20Disponibilité : 08/02/2012

ViewDesign Time

Utilisation d’un ViewModel factice pour le design de la ViewRéaction de la vue aux donnéesMeilleure efficacité dans la collaboration designer/developpeurOutils de design time fournit par Expression Blend

Anatomie du pattern

Démo: Implémentation de la View

Approche « View First »La View est l’élément directeur, elle instancie le ViewModelAvantages

Simplicité d’implémentationDesign

Inconvénients1 seul ViewModel possible par vue

Les différentes philosophies

Approche « ViewModel First »Le ViewModel est l’élément directeur, il instancie la View.Utilisation des DataTemplates implicites.Avantages

Souplesse pour le développement métierInconvénients

Support du DataTemplate implicite« Blendabilité » réduite

Les différentes philosophies

Démo: ViewModel First

Approche « Model First »Le Model est l’élément directeur, approche Data centriqueExemple : Microsoft LightSwitchAvantages

Réalisations rapides: les écrans sont générés depuis les donnéesUtilisation des assistants (drag&drop depuis Visual Studio)

InconvénientsSupport du DataTemplate implicitePossibilité d’un temps de chargement plus long

Vue complexe = potentielles lenteurs

Les différentes philosophies

Démo: Model First

Quelle philosophie adopter ?

Importance du design VS Complexité fonctionnelle

Mais surtout… n’ayez pas peur de varier les plaisirs !

Les approches ViewFirst et ViewModelFirst peuvent coexister.

Les différentes philosophies

ViewFirst

ViewModelFirst

Assurer la qualité de l’applicationValider unitairement une fonctionnalitéAutomatisation

Testabilité de la couche ViewModelEtatsOpérations

Testabilité de la couche ModelRègles métier

Les tests unitaires

Démo: Ecriture de tests

Frameworks MVVMMVVM Light Toolkit( Prism )Cinch…Liste descriptive : http://www.japf.fr/silverlight/mvvm/

Pour aller plus loin…

MVVM: De la découverte à la maîtrise

http://www.digitbooks.fr/catalogue/mvvm-antoine-lebrun.html

Pour aller plus loin…

Maintenabilité et pérennité de l’application

Simple à implémenter, MVVM est votre ami

C’est un modèle de développement, une

ligne directrice :

Adaptez le à vos besoins !

Conclusion

Questions ?

Chaque semaine, les DevCampsALM, Azure, Windows Phone, HTML5, OpenDatahttp://msdn.microsoft.com/fr-fr/devcamp

Téléchargement, ressources et toolkits : RdV sur MSDNhttp://msdn.microsoft.com/fr-fr/

Les offres à connaître90 jours d’essai gratuit de Windows Azure www.windowsazure.fr

Jusqu’à 35% de réduction sur Visual Studio Pro, avec l’abonnement MSDN www.visualstudio.fr

Pour aller plus loin

10 février 2012

Live Meeting

Open Data - Développer des applications riches avec le protocole Open Data

16 février 2012

Live Meeting

Azure series - Développer des applications sociales sur la plateforme Windows Azure

17 février 2012

Live Meeting

Comprendre le canvas avec Galactic et la librairie three.js

21 février 2012

Live Meeting

La production automatisée de code avec CodeFluent Entities

2 mars 2012

Live Meeting

Comprendre et mettre en oeuvre le toolkit Azure pour Windows Phone 7, iOS et Android

6 mars 2012

Live Meeting

Nuget et ALM

9 mars 2012

Live Meeting

Kinect - Bien gérer la vie de son capteur

13 mars 2012

Live Meeting

Sharepoint series - Automatisation des tests

14 mars 2012

Live Meeting

TFS Health Check - vérifier la bonne santé de votre plateforme de développement

15 mars 2012

Live Meeting

Azure series - Développer pour les téléphones, les tablettes et le cloud avec Visual Studio 2010

16 mars 2012

Live Meeting

Applications METRO design - Désossage en règle d'un template METRO javascript

20 mars 2012

Live Meeting

Retour d'expérience LightSwitch, Optimisation de l'accès aux données, Intégration Silverlight

23 mars 2012

Live Meeting

OAuth - la clé de l'utilisation des réseaux sociaux dans votre application

Prochaines sessions des Dev Camps