MVVM - Kasimashi/Systemes-embarques GitHub Wiki

Architecture MVVM (Model - View - ViewModel)

L’architecture MVVM est un modèle de conception principalement utilisé pour les interfaces graphiques (applications desktop, mobiles, web).
Elle vise à séparer l’interface utilisateur de la logique métier grâce à un mécanisme de liaison de données (data binding).

1. Model (Modèle)

Le Model représente les données et la logique métier.

Rôle :

  • Gérer les données
  • Accéder à la base de données ou aux services
  • Appliquer les règles métier

Exemple :

  • Classe User
  • Logique de gestion des utilisateurs

2. View (Vue)

La View correspond à l’interface utilisateur.

Rôle :

  • Afficher les données
  • Déclencher des actions utilisateur (clics, saisies, etc.)
  • Contient peu ou pas de logique

Exemple :

  • Page HTML
  • Interface graphique (mobile ou desktop)

3. ViewModel

Le ViewModel est un pont entre le Model et la View.

Rôle :

  • Récupérer les données du Model
  • Les préparer pour l’affichage
  • Exposer des propriétés observables
  • Contenir la logique de présentation

Exemple :

  • Propriété Users
  • Méthode LoadUsers()

Fonctionnement global

  1. La View est liée au ViewModel (data binding)
  2. L’utilisateur interagit avec la View
  3. La View met à jour le ViewModel automatiquement
  4. Le ViewModel interagit avec le Model
  5. Le Model renvoie les données au ViewModel
  6. La View se met à jour automatiquement via le binding

Différence clé avec MVC

  • La View ne connaît pas le Model directement
  • Le Controller est remplacé par le ViewModel
  • La communication View ↔ ViewModel est souvent automatique
  • Moins de code pour synchroniser les données

Avantages

  • Séparation claire des responsabilités
  • Facilite les tests unitaires
  • Très adapté aux interfaces riches
  • Synchronisation automatique des données

Exemple concret

Dans une application :

  • Model : gestion des produits
  • View : affichage de la liste des produits
  • ViewModel : fournit la liste et gère les actions utilisateur

En résumé :
Le MVVM sépare les données, l’interface et la logique de présentation en utilisant la liaison automatique entre la View et le ViewModel.