# 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](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/01-forms-and-controls) | Structuring form state, validation, and submissions  | Data-entry UIs, admin dashboards |
| 02 | [MVC — Model View Controller](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/02-mvc)       | Controller mediates user actions to model updates    | Web frameworks, desktop GUIs     |
| 03 | [MVP — Model View Presenter](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/03-mvp)        | Presenter handles all view logic; view is passive    | Android, testable UIs            |
| 04 | [MVVM — Model View ViewModel](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/04-mvvm)      | 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](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/04-mvvm)
* Need a **fully testable presenter layer** without a real DOM → [MVP](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/03-mvp)
* Working with a **server-side rendered framework** (Django, Rails, Express) → [MVC](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/02-mvc)
* Focused on **form-heavy data entry** with complex validation → [Forms and Controls](https://blog.htunnthuthu.com/architecture-and-design/architecture-and-patterns/software-architecture-101/ui-patterns/01-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.