Introduction
Le MVVM, tirant son nom de l'abréviation de l'anglicisme Model-View-ViewModel, est un pattern d'architecture logicielle principalement utilisé dans le développement d'applications avec des interfaces utilisateur riches (comme WPF, UWP, Xamarin, ou d'autres cadres d'applications .NET). Il découple la logique de présentation de la logique métier, facilitant ainsi le maintien, le test unitaire, et l'évolutivité de l'application.
Le sigle signifie :
- Model : le modèle, représentant les données et la logique métier.
- View : la vue, représentant l'interface utilisateur.
- ViewModel : le modèle de vue, servant d'intermédiaire entre le modèle et la vue.
Composantes détaillés
- Model : Contient les données, les règles métier, et les services (accès à la base de données, API,...). Indépendant de l'interface : le model ne sait rien de la vue ou du ViewModel. Exemple : une classe Utilisateur avec des propriétés comme Nom, Courriel, et des méthodes pour valider ou sauvegarder les données.
- View : Représente l'interface utilisateur (boutons, listes, formulaires, graphiques...). Elle est généralement déclarative (XAML, HTML,...) et ne contient pas de logique métier. La vue est liée au ViewModel via le data binding, permettant la mise à jour automatique de l'interface quand les données changent.
- ViewModel : Sert de pont entre la View et le Model. Contient les données formatées pour l'affichage, les commandes utilisateur (actions comme clics de bouton), et la logique de présentation. Implémente souvent des interfaces comme INotifyPropertyChanged pour avertir la vue des changements de données. Exemple : une propriété NomComplet concaténant Prénom et Nom du modèle.
Fonctionnement
L'utilisateur interagit avec la View (exemple clique sur un bouton). La View déclenche une commande dans le ViewModel. Le ViewModel peut interroger ou mettre à jour le Model. Quand les données changent dans le ViewModel ou le Model, la View se met à jour automatiquement grâce au binding.
Voici un diagramme simplifié :
La flèche bidirectionnelle entre View et ViewModel correspond au data binding.
La flèche entre ViewModel et Model correspond à l'accès aux données et à la logique métier.
Avantages
- Séparation claire des responsabilités → maintenance facilitée.
- Testabilité → le ViewModel peut être testé sans la vue.
- Réutilisation → un même ViewModel peut alimenter plusieurs vues.
- Mises à jour automatiques → le binding réduit le code "boilerplate" pour synchroniser l'UI.
Exemple
Voici un exemple simple en C# (WPF) :
- // Model
- public class Utilisateur
- {
- public string Nom { get; set; }
- public string Prenom { get; set; }
- }
-
- // ViewModel
- public class UtilisateurViewModel : INotifyPropertyChanged
- {
- private Utilisateur _utilisateur = new Utilisateur();
-
- public string NomComplet => $"{_utilisateur.Prenom} {_utilisateur.Nom}";
-
- public event PropertyChangedEventHandler PropertyChanged;
-
- protected void OnPropertyChanged(string propertyName) =>
- PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
- }
-
- // View (XAML)
- <TextBlock Text="{Binding NomComplet}" />