UI Patterns

UI patterns define how user interface code is structured — specifically how the view layer communicates with business logic and data. Getting this right prevents the classic problem of business logic scattered inside button click handlers.

Pattern Index

#	Pattern	Description	Best For
01	Forms and Controls	Structuring form state, validation, and submissions	Data-entry UIs, admin dashboards
02	MVC — Model View Controller	Controller mediates user actions to model updates	Web frameworks, desktop GUIs
03	MVP — Model View Presenter	Presenter handles all view logic; view is passive	Android, testable UIs
04	MVVM — Model View ViewModel	ViewModel exposes observable state; view binds to it	React, Vue, WPF, data-driven UIs

How to Navigate

If you are choosing a pattern for a new project, a short decision guide:

• Building a Vue or React reactive frontend → MVVM

• Need a fully testable presenter layer without a real DOM → MVP

• Working with a server-side rendered framework (Django, Rails, Express) → MVC

• Focused on form-heavy data entry with complex validation → Forms and Controls

Relationship to Application Patterns

UI patterns describe the view tier in isolation. They sit on top of the application patterns described in the application-patterns/ directory:

UI Pattern (View layer)
  └── Application Pattern (Use case / service layer)
        └── System Pattern (Infrastructure / deployment)

An MVVM ViewModel calls an application service. That service follows Layered, Onion, or Ports & Adapters architecture internally. The choice of one layer's pattern is independent of the other layers.