Appearance
L'architecture MVVM
L'architecture MVVM (Model-View-ViewModel) est une approche de conception logicielle qui vise à séparer les données d'une application (le modèle) de sa présentation (la vue). Le ViewModel est une sorte de pont entre le modèle et la vue, il fournit une interface que la vue peut utiliser pour accéder aux données du modèle de manière appropriée. Cette architecture permet de rendre les vues plus indépendantes du modèle, ce qui facilite la maintenance et l'évolution de l'application.
A retenir
Séparation des responsabilités : en séparant les données de l'application (modèle) de la façon dont elles sont affichées à l'utilisateur (vue), il est plus facile de comprendre et de maintenir l'application.
Facilité de test : le ViewModel expose une interface qui peut être facilement testée indépendamment de la vue, ce qui rend les tests plus simples à écrire et à maintenir.
Meilleure évolutivité : en séparant les données de l'affichage, il est plus facile de modifier l'interface utilisateur sans avoir à toucher au modèle de données. Cela rend l'application plus facile à évoluer au fil du temps.
Meilleure gestion des changements de données : le ViewModel peut être utilisé pour mettre à jour la vue en fonction des changements dans les données du modèle, ce qui rend la gestion des mises à jour de l'interface utilisateur plus simple.
Exemple
Voici un exemple simple d'implémentation de l'architecture MVVM avec Angular :
ts
// Le modèle, qui représente les données de l'application
class User {
constructor(public firstName: string, public lastName: string) {}
get fullName(): string {
return `${this.firstName} ${this.lastName}`;
}
}
// Le ViewModel, qui fournit une interface pour accéder aux données du modèle
class UserViewModel {
user: User;
constructor(user: User) {
this.user = user;
}
getFullName(): string {
return this.user.fullName;
}
}
// La vue, qui utilise le ViewModel pour afficher les données
@Component({
selector: 'app-user-profile',
template: `
<h1>{{ viewModel.getFullName() }}</h1>
`
})
class UserProfileComponent {
@Input() viewModel: UserViewModel;
}
Le modèle représente les données de l'application et contient la logique métier. Dans cet exemple, le modèle est la classe User
, qui contient les informations sur un utilisateur (prénom et nom de famille). La classe User
comprend également une méthode fullName
qui retourne le nom complet de l'utilisateur.
Le ViewModel
est une couche intermédiaire qui fournit une interface pour accéder aux données du modèle. Le ViewModel
n'a pas connaissance de la vue et ne sait pas comment les données sont affichées. Dans cet exemple, le ViewModel
est la classe UserViewModel
, qui contient une instance du modèle User et une méthode getFullName
qui retourne le nom complet de l'utilisateur.
Enfin, la vue est la partie de l'application qui est affichée à l'utilisateur. Dans cet exemple, la vue est la classe UserProfileComponent
, qui est un composant Angular annoté avec @Component
. Le composant possède une propriété viewModel
de type UserViewModel
et utilise cette propriété dans sa template HTML pour afficher le nom complet de l'utilisateur en utilisant la méthode getFullName
du ViewModel
.
L'architecture MVVM sépare les données de l'application (modèle) de la façon dont elles sont affichées à l'utilisateur (vue), ce qui permet de maintenir une meilleure separation des responsabilités et une meilleure évolutivité de l'application.
mermaid
sequenceDiagram
participant Model as User
participant ViewModel as UserViewModel
participant View as UserProfileComponent
Model->ViewModel: user
ViewModel->Model: fullName
View->ViewModel: getFullName()
ViewModel->View: fullName
Ce schéma montre comment les différentes parties de l'application interagissent entre elles dans le cadre de l'architecture MVVM. Le modèle envoie ses données (l'instance de
User
) auViewModel
, qui les utilise pour fournir une interface pour accéder aux données. La vue utilise leViewModel
pour obtenir les données qu'elle doit afficher à l'utilisateur.