UI Architectural Patterns

UI architectural patterns separate concerns between data (Model), presentation (View), and interaction logic (Translator component).

Common Layers

All UI architectural patterns share the following layers:

• Model: Interfaces data access and holds business logic
• View: Presents UI content to the user and receives user input

Each pattern has a translator component that handles interaction between the model and the view (e.g., controller, presenter, view-model).

Legend

• Italic: Definition / About
• Bold: Theorem / Property
• Standard: Procedure / Example / Cheatsheet

Patterns

• MVC (Model View Controller)
• MVP (Model View Presenter)
• MVVM (Model View ViewModel)
• MVVM-C (Model View ViewModel Controller)
• VIPER
• MVC-C (Model View Controller Coordinator) — Variant with navigation coordinator

Core Components

• Model
• View
  • Passive View
  • Active View
• Translator Component
  • Controller — MVC, MVC-C
  • Presenter — MVP, VIPER
  • ViewModel — MVVM, MVVM-C
  • Coordinator — MVVM-C, MVC-C