Dans quelles conditions l'utilisation de MVVM est-elle appropriée?

Model View View-Model a été développé par Microsoft pour cibler les plates-formes de développement d'interface utilisateur prenant en charge la programmation événementielle, en particulier Windows Presentation Foundation (WPF) et Silverlight sur les plates-formes .NET utilisant les langages XAML et .NET. Depuis lors, de nombreux frameworks Javascript tels que Angular, Knockout et ExtJS ont adopté ce modèle.

Comme la plupart des modèles logiciels, MVVM a ses utilisations appropriées et ses abus. Dans quelles conditions l'utilisation de MVVM est-elle appropriée? Quand est-ce mal avisé?

MVVM est destiné à être utilisé lorsque des interactions utilisateur complexes utilisant une interface utilisateur haute fidélité sont nécessaires (par exemple, WPF ).

MVVM est destiné aux plates-formes de développement d'interface utilisateur modernes (Windows Presentation Foundation, ou WPF et Silverlight) dans lesquelles un développeur d'expérience utilisateur (UXi) a des besoins différents de ceux d'un développeur plus "traditionnel" (orienté par exemple vers la logique développement du back-end). Le modèle de vue de MVVM est «fondamentalement un convertisseur de valeur sur les stéroïdes», ce qui signifie que le modèle de vue est chargé d'exposer les objets de données du modèle de manière à ce que ces objets soient facilement gérés et consommés. À cet égard, le modèle de vue est plus modèle que vue et gère la plupart sinon la totalité de la logique d'affichage de la vue.

MVVM a été conçu pour utiliser des fonctions spécifiques dans WPF afin de faciliter la séparation du développement de la couche View du reste du modèle en supprimant la quasi-totalité du «code-behind» de la couche View. Au lieu d’obliger les concepteurs interactifs à écrire le code View, ils peuvent utiliser le langage XAML du langage de balisage WPF et créer des liaisons avec ViewModel, qui est écrit et géré par les développeurs d’applications. Cette séparation des rôles permet aux concepteurs interactifs de se concentrer sur les besoins de l'expérience utilisateur plutôt que sur la programmation ou la logique métier, ce qui permet de développer les couches d'une application dans plusieurs flux de travail.

Pour les interfaces utilisateur où ce type d'interaction riche n'est pas nécessaire, le MVVM peut être excessif; MVP peut être un choix plus naturel. MVC convient mieux aux applications Web. Pour les très petites applications qui ne grandiront jamais (telles que les petits utilitaires Winforms), le code-behind est adéquat.

Parfois, MVVM peut être un piège. D'après mon expérience, il privilégie les applications de type CRUD (formulaires plutôt que données) par rapport aux interfaces utilisateur plus orientées tâches. Je ne dis pas que cela implique une mauvaise architecture pour le back-end / les autres couches de l'application, mais j'ai vu beaucoup d'applications MVVM à venir avec une architecture "DDD light". Je ne sais pas pourquoi, peut-être parce que la liaison est si facile et qu'il est très simple de configurer une application avec un ORM et un MVVM / Binding à l'aide d'objets de domaine POCO / Anemic.

MVVM est un pansement pour les couches de liaison de données mal conçues. En particulier, il a été très utilisé dans le monde WPF / silverlight / WP7 en raison des limitations de la liaison de données dans WPF / XAML.

A partir de maintenant, je vais supposer que nous parlons de WPF / XAML car cela clarifiera les choses. Regardons quelques-unes des lacunes que MVVM se propose de résoudre dans WPF / XAML.

Forme des données vs forme de l'interface utilisateur

La «VM» dans MVVM crée un ensemble d'objets définis en C # qui mappent sur un ensemble d'objets de présentation défini dans XAML. Ces objets C # sont généralement connectés à XAML via des propriétés DataContext sur des objets de présentation.

En conséquence, le graphe d'objets viewmodel doit être mappé sur le graphe d'objets de présentation de votre application. Cela ne veut pas dire que le mappage doit être un à un, mais si un contrôle de liste est contenu par un contrôle de fenêtre, il doit y avoir un moyen de passer de l'objet DataContext de la fenêtre à un objet qui décrit les données de cette liste.

Le graphe d'objet viewmodel découple avec succès le graphe d'objet de modèle du graphe d'objet ui, mais au détriment d'une couche de modèle de vue supplémentaire qui doit être construite et gérée.

Si je veux déplacer des données de l'écran A à l'écran B, je dois jouer avec les modèles de vue. Dans l'esprit d'un homme d'affaires, il s'agit d'un changement d'interface utilisateur. Cela devrait se passer uniquement dans le monde de XAML. Malheureusement, cela arrive rarement. Pire encore, en fonction de la structure des modèles de vue et de la réactivité des modifications des données, un réacheminement des données peut être nécessaire pour réaliser ce changement.

Contournement de la liaison de données sans expression

Les liaisons WPF / XAML ne sont pas suffisamment expressives. En gros, vous devez fournir un moyen d'accéder à un objet, un chemin de propriété à traverser et des convertisseurs de liaison pour adapter la valeur de la propriété de données à ce que l'objet de présentation requiert.

Si vous avez besoin de lier une propriété en C # à quelque chose de plus complexe que cela, vous n’avez fondamentalement pas de chance. Je n'ai jamais vu une application WPF sans convertisseur de liaison transformant true / false en visible / collapsed. De nombreuses applications WPF ont également tendance à avoir quelque chose appelé NegatingVisibilityConverter ou similaire qui inverse la polarité. Cela devrait déclencher des sonneries d'alarme.

MVVM vous donne des instructions pour structurer votre code C #, qui peuvent être utilisées pour atténuer cette limitation. Vous pouvez exposer une propriété sur votre modèle de vue appelée SomeButtonVisibility et la lier simplement à la visibilité de ce bouton. Votre XAML est beau et joli maintenant ... mais vous vous êtes transformé en employé - vous devez maintenant exposer + mettre à jour les liaisons à deux endroits (l'interface utilisateur et le code en C #) lorsque votre interface utilisateur évolue. Si vous avez besoin du même bouton sur un autre écran, vous devez exposer une propriété similaire sur un modèle de vue auquel cet écran peut accéder. Pire, je ne peux pas regarder le XAML et voir quand le bouton sera visible. Dès que les reliures deviennent un peu triviales, je dois faire un travail de détective dans le code C #.

L'accès aux données est limité de manière agressive

Étant donné que les données entrent généralement dans l'interface utilisateur via les propriétés DataContext, il est difficile de représenter des données globales ou de session de manière cohérente dans l'ensemble de votre application.

L'idée de "l'utilisateur actuellement connecté" est un bon exemple. Il s'agit souvent d'un problème véritablement global au sein d'une instance de votre application. En WPF / XAML, il est très difficile d’assurer un accès global à l’utilisateur actuel de manière cohérente.

Ce que je voudrais faire, c'est utiliser le mot "CurrentUser" dans les liaisons de données pour désigner librement l'utilisateur actuellement connecté. Au lieu de cela, je dois m'assurer que chaque DataContext me donne un moyen d'obtenir l'objet utilisateur actuel. MVVM peut accepter cela, mais les modèles de vue vont être gâchis car ils doivent tous fournir un accès à ces données globales.

Un exemple où MVVM tombe

Disons que nous avons une liste d'utilisateurs. À côté de chaque utilisateur, nous souhaitons afficher un bouton "supprimer un utilisateur", mais uniquement si l'utilisateur actuellement connecté est un administrateur. De plus, les utilisateurs ne sont pas autorisés à se supprimer.

Vos objets de modèle ne doivent pas connaître l’utilisateur actuellement connecté. Ils ne représentent que les enregistrements d’utilisateur de votre base de données, mais l’utilisateur actuellement connecté doit être exposé aux liaisons de données dans les lignes de votre liste. MVVM indique que nous devrions créer un objet viewmodel pour chaque ligne de la liste qui compose l'utilisateur actuellement connecté avec l'utilisateur représenté par cette ligne de la liste, puis exposer une propriété appelée "DeleteButtonVisibility" ou "CanDelete" sur cet objet viewmodel (en fonction de vos sentiments. sur les convertisseurs de liaison).

Cet objet ressemblera énormément à un objet utilisateur de la plupart des autres manières - il peut être nécessaire de refléter toutes les propriétés de l'objet de modèle utilisateur et de transmettre les mises à jour de ces données à mesure qu'elles changent. Cela semble vraiment difficile - encore une fois, MVVM fait de vous un employé en vous obligeant à maintenir cet objet semblable à l'utilisateur.

Considérez - vous devez probablement aussi représenter les propriétés de votre utilisateur dans une base de données, le modèle et la vue. Si vous avez une API entre vous et votre base de données, c'est encore pire: elles sont représentées dans la base de données, le serveur d'API, le client d'API, le modèle et la vue. J'hésiterais vraiment à adopter un modèle de conception qui ajouterait une autre couche à modifier chaque fois qu'une propriété serait ajoutée ou modifiée.

Pire encore, cette couche s'adapte à la complexité de votre interface utilisateur et non à la complexité de votre modèle de données. Souvent, les mêmes données sont représentées à de nombreux endroits et dans votre interface utilisateur - ceci ne fait pas qu'ajouter un calque, il ajoute un calque avec beaucoup de surface supplémentaire!

Comment les choses auraient pu être

Dans le cas décrit ci-dessus, j'aimerais dire:

<Button Visibility="{CurrentUser.IsAdmin && CurrentUser.Id != Id}" ... />

CurrentUser serait exposé globalement à tous les XAML de mon application. Id ferait référence à une propriété sur le DataContext pour ma ligne de liste. La visibilité serait convertie automatiquement de booléen. Toute mise à jour de Id, CurrentUser.IsAdmin, CurrentUser ou CurrentUser.Id déclencherait une mise à jour de la visibilité de ce bouton. Peasy facile.

Au lieu de cela, WPF / XAML oblige ses utilisateurs à créer un désordre complet. Autant que je sache, certains blogueurs créatifs ont donné un nom à ce désordre et s'appelaient MVVM. Ne vous y trompez pas: il ne fait pas partie de la même classe que les modèles de conception GoF. C'est un bidon laid à contourner un système de liaison de données laide.

(Cette approche est parfois appelée "programmation réactive fonctionnelle" si vous souhaitez en savoir plus).

En conclusion

Si vous devez travailler en WPF / XAML, je ne recommande toujours pas MVVM.

Vous souhaitez que votre code soit structuré de la même manière que l'exemple ci-dessus "comment les choses auraient pu être" - modèle exposé directement à la vue, avec des expressions de liaison de données complexes + des coercions de valeur flexibles. C'est beaucoup mieux - plus lisible, plus accessible en écriture et plus facile à maintenir.

MVVM vous conseille de structurer votre code de manière plus détaillée et moins facile à gérer.

Au lieu de MVVM, créez des éléments pour vous aider à vous faire une bonne idée: Développez une convention pour exposer de manière cohérente l'état global à votre interface utilisateur. Construisez vous-même des outils à partir de convertisseurs de liaison, de MultiBinding, etc. qui vous permettent d’exprimer des expressions de liaison plus complexes. Construisez vous-même une bibliothèque de convertisseurs de liaison pour aider à rendre les cas de contrainte habituels moins douloureux.

Encore mieux - remplacez XAML par quelque chose de plus expressif. XAML est un format XML très simple pour instancier des objets C #. Il ne serait pas difficile de trouver une variante plus expressive.

Mon autre recommandation: n'utilisez pas de boîtes à outils qui forcent ce genre de compromis. Ils vont nuire à la qualité de votre produit final en vous poussant vers de la merde comme MVVM au lieu de vous concentrer sur votre domaine de problèmes.

J'aime beaucoup MVVM et je trouve ses défis motivants et je vois les nombreux avantages, mais ...

1. Pour les applications ou les jeux qui nécessitent beaucoup de code d'interface utilisateur / d'interaction, ajoutez de nombreux comportements personnalisés tout en conservant les performances optimales - il est souvent préférable d'utiliser un MVVM un peu sale - utilisez-le lorsqu'il est utile ou plus centré sur les données que zones centrées sur l’interaction du code. Supposons que vous souhaitiez créer un contrôle et le déplacer entre différents contrôles parents ou le mettre en cache ...

2. La courbe d'apprentissage est assez abrupte. Par conséquent, à moins que vous n'ayez le temps, prévoyez de développer énormément WPF / SL, demandez à des concepteurs expérimentés en Blend, ressentez le besoin d'écrire un code de test pour votre interface utilisateur ou attendez-vous à ce que des années de maintenance soient nécessaires pendant des années. projet - il pourrait ne pas porter ses fruits.

3. Peu de concepteurs connaissent Blend. Tous les projets ne valent pas la peine de centrer les tests automatisés sur la couche de présentation, car ils doivent quand même être testés manuellement. C'est ainsi que vous trouverez les bogues les plus importants, et non en testant vos ordinateurs virtuels.

4. C'est vraiment un investissement. Vous devez d’abord comprendre les bases de WPF / SL et XAML, puis trouver les moyens de faire les liaisons correctement, raccorder par rapport à vms dans un certain ordre, maîtriser vos droits, choisir dans la plupart des cas un cadre qui être problématique en raison de la gestion des licences, créez une bibliothèque sippets pour coder efficacement, mais découvrez que la plate-forme ne fonctionne pas toujours bien avec les liaisons et que vous devez créer une bibliothèque de comportements qui répondent à vos besoins.

Mais dans l’ensemble, si vous surmontez tous les obstacles et que vous devenez assez expérimenté dans le schéma, tout est rentabilisé en termes de clarté, de facilité de maintenance et de ... Droits de vantardise? :)

Je suis programmeur WPF / Silverlight depuis des années pour la construction d’énormes applications, telles que les systèmes de trading, sur MVVM.

Au fil des années, j’ai appris que le strict MVVM prend du temps et coûte de l’argent. Par stricte, j'entends des règles telles que "pas de code derrière".

Il est impossible, sauf dans l'application la plus élémentaire de formulaire / base de données, de ne pas avoir de code-behind.

Le concepteur spécifie dès le premier jour quelque chose qui n’est pas possible avec les contrôles standard. Vous devez donc créer une série de contrôles personnalisés, ou envelopper des contrôles existants, pour prendre en charge le paradigme de l’interaction lorsque vous utilisez MVVM.

J'ai écrit toutes sortes de contrôles d'interface utilisateur swish en utilisant les mathématiques, l'inertie, les gestes, etc., et son travail ardu.

Mais tout cela est codé en arrière, ce n'est tout simplement pas dans la vue. Vous devez gérer les clics sur les boutons, le défilement, le glissement, etc., mais le tout est bien emballé dans un ensemble de contrôles, ce qui rend ce code-derrière correct.

Il est souvent plus facile simplement d'écrire le code-behind et les éléments d'interface utilisateur intelligents dans la vue, au lieu de créer un ensemble de contrôles juste pour le plaisir de le faire.

MVVM a pour objectif de séparer la logique applicative / métier de la logique d'interface utilisateur. Le système de liaison et MVVM est un bon moyen de le faire.

Les autres objectifs proposés, tels que le concepteur XAML sur un bureau et le programmeur C # sur l’autre, l’un travaillant dans Blend l’autre dans VS, sont erronés.

Pouvoir redéfinir rapidement une interface utilisateur est une autre erreur. Cela n'arrive jamais, son optimisation prématurée; toute refonte majeure nécessite beaucoup de travail pour les modèles de vue. Tweaking est une chose, mais des révisions rapides de l'interface utilisateur ne sont pas possibles; les modèles de vue doivent correspondre au paradigme de l'interaction, de sorte que le couplage est plus étroit que vous ne le croyez.

Pour moi, j'utilise MVVM pour séparer la logique de l'application (j'utilise généralement un contrôleur testable et un ensemble de modèles de vue sans logique), mais quels que soient le code et les astuces nécessaires pour donner à mon interface un aspect et un comportement sexy, je ne le fais pas. transpirer.

Sinon, vous finissez par dominer vos conceptions, vos animations géniales, etc. simplement parce que l'idée de savoir comment MVVM-arize tout cela devient trop ahurissante.

MVVM, comme la plupart des choses dans la vie, a un point positif entre deux extrêmes.

La chose la plus importante dans la conception de logiciels est d’expédier votre produit tôt, de savoir quelles fonctionnalités sont utilisées, quelle interface fonctionne bien et de ne pas écrire de beau code pour un produit que personne n’utilise.

Si votre application nécessite que vous vous connectiez à des quantités excessives de données en temps réel, alors MVVM peut en réalité gêner, car il introduit des abstractions qui ralentissent le processus et, en supposant que nous parlions de WPF / Silverlight / WP7, la liaison le moteur n'est actuellement pas aussi efficace; bien que des améliorations soient en cours.

MVVM, en l’état actuel, n’est pas la seule partie de l’équation à prendre en compte. Le MVVM pur doit être pris en charge avec une infrastructure telle que le modèle Mediator pour vous permettre de communiquer à travers des ViewModels déconnectés.

Malgré l’avis de blucz ci-dessus, MVVM est dans la lignée des modèles GoF. Si vous examinez les modèles, MVVM est l'équivalent du modèle Présentateur passif de la vue Modèle, qui est apparu à peu près au même moment que MVVM. Ici, les gens vont souvent se plaindre de la complexité de MVVM simplement parce qu'ils ne comprennent pas comment concevoir leur utilisation.

Un autre domaine dans lequel j'ai rencontré des problèmes avec MVVM est celui où vous devez incorporer une technologie tierce qui n'est pas conçue pour la prendre en charge (telle que le framework UII pour MS Dynamics). Parfois, vous devez vous demander si cela vaut la peine de "pirater" d'autres technologies juste pour travailler avec MVVM.

Si vous mélangez et faites correspondre quelque chose comme Win Forms à votre solution WPF, cette partie de la solution ne sera probablement pas non plus adaptée à MVVM. J'espère que cela vous donne une idée de certains domaines dans lesquels MVVM n'est pas applicable.

L'utilisation de MVVM n'a pas de sens lorsque:

• Vous ne travaillez pas avec WPF ou Silverlight
• Vous testez un concept

C'est ça. Je ne vois pas vraiment pourquoi vous n'utiliseriez pas MVVM lorsque vous utiliserez WPF / Silverlight, sauf si vous testez ou déboguez quelque chose dans un projet séparé. Je trouve le modèle de conception idéal pour le développement WPF / Silverlight en raison du fonctionnement des liaisons XAML.

L'intérêt principal de MVVM est que votre application entière est exécutée dans vos ViewModels et que vos vues constituent simplement une jolie couche que les utilisateurs peuvent utiliser pour interagir avec vos ViewModels. Vous voulez cliquer sur un bouton, vous utilisez actuellement une méthode ViewModel. Vous souhaitez modifier la page, vous modifiez en fait la propriété CurrentPage dans le ViewModel.

J'utilise MVVM pour tous les développements WPF / Silverlight, même de petits projets simples d'une page, bien que la façon dont j'utilise MVVM diffère en fonction de la taille du projet et de ce dont j'ai besoin. La seule fois où j'ai créé une petite application sans MVVM, j'ai fini par le regretter (elle a ensuite été refactorisée pour utiliser MVVM lors de l'ajout d'une mise à jour).

J'ai travaillé pour un client sur un projet codé en arrière avec une tentative de conversion au MVVM intégrée et c'était un gâchis gigantesque. Cela ne veut pas dire que tous les projets code-behind sont un gâchis. Les vues seraient une erreur ou un crash Blend qui a causé des problèmes pour les concepteurs.

J'ai touché à RoR et j'ai pratiquement omis de faire quoi que ce soit avec les formulaires Web ASP.NET, mais lorsque ASP.NET MVC est sorti, j'ai essayé d'apprendre autant que possible, en utilisant souvent les livres ASP.NET MVC In Action et le codecampserver comme référence. . Bien que ce soit un motif différent, j'utilise beaucoup des choses que j'ai apprises dans les livres In Action du développement de SL / MVVM.

Quand j'ai commencé à travailler avec Silverlight, j'ai été surpris de voir à quel point c'était nu et il semblait nécessaire de choisir l'un des nombreux cadres disponibles pour l'habiller. Je vois cela comme un problème avec les gens qui abandonnent l'apprentissage du MVVM.

J'ai commencé avec l'excellent MVVM-Light qui m'a permis de mieux comprendre le motif. J'ai ensuite commencé à travailler avec Caliburn Micro, puis les lumières se sont allumées. Pour moi, Caliburn Micro revient à utiliser ASP.NET MVC sur des formulaires Web ASP.NET. Ainsi, même pour de petits exemples d'applications, je crée le projet, NuGet CM, et je suis opérationnel. Je suis d'abord l'approche ViewModel et je garde mes vues stupides et faciles à utiliser dans Blend. Mes ordinateurs virtuels sont testables si vous y êtes et avec CM, il est assez facile de contourner des dispositions d'écran complexes.

Vous pouvez profiter de vérifier cette alternative. Cette option évite la méthode de liaison de données, les modèles de données et le MVVM WPF. Cette option ressemble davantage à l’ancienne, simple et fiable approche WinForms designer.cs.

WPF Composites

http://wpfcomposites.codeplex.com/

Ici, le code-derrière C # concis pour WPF est produit en superposant une matrice simple au-dessus de l'interface utilisateur via des composites basés sur une grille. Si une interface utilisateur XAML moderne ne contient que quelques étiquettes de texte et une liste de photos, pourquoi ne pas définir cela par la simple ligne de code suivante: grid.AddText (guid, coordonnée x, coordonnée y)? Notez que ce n'est pas sur une toile, mais toujours dans les conteneurs WPF: grid, dockpanel, etc. WPF est extrêmement puissant. Cette approche ne fait que tirer parti de cela.

Les développeurs ne se soucient généralement pas des matrices et des indices. Commencez par un niveau de conteneur à grain grossier défini par les GUID des objets de transfert de données (DTO) ou des POCO, puis complétez ces conteneurs à clé par une matrice à grain plus fin contenant des lignes et des colonnes potentielles?

Le projet codeplex ci-dessus introduit cette approche en commençant par le contrôle ListBox, mais s'étend désormais à tous les contrôles composites WPF. Par exemple, chaque élément listboxitem est un composite ajouté avec un GUID (un composite lie en tête-à-tête à une classe), puis à l'intérieur de cet élément se trouve une grille sur laquelle des éléments d'interface utilisateur enfants (les enfants se lient en tête-à-tête à des propriétés). dans une classe) peut être ajouté à volonté via code-behind. Les enfants peuvent être des blocs de texte ou des images.

L'idée est de tirer parti des index et d'une structure d'élément d'interface utilisateur bien définie (elle force un ListBox à thème PresentationFramework.Aero comme base de départ) au lieu de modèles de données. Cette nouvelle approche limite à dessein ce qui peut être fait, mais permet ainsi d'obtenir un code C # robuste et concis, intuitif. Nul besoin de rechercher des solutions de modèles de contrôle pour styliser une barre de défilement ou d'encombrer une solution avec plusieurs modèles de données pour des tâches simples.

MVVM est principalement basé sur le framework d'interface utilisateur que j'utilise. Donc, avec quelque chose comme WPF ou Silverlight qui a un paradigme basé sur la liaison à un contexte de données, ce contexte de données pourrait toujours être appelé un modèle de vue.

La question que je me pose est la suivante: quand construisez-vous une grosse classe séparée qui est le modèle de vue pour ce contrôle / fenêtre / application et quand pouvez-vous vous en sortir en utilisant les objets déjà construits.

Nous avons donc une question classique sur l’ajout d’une couche d’abstraction. la machine virtuelle va ajouter du poids, de l'inertie et de la structure à un projet. Il sera plus facile de construire, mais plus difficile de changer et de construire plus longtemps. Aucune de ces choses facilement quantifiable.

Pour une réponse économique, MVVM n'est pas approprié pour les applications en ligne de commande ou les services Web :)