Qu’est ce que le pattern MVVM ?

Définition

En architecture logicielle, MVVM (Model View ViewModel) est un Design pattern (Modèle de conception) visant à séparer la logique de présentation d’une application en 3 couches :

• Model :
  Le modèle contient les données liés à la logique métier. Il peut s’agir par exemple d’entités issues de bases de données ou encore d’API externes.
  Les modèles métiers sont conçus et optimisés pour le bon fonctionnement de la persistance et/ou de la transmission des donnés (backend).
  Les modèles métiers ne sont en aucun cas dépendant de la manière dont elle seront présentés sur une interface graphique (frontend).
• View:
  La vue est la description de l’interface graphique, elle fait le lien entre les actions de l’utilisateur et le modèle de vue.
  Elle définie où et comment sont placés les composants graphiques sur l’interface et décris les liaisons de données (Data Bindings) entre les valeurs affichés et le modèle de vue.
• ViewModel :
  Le modèle de vue est chargé de transformer et organiser les modèles métiers afin d’exposer les données à afficher par la vue.
  Si un changement critique intervient au niveau du modèle métier, le view modèle peut être adapté sans en impacter la vue.
  En revanche, la vue peut évoluer sans impacter les modèles de vue ou les modèles métiers.

Dépendance entre les couches

Étant un facteur important de maintenabilité, Les dépendances entre les différentes couches doivent être optimisés.

Ci dessous, une mauvaise approche de dépendance :

Ici, le ViewModel reçois les mise à jour de la View,
traîtes les données et renvois les mises à jours à la View.

Celà pose un problème car dans ce scénario, la View et le ViewModel possèdent une dépendance cyclique et un changement de la View impacterait directement le ViewModel. De plus, si plusieurs vues sont chargés de présenter ce même ViewModel, l’ensemble des ces Views devront être mises à jour par le ViewModel.

Pour éviter cette contraignante dépendance, le paterne MVVM propose une approche différente :

Le ViewModel notifie les changements qui lui sont appliqués.

De cette manière, la View est elle même responsable de se tenir informée des mise à jours du ViewModel par le biais de notifications (évènements) et de se mettre à jour au besoin.

Deux dépendances sont restantes :

• La vue est dépendante du modèle de vue :

La View connais donc les donnés exposées par le ViewModel et possède un accès en lecture et/ou écriture sur ces données.

La View écoute et réagit aux notifications du ViewModel.

• Le modèle de vue est dépendant du modèle métier :

Le ViewModel réagit aux demandes de modifications de ses donnés par les couches extérieurs et notifie les changements qu’il aura validé.

Le ViewModel sait récupérer et mettre à jours les informations du Model.

La liaison de donnés (Data Binding)

Le Data Binding est un mécanisme proposé par la majorité des framework MVVM.

Son rôle est de décrire la liaison entre un composant graphique et une donnée exposée par le ViewModel. Il permet également de simplifier l’utilisation du paterne MVVM en encapsulant la logique de communication entre la View et le ViewModel.

Par exemple, le développeur peut utiliser le Data Binding pour lier la valeur d’un champ texte à une donnée précise exposée par le ViewModel :

• Au chargement de l’interface graphique, le framework interprète le binding décris par le développeur et se charge de remplir le contenu du champ texte avec la valeur de la donnée du ViewModel à cet instant.
• Si l’utilisateur saisie/modifie la valeur de ce champ, le framework fera automatiquement une demande de modification de cette donnée sur le ViewModel avec la nouvelle valeur saisie par l’utilisateur.
• Le ViewModel peut refuser ou accepter cette modification, et dans le dernier cas notifier que cette donnée a changé.
• Le framework intercepte la notification de changement de valeur, récupère la nouvelle valeur et met à jour les composants ayant un binding vers cette donnée.

Dans le cas d’une modification externe de la donnée sur le ViewModel, le principe est le même :

• La notification de changement est déclenchée,
• le framework intercepte la notification et récupère la nouvelle valeur,
• puis met à jour les composants ayant un binding vers cette donnée.