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.

Exemple ​

Voici un exemple simple d'implémentation de l'architecture MVVM avec Angular :

// 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, 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.

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

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) au ViewModel, qui les utilise pour fournir une interface pour accéder aux données. La vue utilise le ViewModel pour obtenir les données qu'elle doit afficher à l'utilisateur.