What architectural patterns do you know, and what are their features?

Short Answer

Architectural patterns are high-level templates that define the structure of an entire application and the interaction of its main parts. Unlike design patterns (GoF), they solve global code organization problems rather than local ones.

The main architectural patterns used in the frontend are:

1. MVC (Model-View-Controller): A classic pattern that divides logic into three components.

   • Model: Data and business logic.
   • View: The user interface (UI).
   • Controller: Handles user input, interacts with the Model, and updates the View. The View and Controller are closely linked.

2. MVP (Model-View-Presenter): A modification of MVC where the Presenter acts as a mediator.

   • Model: Data and business logic.
   • View: A passive UI that only displays data and passes events to the Presenter.
   • Presenter: Manages the View by retrieving data from the Model. The View and Model are completely separate.

3. MVVM (Model-View-ViewModel): A pattern popular in modern frameworks (React, Vue, Angular).

   • Model: Data and business logic.
   • View: A UI that is declaratively linked to the ViewModel.
   • ViewModel: Contains the state and display logic. The connection to the View is automatic through data-binding.

4. MVI (Model-View-Intent): A modern pattern based on the ideas of Unidirectional Data Flow.

   • Model: The single source of truth, representing the application’s state.
   • View: Displays the state and creates “Intents”.
   • Intent: User actions that change the Model’s state.

---

Detailed Answer

1. MVC (Model-View-Controller)

This is one of the oldest patterns and has formed the basis for many others.

• How it works: The user interacts with the View. The View passes actions to the Controller. The Controller updates the Model. The Model notifies the View of changes, and the View updates the UI.
• Features: The View directly depends on the Model. The Controller can manage multiple Views. This leads to tight coupling and complicates testing.
• Example: Early versions of Angular.js, Ruby on Rails.

2. MVP (Model-View-Presenter)

The MVP pattern was created to address the problems of MVC, particularly to improve testability.

• How it works: The user interacts with the View. The View passes events to the Presenter. The Presenter retrieves data from the Model and directly updates the View.
• Features: The View becomes as passive as possible (a “Dumb View”). All display logic resides in the Presenter. This simplifies testing, as the Presenter does not depend on the specific implementation of the View (e.g., the DOM).
• Example: Android applications, old GWT applications.

3. MVVM (Model-View-ViewModel)

This is the most popular pattern in modern frontend development.

• How it works: The View and ViewModel are linked through two-way data binding. When the user changes something in the View, the ViewModel is automatically updated. When data changes in the ViewModel (e.g., after a request to the Model), the View is automatically re-rendered.
• Features: The ViewModel knows nothing about the View. This makes components even more independent and testable. The developer describes what should be displayed, not how to do it.
• Example: React, Vue, Angular, Svelte.

4. MVI (Model-View-Intent)

MVI promotes the ideas of unidirectional data flow and immutable state, which makes the application’s behavior very predictable.

• How it works:
  1. The View displays the Model (state).
  2. The user performs an action, and the View creates an Intent.
  3. The Intent is processed and leads to the creation of a new Model.
  4. The View subscribes to changes in the Model and re-renders.
• Features: A strict unidirectional data flow (the View -> Intent -> Model -> View cycle). This simplifies debugging and state management, especially in complex applications.
• Example: Libraries using Redux or other state-management solutions with a unidirectional flow.

Comparison

Pattern	View-Model Coupling	Main Logic	Testability
MVC	Direct	Controller	Medium
MVP	Via Presenter	Presenter	High
MVVM	Via ViewModel (Data Binding)	ViewModel	High
MVI	Unidirectional Flow	Intent Handlers	Very High