Wzorzec MVVM
Oddzielanie odpowiedzialności widoku, view modelu i modelu.
Wzorzec MVVM to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.
Czym jest MVVM?
MVVM oznacza Model-Widok-ViewModel. Jest to wzorzec architektoniczny, który dzieli aplikację na trzy warstwy, z których każda ma jedno jasno określone zadanie.
- Model — dane i reguły biznesowe
- Widok — to, co widzi użytkownik
- ViewModel — warstwa pośrednia przygotowująca dane Modelu dla Widoku
Celem jest separacja odpowiedzialności: każda warstwa zmienia się z własnego powodu, niezależnie od pozostałych.
Warstwa Modelu
Model przechowuje surowe dane oraz reguły, które nimi rządzą. Nie wie nic o ekranie ani o sposobie wyświetlania danych.
Modele są zwykle prostymi strukturami lub obiektami domenowymi. Łatwo je testować, ponieważ nie mają zależności od interfejsu użytkownika.
struct User {
let id: UUID
let firstName: String
let lastName: String
let isPremium: Bool
}
struct Order {
let items: [String]
let total: Decimal
}Warstwa Widoku
Widok służy wyłącznie do prezentacji. W SwiftUI są to struktury View, a w UIKit — UIViewController wraz z jego widokami podrzędnymi.
Dobry Widok nie zawiera logiki biznesowej. Jedynie renderuje stan i przekazuje działania użytkownika do ViewModelu.
struct ProfileView: View {
@StateObject var viewModel: ProfileViewModel
var body: some View {
VStack {
Text(viewModel.displayName)
if viewModel.showBadge {
Text("Premium")
}
}
}
}Warstwa ViewModelu
ViewModel znajduje się pomiędzy Modelem a Widokiem. Pobiera surowe dane Modelu i przekształca je w wartości gotowe do prezentacji, które Widok może bezpośrednio wyświetlić.
Udostępnia również intencje (metody), które Widok wywołuje podczas interakcji użytkownika.
final class ProfileViewModel: ObservableObject {
@Published var displayName: String
@Published var showBadge: Bool
init(user: User) {
displayName = user.firstName + " " + user.lastName
showBadge = user.isPremium
}
}Dlaczego należy rozdzielać odpowiedzialności?
Gdy formatowanie, komunikacja sieciowa i renderowanie są wymieszane w kontrolerze widoku, plik ten staje się ogromnym, niemożliwym do przetestowania blokiem.
Rozdzielenie odpowiedzialności sprawia, że:
- Model można ponownie wykorzystywać na różnych ekranach
- ViewModel można testować jednostkowo bez interfejsu użytkownika
- Widok pozostaje niewielki i deklaratywny
Co należy umieścić w Modelu
W Modelu należy umieścić:
- Encje domenowe (
User,Product) - Reguły walidacji biznesowej
- Abstrakcje utrwalania danych i komunikacji sieciowej (często za pośrednictwem usług wywoływanych przez ViewModel)
Nigdy nie należy umieszczać w Modelu napisów interfejsu użytkownika, kolorów ani formatowania.
Co należy umieścić w ViewModelu
ViewModel obsługuje logikę prezentacji:
- Formatowanie dat, walut i nazw do postaci napisów wyświetlanych użytkownikowi
- Decydowanie, które stany interfejsu użytkownika są widoczne (ładowanie, błąd, pusty stan)
- Koordynowanie wywołań usług i udostępnianie wyników
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) ?? "-"
}
}Co należy umieścić w Widoku
Widok powinien jedynie:
- Układać i renderować elementy interfejsu użytkownika
- Odczytywać opublikowany stan z ViewModelu
- Przekazywać stuknięcia i gesty przez wywoływanie metod ViewModelu
Jeśli w Widoku znajduje się if decydujący o regułach biznesowych, ta logika prawdopodobnie należy do ViewModelu.
Przepływ danych w MVVM
Przepływ danych odbywa się w jednym kierunku, a akcji — w przeciwnym:
- Model -> ViewModel -> View w przypadku danych
- View -> ViewModel w przypadku intencji użytkownika
Widok nigdy nie komunikuje się bezpośrednio z Modelem. Dzięki temu zależności są skierowane do wewnątrz, w stronę domeny.
MVVM a MVC
W klasycznym MVC kontroler często rozrasta się do ogromnych rozmiarów, ponieważ jednocześnie odpowiada za formatowanie, komunikację sieciową i obsługę widoku.
MVVM wyodrębnia tę logikę prezentacji do ViewModelu, pozostawiając kontroler (lub Widok SwiftUI) niewielkim. ViewModel jest niezależny od frameworka interfejsu użytkownika, dlatego znacznie łatwiej go testować.
Kompletny fragment
Oto niewielki, ale kompletny fragment MVVM łączący wszystkie warstwy.
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) }
}Szybkie sprawdzenie
Sprawdź swoją wiedzę o odpowiedzialnościach poszczególnych warstw MVVM.
Podsumowanie
Poznano trzy warstwy MVVM oraz granice między nimi:
- Model — surowe dane i reguły biznesowe, bez interfejsu użytkownika
- ViewModel — logika prezentacji i intencje
- Widok — czyste renderowanie stanu ViewModelu
Rozdzielenie tych odpowiedzialności sprawia, że kod można testować i ponownie wykorzystywać oraz łatwiej go zrozumieć. Następnie ViewModel zostanie połączony z Widokiem za pomocą wiązań.
Często zadawane pytania
Czy lekcja „Wzorzec MVVM” jest bezpłatna?
Tak — pełny tekst „Wzorzec MVVM” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wzorzec MVVM”?
Oddzielanie odpowiedzialności widoku, view modelu i modelu. Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Swift Academy?
Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Wzorzec MVVM”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?
Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.