Présentation des patterns MVC, MVVM: Quand les utiliser et pourquoi ?

Les design patterns (ou patron conception en français) sont des solutions éprouvées pour résoudre des problèmes de mise en place de logiciels fréquents. Il en existe plusieurs catégories parmi lesquels les patterns structuraux, les patterns de comportement ou encore les patterns de création. Nous allons nous intéresser aux patterns structuraux qui donnent des approches structurelles et organisationnelles pour le code en vue d’améliorer la maintenabilité, la scalabilité et la réutilisabilité d’une application. Plusieurs patrons de conception structuraux sont maintenant vulgarisés dans l’industrie parmi lesquels ,le MVC (Model-View-Controller) et le MVVM (Model-View-ViewModel) dont l’usage est considérable dans le développement de logiciels. Dans cet article, nous allons présenter ces deux patrons en nous attardant brièvement sur leurs concepts, leurs avantages et leurs inconvénients, et en fournissant des exemples d’implémentation pour tenter d’illustrer leurs différences.

MODEL-VIEW-CONTROLLER (MVC)

Le pattern MVC) se compose de trois composants principaux : le Modèle, la Vue et le Contrôleur.
• Le Modèle représente la logique métier et les données de l’application. Il gère les données, les manipule et les stocke. Il contient aussi souvent la logique métier pour effectuer des opérations sur les données.
• La Vue est responsable de l’affichage des données et de l’interaction avec l’utilisateur. En clair, elle présente les données au format adéquat pour les utilisateurs finaux.
• Le Contrôleur est le lien de coordination entre le Modèle et la Vue. Il se charge de la gestion des événements de l’interface utilisateur, la récupération des données du Modèle et la transmission à la Vue pour affichage. Il « monitore » les actions de l’utilisateur pour mettre à jour les données du Modèle.

Exemple d’implémentation MVC :
Prenons l’exemple d’une application de liste de tâches où les utilisateurs peuvent ajouter, supprimer et marquer comme terminées ces dernières. Dans ce contexte, le Modèle serait responsable de la gestion des données des tâches: leur ajout, leur suppression et leur état (terminée ou non). La Vue serait responsable de l’affichage de la liste des tâches et de la gestion des interactions utilisateur, comme l’ajout d’une nouvelle tâche ou le marquage d’une tâche comme terminée via l’interface. Le Contrôleur serait responsable de la coordination entre le Modèle et la Vue, en récupérant les données du Modèle et en les transmettant à la Vue pour affichage, en gérant également les actions de l’utilisateur pour mettre à jour les données du Modèle(clic sur bouton enregistrer, modification de la valeur dans une liste déroulante qui impacte par la même occasion la donnée et donc le modèle).

Avantages du pattern MVC :

• Séparation claire des responsabilités entre le Modèle, la Vue et le Contrôleur, ceci a l’avantage de garantir une meilleure maintenabilité et réutilisabilité du code.
• Facilitation des tests unitaires, car la logique métier est généralement isolée dans le Modèle.
• Favoriser la modularité et la flexibilité de l’application, car la plupart des composants sont indépendants les uns des autres.

Inconvénients du pattern MVC:
• Peut entraîner une complexité élevée de la logique de liaison entre les composants, notamment dans les projets complexes.
• Peut entraîner une duplication de code si le la logique entre les composants est répétitive dans plusieurs vues.

MODEL-VIEW-VIEWMODEL(MVVM)

Le pattern MVVM a été inventé par le géant MICROSOFT notamment pour le développement d’applications WPF(Windows Presentation Foundation) et est de nos jours fréquemment utilisé pour la mise en place d’applications mobiles avec Xamarin. Il se compose de trois éléments principaux : le Modèle, la Vue et le Modèle de vue.
• Le Modèle présente des similitudes avec celui du pattern MVC et représente également la logique métier et les données de l’application.
• La Vue est responsable de l’affichage des données et de l’interaction avec l’utilisateur, tout comme dans le pattern MVC.
• Le ViewModel(Modèle de vue) est un composant intermédiaire entre le Modèle et la Vue. Il est responsable de la liaison (binding ou liaison) des données entre le Modèle et la Vue, et de la gestion des commandes (actions de l’utilisateur généralement sur la vue qui au-delà d’une simple gestion des évènements), il sert de lien bidirectionnel qui notifie à la fois la vue et le modèle. Il peut mettre à jour les données du Modèle ou la vue qui elle restera inchangé mais recevra la notification du changement de donnée, puis l’interface s’adaptera pour l’afficher.

Exemple d’implémentation MVVM :

Prenons le même exemple d’application de liste de tâches énoncé ci-dessus. Si on part sur une architecture MVVM, le Modèle serait responsable de la gestion des données des tâches, la Vue serait responsable de l’affichage de la liste des tâches et de la gestion des interactions utilisateur, tout comme dans le pattern MVC. Le MVVM a l’air a bien des égards d’être l’équivalent du MVC mais, la différence principale réside dans le Moèle de vue. Celui-ci serait responsable de la liaison des données(on parle de Databinding) entre le Modèle et la Vue, en mettant à jour automatiquement la Vue lorsque les données du Modèle changent, et en écoutant les actions de l’utilisateur pour mettre à jour les données du Modèle par le biais de ce qu’on appelle des commandes.

Avantages du pattern MVVM :
• Séparation claire des responsabilités entre le Modèle, la Vue et le Modèle de vue, ce qui permet une meilleure aussi une maintenabilité et réutilisabilité du code.
• Permet une liaison automatique des données entre le Modèle et la Vue, ce qui a pour don de faciliter la synchronisation entre les données et l’interface utilisateur.
• Favorise la testabilité, car la logique métier est isolée dans le Modèle et la logique de liaison des données est isolée dans le Modèle de vue.

Inconvénients du pattern MVVM :
• Peut entraîner une complexité énorme en raison de la nécessité de créer et de gérer un autre composant (le Modèle de vue) pour la liaison des données.
• Ne convient généralement pas pour des applications de petites tailles où la liaison automatique des données n’est un must.

En conclusion, les patterns MVC, MVVM sont tous des patterns de conception couramment utilisés dans le développement de logiciels, chacun d’entre eux avec ses avantages et inconvénients. Le choix de l’utilisation de l’un ou l’autre dépend explicitement des besoins spécifiques de l’application à concevoir. Le pattern MVC est largement utilisé pour séparer la logique métier, l’affichage et la gestion des interactions utilisateur. Le pattern MVVM ajoute une couche intermédiaire pour la liaison automatique des données entre le Modèle et la Vue, ce qui peut faciliter la synchronisation des données et de l’interface utilisateur.
 Il est important pour les développeurs de comprendre ces patterns et d’en faire un usage judicieux dans le développement d’applications pour garantir une architecture propre, maintenable et évolutive.