Beyond MVC: A Guide to Modern UI Architecture Patterns

This article explores the evolution of user interface architecture patterns, starting with the traditional Model-View-Controller (MVC) pattern and its inherent limitations. It then introduces alternative patterns like Model-View-Presenter (MVP) and Model-View-ViewModel (MVVM), discussing their benefits in terms of testability and separation of concerns. The discussion includes Martin Fowler's perspectives on UI architecture and emphasizes the importance of choosing the right pattern for specific use cases. Each pattern is explained with its components, responsibilities, and practical implications for software development.

2 Minutes reading time

Behold the masterpiece that AI hallucinated while reading this post:

"The Little Architecture That Could: Finding the Perfect Home for Your UI Code"

(after I fed it way too many marketing blogs and memes)

Created using DALL-E 3

AI-Generated: The Little Architecture That Could: Finding the Perfect Home for Your UI Code

Pure MVC

The Model View Controller pattern became a de-facto standard for implementing user interfaces or other kind of interaction with complex systems. Basically it separates the user interface into the following components:

Component

Responsibility

Model

The model contains the data to be presented

View

The view renders the data and is the user interface. The view also reacts to model changes and updates on such an event

Controller

The controller reacts to user commands and invokes business logic, which itself can change the model

See the following diagram taken from Wikipedia to make it clearer:

MVC Process

However, pure MVC has some drawbacks. One drawback is that the model needs to contain both business object and user interface, so things like the name of a person and the disabled or enabled state of the corresponding user interface control. Another drawback is test-ability. Due to the complex data binding and the tight coupling between view, model and controller, such implementations can quickly become hard to test using plain unit testing frameworks.

Alternatives

A good alternative to MVC is the Model View Presenter pattern. It is build using the following components:

Component

Responsibility

Model

The model contains the data to be presented

View

The view renders the data and is the user interface.

Presenter

The presenter binds view and model together and syncs their state. It is a kind of mediator with build in data conversion.

See this picture taken from Wikipedia:

Model View Presenter

Martin Fowler split this pattern into Supervising Controller and Passive View. See a discussion about this topic here: Fowler’s User Interface Patterns .

A benefit of this pattern is that the implementation becomes more explicit and hence increased test-ability.

There are also other patterns available. One is the Model View ViewModel pattern, which is a specialization of the original Model View Presenter pattern, but it might become to complex for simple user interfaces.

It is up to which which pattern you prefer. Please note that you can make some big mistakes by using the wrong user interface architecture, so before you choose, check your alternatives.

Git revision: 2e692ad