Kitap 09 · Yazılım MimarisiSayfa 27 / 48

MVVM

Model-View-ViewModel

Okunuşu: em vi vi em

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

MVVM (Model-View-ViewModel), ekranın durumunu ve eylemlerini ViewModel'in tuttuğu, View'in ona bağlandığı arayüz kalıbıdır; durum değişince arayüz de değişir.

MVVM nedir?

MVVM, Microsoft'ta 2005'te, veri bağlama (data binding) etrafında kurulmuş masaüstü arayüz framework'ü WPF için tanıtıldı. Bir ekranı üç parçaya ayırır. Model veri ve iş mantığıdır. View, XAML ya da bir bileşen şablonu gibi görsel düzendir. ViewModel ise ikisinin arasında durur ve View'in tam olarak ihtiyaç duyduğunu sunar: isLoading ve items gibi özellikler ile refresh gibi komutlar.

Anahtar, bağlamadır. View veriyi arayüz öğelerine elle itmez; bir etiketin ViewModel.title'ı gösterdiğini ve bir düğmenin ViewModel.save'i çalıştırdığını bildirir. ViewModel'in durumu değiştiğinde View kendiliğinden güncellenir, kullanıcı girdisi de ViewModel'e geri akar. ViewModel gerçek ekran hakkında hiçbir şey bilmediği için hiçbir arayüz olmadan birim testi yapılabilir.

Kalıp Windows'un çok ötesine yayıldı. Jetpack'in ViewModel'iyle Android'de önerilen mimaridir, .NET MAUI ve SwiftUI uygulamalarında yaygındır ve reaktif ön yüz framework'lerinin altında da bu fikir yatar: Vue, Knockout ve Angular şablonları bileşen durumuna büyük ölçüde aynı şekilde bağlanır.

Sık yapılan bir yanlış, MVVM ile MVC'nin farklı adlarla aynı şey olduğunu düşünmektir. MVC'de bir controller girdiyi ele alır ve bir view seçer; web'de çoğu zaman sunucuda istek başına çalışır. MVVM'de ise ViewModel, View'in izlediği, uzun ömürlü ve test edilebilir bir ekran modelidir. Büyük ViewModel'ler de her şeyin atıldığı yerlere dönüşebilir; bu yüzden iş mantığı Model'de ya da ayrı servislerde kalmalıdır.

Önemli noktalar

MVVM bir ekranı Model, View ve ViewModel'e ayırır.
ViewModel, View'in ihtiyaç duyduğu durumu ve komutları sunar.
Veri bağlama, durum değiştiğinde View'i otomatik günceller.
ViewModel'ler hiçbir arayüz olmadan birim testinden geçirilebilir.
2005'te WPF ile başladı; bugün Android'de ve .NET'te standarttır.

Örnek

Bir ekranın izlediği ViewModel (Kotlin, Android)kotlin

class OrdersViewModel(private val repo: OrderRepository) : ViewModel() {
    private val _state = MutableStateFlow(OrdersState(isLoading = true))
    val state: StateFlow<OrdersState> = _state          // the View observes this

    fun refresh() = viewModelScope.launch {             // a command the View can call
        _state.value = _state.value.copy(isLoading = true)
        _state.value = OrdersState(isLoading = false, orders = repo.recentOrders())
    }
}

data class OrdersState(val isLoading: Boolean = false, val orders: List<Order> = emptyList())

// In the View (Jetpack Compose):
// val state by viewModel.state.collectAsState()
// if (state.isLoading) LoadingSpinner() else OrderList(state.orders)

Sık sorulan sorular

MVVM ile MVC arasındaki fark nedir?

MVC'de bir controller girdiyi alır ve model ile view'i günceller. MVVM'de ise ViewModel ekranın durumunu ve komutlarını tutar, view de ona bağlanır ve otomatik güncellenir. MVVM veri bağlamaya dayanır; MVC genellikle dayanmaz.

ViewModel nedir?

Bir ekran için veriyi hazırlayan ve desteklediği eylemleri sunan, ekranın nasıl çizildiğine dair hiçbir şey bilmeyen bir nesnedir. Yeniden çizimlerden sağ çıkar ve kendi başına test edilebilir.

React MVVM mi?

Tam olarak değil. React bileşenleri view ile durumu birleştirir ve veri tek yönde akar. Ekran durumunu tutan custom hook'lar ya da store'lar gibi kalıplar ViewModel'e benzer bir rol oynar.

Sık karşılaştırılanlar

MVC vs MVVMMVC uygulamayı model, view ve girdiyi ele alan controller'a ayırır; MVVM ise model ile view arasına bir ViewModel koyar ve onları data binding ile bağlar.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin