Le modèle MVVM
Séparez les responsabilités de la vue, du modèle de vue et du modèle.
Le modèle MVVM est une leçon Swift Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Swift Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Swift Academy comprend 4 leçons au total.
Qu’est-ce que MVVM ?
MVVM signifie Modèle-Vue-ViewModel. Il s’agit d’un motif architectural qui sépare votre application en trois couches, chacune ayant une responsabilité clairement définie.
- Modèle — les données et les règles métier
- Vue — ce que voit l’utilisateur
- ViewModel — le pont qui prépare les données du Modèle pour la Vue
L’objectif est la séparation des responsabilités : chaque couche évolue pour sa propre raison, indépendamment des autres.
La couche Modèle
Le Modèle contient vos données brutes et les règles qui les régissent. Il ne sait rien de l’écran ni de la manière dont les éléments sont affichés.
Les modèles sont généralement de simples structures ou objets du domaine. Ils sont faciles à tester, car ils n’ont aucune dépendance envers l’interface utilisateur.
struct User {
let id: UUID
let firstName: String
let lastName: String
let isPremium: Bool
}
struct Order {
let items: [String]
let total: Decimal
}La couche Vue
La Vue est purement dédiée à la présentation. Dans SwiftUI, il s’agit de vos structures View ; dans UIKit, de votre UIViewController et de ses sous-vues.
Une bonne Vue ne contient aucune logique métier. Elle affiche uniquement l’état et transmet les actions de l’utilisateur au ViewModel.
struct ProfileView: View {
@StateObject var viewModel: ProfileViewModel
var body: some View {
VStack {
Text(viewModel.displayName)
if viewModel.showBadge {
Text("Premium")
}
}
}
}La couche ViewModel
Le ViewModel se situe entre le Modèle et la Vue. Il prend les données brutes du Modèle et les transforme en valeurs prêtes à être présentées que la Vue peut afficher directement.
Il expose également des intentions, sous la forme de méthodes que la Vue appelle lorsque l’utilisateur interagit avec elle.
final class ProfileViewModel: ObservableObject {
@Published var displayName: String
@Published var showBadge: Bool
init(user: User) {
displayName = user.firstName + " " + user.lastName
showBadge = user.isPremium
}
}Pourquoi séparer les responsabilités ?
Lorsque la mise en forme, les appels réseau et l’affichage sont tous entremêlés dans un contrôleur de vue, ce fichier devient un bloc massif et impossible à tester.
En séparant les responsabilités :
- Le Modèle peut être réutilisé entre plusieurs écrans
- Le ViewModel peut être testé unitairement sans interface utilisateur
- La Vue reste petite et déclarative
Ce qui relève du Modèle
Placez dans le Modèle :
- Les entités du domaine (
User,Product) - Les règles de validation métier
- Les abstractions de persistance et de réseau, souvent par l’intermédiaire de services appelés par le ViewModel
Ne placez jamais de chaînes destinées à l’interface, de couleurs ou de mise en forme dans le Modèle.
Ce qui relève du ViewModel
Le ViewModel gère la logique de présentation :
- Mettre en forme les dates, les devises et les noms pour créer des chaînes d’affichage
- Déterminer quels états de l’interface sont visibles : chargement, erreur ou absence de contenu
- Coordonner les appels aux services et exposer les résultats
final class CartViewModel: ObservableObject {
@Published var totalText: String = ""
func update(with order: Order) {
let formatter = NumberFormatter()
formatter.numberStyle = .currency
totalText = formatter.string(from: order.total as NSNumber) ?? "-"
}
}Ce qui relève de la Vue
La Vue doit uniquement :
- Disposer et afficher les éléments de l’interface
- Lire l’état publié par le ViewModel
- Transmettre les appuis et les gestes en appelant les méthodes du ViewModel
Si vous trouvez un if qui décide de règles métier dans une Vue, cette logique relève probablement du ViewModel.
Flux de données dans MVVM
Les données circulent dans un sens et les actions dans le sens inverse :
- Modèle -> ViewModel -> Vue pour les données
- Vue -> ViewModel pour les intentions de l’utilisateur
La Vue ne communique jamais directement avec le Modèle. Les dépendances restent ainsi orientées vers l’intérieur, en direction de votre domaine.
MVVM et MVC
Dans le MVC classique, le contrôleur devient souvent énorme, car il prend simultanément en charge la mise en forme, les appels réseau et la liaison avec la vue.
MVVM extrait cette logique de présentation dans le ViewModel, ce qui laisse le contrôleur, ou la Vue SwiftUI, léger. Le ViewModel est indépendant du framework d’interface utilisateur et est donc beaucoup plus facile à tester.
Un module complet
Voici un module MVVM réduit, mais complet, qui relie les différentes couches.
struct Account { let balance: Decimal }
final class AccountViewModel: ObservableObject {
@Published var balanceText: String
init(account: Account) {
balanceText = "$" + "\(account.balance)"
}
}
struct AccountView: View {
@StateObject var viewModel: AccountViewModel
var body: some View { Text(viewModel.balanceText) }
}Vérification rapide
Vérifiez votre compréhension des responsabilités de MVVM.
Récapitulatif
Vous avez découvert les trois couches de MVVM et leurs limites :
- Modèle — données brutes et règles métier, sans interface utilisateur
- ViewModel — logique de présentation et intentions
- Vue — affichage pur de l’état du ViewModel
En séparant ces responsabilités, votre code devient testable, réutilisable et plus facile à comprendre. Vous allez maintenant connecter un ViewModel à une Vue avec des liaisons.
Questions Fréquemment Posées
La leçon « Le modèle MVVM » est-elle gratuite ?
Oui — le texte complet de « Le modèle MVVM » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Swift Academy, passe à CoddyKit PRO. Le cours Swift Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Le modèle MVVM » ?
Séparez les responsabilités de la vue, du modèle de vue et du modèle. Tu pratiques Swift Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Swift Academy ?
Aucune expérience préalable n'est requise. Swift Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Le modèle MVVM » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Swift Academy ?
Oui. Chaque leçon Swift Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.