Imaginez un théâtre où chaque acteur sait exactement quand et comment entrer en scène, sans jamais oublier ses répliques. C’est exactement ce que promet l’architecture MVVM (Model-View-ViewModel). Mais qu’est-ce que ce modèle apporte aux développeurs Angular, et pourquoi est-il pertinent pour créer des applications modernes et maintenables ? Plongeons dans le cœur de cette architecture et son lien avec Angular.

Qu’est-ce que l’architecture MVVM ?

Le modèle MVVM est une architecture logicielle qui divise une application en trois couches principales pour faciliter la séparation des responsabilités et améliorer la maintenabilité du code. Voici ses trois composantes principales :

1. Model : Représente les données et la logique métier. Il ne connaît pas l’interface utilisateur. Par exemple, si vous développez une application bancaire, le modèle pourrait gérer des entités comme les comptes, les transactions ou les utilisateurs.

   • Rôle clé : Il contient la logique métier et l’accès aux données, indépendant de toute interface.

2. View : C’est l’interface utilisateur que l’utilisateur voit et avec laquelle il interagit. Elle est principalement responsable de l’affichage des données, mais elle ne contient pas de logique métier.

   • Rôle clé : Elle gère l’affichage des informations et capte les interactions de l’utilisateur.

3. ViewModel : Agit comme un médiateur entre le modèle et la vue. Il extrait les données du modèle, les transforme si nécessaire, et les fournit à la vue. Le ViewModel permet également de gérer les interactions utilisateur et de déclencher les actions appropriées dans le modèle.

   • Rôle clé : Il prépare les données pour la vue et réagit aux actions de l’utilisateur en interagissant avec le modèle.

Pourquoi utiliser MVVM ?

Le principal avantage de MVVM est de séparer les préoccupations. En clair :

• La vue se concentre uniquement sur l’affichage et l’expérience utilisateur, en se basant sur ce qu’elle reçoit du ViewModel.

• Le modèle encapsule les données et les règles métiers, assurant la cohérence des données.

• Le ViewModel connecte les deux en assurant que la vue reste réactive aux changements des données sans y inclure de logique complexe, adaptant le modèle pour la vue.

Cette séparation rend l’application plus facile à comprendre, tester et maintenir. C’est particulièrement utile dans des projets de grande envergure où plusieurs développeurs travaillent simultanément sur différentes parties de l’application.

Angular et MVVM : Un duo naturel

Angular n’implémente pas MVVM de manière explicite, mais il s’intègre naturellement dans cette architecture grâce à ses outils et concepts clés. Voici comment Angular s’adapte au modèle MVVM :

1. Model (le « backend » et les services Angular)

En Angular, le modèle peut être représenté par des services et des objets métier. Ces services gèrent la logique métier, interagissent avec les APIs via HttpClient, et fournissent des données au reste de l’application.

Exemple :

@Injectable({ providedIn: 'root' })
export class AccountService {
  getAccountDetails(): Observable<Account> {
    return this.http.get<Account>('/api/account');
  }
}

Ce service AccountService récupère les détails d’un compte depuis une API (le modèle).

2. View (les templates Angular)

Les templates Angular constituent la vue. Ils utilisent le data binding pour afficher les données fournies par le ViewModel. Les directives comme *ngFor et *ngIf permettent de manipuler l’affichage en fonction des données.

Exemple :

<div *ngIf="account">
  <h1>Bienvenue, {{ account.name }}</h1>
  <p>Solde : {{ account.balance | currency }}</p>
</div>

Ce template affiche les détails d’un compte en utilisant le data binding.

3. ViewModel (Les composants Angular)

Le ViewModel en Angular est incarné par les composants. Les composants reçoivent des données des services (modèle) et les exposent aux templates (vue). Ils gèrent également les interactions utilisateur et appellent les méthodes appropriées dans les services.

Exemple :

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
})
export class AccountComponent {
  account: Account | null = null;

  constructor(private accountService: AccountService) {}

  ngOnInit() {
    this.accountService.getAccountDetails().subscribe((data) => {
      this.account = data;
    });
  }
}

Ce composant AccountComponent récupère les données du service, et les expose pour être affichées dans la vue. Il fait office de ViewModel.

Les mécanismes d’Angular qui facilitent MVVM

Angular offre plusieurs fonctionnalités qui s’alignent parfaitement avec l’architecture MVVM :

1. Data Binding bidirectionnel (Two-Way Data Binding)

   Avec [(ngModel)], Angular permet de synchroniser automatiquement les données entre le modèle et la vue. Cela correspond parfaitement à l’objectif de réactivité du ViewModel.

   Exemple :

   <input [(ngModel)]="account.name" />

   L’entrée de l’utilisateur est directement liée aux données du composant.

2. Services injectables

   Angular utilise l’injection de dépendances pour centraliser la logique métier. Les services agissent comme des modèles et sont facilement accessibles par les composants. Les services peuvent facilement être partagé entre plusieurs composants.

3. Observables et réactivité

   Grâce à RxJS (ou les Signals), Angular rend les données réactives, permettant à la vue de se mettre à jour automatiquement en fonction des changements du modèle. Cette réactivité est gérée au sein du composant (le ViewModel).

4. Directives et Pipes

   Les directives (comme *ngFor) permettent de structurer dynamiquement l’interface, tandis que les pipes simplifient le formatage des données dans les templates, laissant au composant la gestion de l’état.

Un exemple concret : Gestion d’une liste de tâches

Sans MVVM :

Imaginons que vous gérez toutes les données directement dans la vue avec une logique dispersée dans les templates. Le résultat serait un code spaghetti, difficile à tester et à maintenir, peu réutilisable.

Avec MVVM :

• Model : Un service TaskService qui gère les tâches, avec une logique de stockage et de manipulation des données.

• ViewModel : Un composant TaskComponent qui récupère les tâches et gère les actions utilisateur, servant d’intermédiaire entre le model et la vue.

• View : Un template qui affiche la liste des tâches et propose une interface pour en ajouter ou en supprimer, avec le minimum de logique.

Code Angular simplifié avec MVVM :

// Model : TaskService
@Injectable({ providedIn: 'root' })
export class TaskService {
  private tasks = new BehaviorSubject<Task[]>([]);

  getTasks(): Observable<Task[]> {
    return this.tasks.asObservable();
  }

  addTask(task: Task) {
    const currentTasks = this.tasks.getValue();
    this.tasks.next([...currentTasks, task]);
  }
}

// ViewModel : TaskComponent
@Component({
  selector: 'app-task',
  templateUrl: './task.component.html',
})
export class TaskComponent {
  tasks$: Observable<Task[]>;

  constructor(private taskService: TaskService) {
    this.tasks$ = this.taskService.getTasks();
  }

  addTask(task: Task) {
    this.taskService.addTask(task);
  }
}

<!-- View : task.component.html -->
<div>
  <ul>
    <li *ngFor="let task of tasks$ | async">{{ task.title }}</li>
  </ul>
  <button (click)="addTask({ title: 'Nouvelle Tâche' })">Ajouter une tâche</button>
</div>

Ici, on voit bien que chaque partie est responsable d’une fonctionnalité bien précise, rendant l’application plus maintenable.

Les avantages de l’approche MVVM avec Angular

1. Clarté : La séparation claire des responsabilités rend le code plus lisible, facilitant le debuggage.

2. Testabilité : Chaque couche peut être testée indépendamment, améliorant la couverture de test. Les composants et services Angular sont naturellement adaptés aux tests unitaires.

3. Réutilisabilité : Les services et composants bien conçus peuvent être réutilisés dans différentes parties de l’application, favorisant le DRY (Don’t Repeat Yourself).

4. Maintenance simplifiée : Les changements dans une couche n’affectent pas directement les autres, ce qui réduit les risques d’introduire des bugs, et améliore l’évolutivité de l’application.

L’architecture MVVM est un modèle éprouvé qui s’intègre parfaitement dans les applications Angular grâce à ses outils natifs comme les composants, services et data bindings. Elle améliore la lisibilité, la maintenabilité et la testabilité des projets, tout en rendant les applications plus robustes.

Adopter MVVM avec Angular, c’est comme embaucher un excellent chef d’orchestre : chaque composant sait quand jouer sa partition, garantissant une harmonie parfaite entre interface utilisateur, données et logique métier.