MVVM
Model-View-ViewModel
- Pronunciation
- em-vee-vee-EM
In short
MVVM (Model-View-ViewModel) is a UI pattern where a ViewModel holds a screen's state and actions and the View binds to it, so the UI follows state changes.
What is MVVM?
MVVM was introduced at Microsoft in 2005 for WPF, its desktop UI framework built around data binding. It splits a screen into three parts. The Model is the data and business logic. The View is the visual layout, such as XAML or a component template. The ViewModel sits between them and exposes exactly what the View needs: properties such as isLoading and items, and commands such as refresh.
The key is binding. The View doesn't push data into widgets by hand; it declares that a label shows ViewModel.title and a button runs ViewModel.save. When the ViewModel's state changes, the View updates by itself, and user input flows back into the ViewModel. Because the ViewModel knows nothing about the actual screen, it can be unit tested without any UI.
The pattern spread well beyond Windows. It is the recommended architecture on Android with Jetpack's ViewModel, common in .NET MAUI and SwiftUI apps, and the idea underlies reactive front-end frameworks: Vue, Knockout and Angular templates bind to component state in much the same way.
A common misconception is that MVVM and MVC are the same thing with different names. In MVC a controller handles input and picks a view, and on the web it often runs on the server per request. In MVVM the ViewModel is a long-lived, testable model of the screen that the View observes. Large ViewModels can also become dumping grounds, so business logic should stay in the Model or in separate services.
Key takeaways
- MVVM splits a screen into Model, View and ViewModel.
- The ViewModel exposes the state and commands the View needs.
- Data binding updates the View automatically when state changes.
- ViewModels can be unit tested without any user interface.
- It started with WPF in 2005 and is now standard on Android and in .NET.
Example
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)Readers ask
What is the difference between MVVM and MVC?
In MVC, a controller receives input and updates the model and view. In MVVM, the ViewModel holds the screen's state and commands, and the view binds to it and updates automatically. MVVM relies on data binding; MVC usually doesn't.
What is a ViewModel?
An object that prepares data for one screen and exposes the actions it supports, without knowing anything about how the screen is drawn. It survives redraws and can be tested on its own.
Is React MVVM?
Not strictly. React components combine view and state, and data flows one way. Patterns such as custom hooks or stores that hold screen state play a role similar to a ViewModel.
Often compared
See also
- MVCSoftware Architecture, p. 29MVC is an architectural pattern that splits an application into a Model for data and logic, a View for display, and a Controller that handles user input.
- Design PatternSoftware Architecture, p. 13A design pattern is a proven, reusable solution to a common problem in software design, described as a general template rather than as finished code.
- Separation of ConcernsSoftware Architecture, p. 37Separation of concerns is a design principle that divides a program into distinct parts, each responsible for one clearly defined aspect of its behavior.
- State ManagementWeb Development, p. 44State management is how an application stores, updates and shares the data that changes while it runs, and keeps the interface in sync with it.
- Observer PatternSoftware Architecture, p. 31The observer pattern is a behavioral design pattern in which an object, the subject, automatically notifies a list of subscribers whenever its state changes.
- Layered ArchitectureSoftware Architecture, p. 25Layered architecture splits an application into horizontal layers, such as presentation, business logic, and data access, each calling only the layer below it.
Spotted a mistake or something missing on this page?Suggest an edit