MVVM (Model‑View‑ViewModel)

MVVM (ang. Model‑View‑ViewModel) – wzorzec architektury oprogramowania, wykorzystywany głównie przy tworzeniu interfejsów użytkownika. Został opracowany przez Microsoft w 2005 roku jako rozszerzenie wzorca MVC (Model‑View‑Controller) i jest powszechnie stosowany w technologiach takich jak WPF, Silverlight, Xamarin, UWP oraz w niektórych frameworkach JavaScript (np. KnockoutJS czy Vue.js).

Historia i geneza

Wzorzec MVVM wyłonił się w kontekście rozwoju platformy WPF, w której tradycyjne podejście MVC napotykało problemy związane z dwukierunkowym wiązaniem danych (data binding). John Gossman zaproponował nową strukturę, w której warstwa prezentacji została podzielona na dwie odrębne części: View oraz ViewModel. Dzięki temu możliwe stało się pełne wykorzystanie mechanizmu wiązania danych bez konieczności ingerencji w kod interfejsu użytkownika.

Składniki wzorca

• Model – warstwa domenowa i logika biznesowa, niezależna od interfejsu użytkownika. Zawiera klasy reprezentujące dane (np. encje bazodanowe) oraz reguły biznesowe.
• View – warstwa prezentacji, czyli czysty interfejs użytkownika (XAML, HTML, itp.). Nie zawiera logiki aplikacji; jego zadaniem jest jedynie wyświetlanie danych i przekazywanie zdarzeń do ViewModelu.
• ViewModel – pośrednik pomiędzy Modelem a View. Odpowiada za przygotowanie danych w formacie gotowym do prezentacji, zarządzanie stanem UI oraz obsługę poleceń (komend). Dzięki dwukierunkowemu wiązaniu danych zmiany w ViewModelu automatycznie odzwierciedlają się w View i odwrotnie.

Mechanizm komunikacji

Wzorzec MVVM opiera się na kilku kluczowych mechanizmach:

1. Data Binding – automatyczne łączenie właściwości ViewModelu z elementami interfejsu (np. TextBox.Text z właściwością Name). W WPF i Xamarin dostępne są rozbudowane systemy wiązania.
2. Komendy (Commands) – implementacja interfejsu ICommand, umożliwiająca powiązanie akcji UI (np. kliknięcie przycisku) z metodami w ViewModelu bez konieczności korzystania z kodu w View.
3. Powiadamianie o zmianach (INotifyPropertyChanged) – interfejs, który pozwala ViewModelowi informować View o zmianach w danych, co skutkuje automatycznym odświeżeniem UI.

Zalety i wady

Zalety

• Rozdzielenie logiki biznesowej od warstwy prezentacji, co zwiększa testowalność (jednostkowe testy ViewModeli).
• Ułatwione utrzymanie i rozwój aplikacji dzięki wyraźnemu podziałowi odpowiedzialności.
• Możliwość wykorzystania XAML i dwukierunkowego wiązania danych bez kodu “code‑behind”.
• Wsparcie narzędziowe (np. Visual Studio) umożliwiające podgląd UI w czasie rzeczywistym.

Wady

• Wymaga zrozumienia mechanizmów wiązania i komend, co może zwiększyć początkowy próg wejścia.
• W niektórych prostych aplikacjach wprowadza dodatkową warstwę (ViewModel), co może być postrzegane jako nadmiarowość.
• Nie wszystkie platformy natywnie wspierają dwukierunkowe wiązanie danych – w takich przypadkach konieczne jest ręczne implementowanie komunikacji.

Porównanie z innymi wzorcami

MVVM jest często zestawiany z MVC i MVP:

Wzorzec	Rola kontrolera / prezentera	Więź z View	Typowe zastosowania
MVC	Kontroler przetwarza żądania, aktualizuje Model i wybiera View.	Bezpośrednia – View odwołuje się do Modelu lub otrzymuje dane od Kontrolera.	Strony internetowe (ASP.NET MVC), aplikacje serwerowe.
MVP	Prezentery pośredniczą między Modelem a View, zwykle przy użyciu interfejsów.	Prezentery mają referencję do View (zwykle interfejs).	Aplikacje desktopowe (WinForms), platformy mobilne.
MVVM	ViewModel nie zna View, komunikacja odbywa się przez data binding i komendy.	Dwukierunkowe wiązanie danych – View obserwuje ViewModel.	Aplikacje z bogatym UI (WPF, Xamarin, UWP), niektóre frameworki webowe.

Implementacje i frameworki

W praktyce MVVM jest wykorzystywany w wielu środowiskach:

• Windows Presentation Foundation (WPF) – najpopularniejsze środowisko desktopowe dla systemu Windows używające XAML.
• Silverlight – starsza technologia webowa Microsoftu.
• Xamarin.Forms – pozwala pisać aplikacje mobilne dla Android i iOS z jednym kodem C#.
• Universal Windows Platform (UWP) – aplikacje uniwersalne dla ekosystemu Windows 10/11.
• Angular (w pewnym stopniu) – korzysta z dwukierunkowego wiązania, choć struktura bardziej przypomina MVC.
• KnockoutJS i Vue.js – biblioteki JavaScript z silnym akcentem na MVVM.

Przykład prostego ViewModelu w C#

using System.ComponentModel;
using System.Windows.Input;

public class PersonViewModel : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set
        {
            if (_name != value)
            {
                _name = value;
                OnPropertyChanged(nameof(Name));
            }
        }
    }

    public ICommand GreetCommand { get; }

    public PersonViewModel()
    {
        GreetCommand = new RelayCommand(_ => Greet());
    }

    private void Greet()
    {
        // logika biznesowa, np. wyświetlenie komunikatu
        System.Diagnostics.Debug.WriteLine($"Hello, {Name}!");
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
  

Powyższy kod demonstruje podstawowe elementy ViewModelu: właściwość Name, powiadamianie o zmianach oraz komendę GreetCommand, którą można powiązać z przyciskiem w XAML.

Współczesne trendy

Choć MVVM narodził się w kontekście technologii Microsoftu, jego zasady przeniknęły także do innych środowisk. Coraz częściej w połączeniu z programowaniem reaktywnym (np. ReactiveUI) i wstrzykiwaniem zależności (DI), co jeszcze bardziej upraszcza testowanie i modularność aplikacji.

Bibliografia

• John Gossman, “Introducing Model-View-ViewModel”, prezentacja na Build 2005 (źródło wewnętrzne Microsoft).
• Microsoft Docs, “Data Binding Overview” – opis mechanizmów wiązania w WPF.
• Markus R. “MVVM in Practice”, Springer 2011 – podręcznik o zastosowaniu wzorca w różnych technologiach.