Какие архитектурные паттерны вы знаете и в чём их особенности?

Краткий ответ

Архитектурные паттерны — это высокоуровневые шаблоны, которые определяют структуру всего приложения и взаимодействие его основных частей. В отличие от паттернов проектирования (GoF), они решают не локальные, а глобальные задачи организации кода.

Основные архитектурные паттерны, используемые во фронтенде:

1. MVC (Model-View-Controller): Классический паттерн, разделяющий логику на три компонента.

   • Model (Модель): Данные и бизнес-логика.
   • View (Представление): Пользовательский интерфейс (UI).
   • Controller (Контроллер): Обрабатывает ввод пользователя, взаимодействует с Моделью и обновляет Представление. View и Controller тесно связаны.

2. MVP (Model-View-Presenter): Модификация MVC, где Presenter выступает посредником.

   • Model (Модель): Данные и бизнес-логика.
   • View (Представление): Пассивный UI, который только отображает данные и передаёт события Presenter’у.
   • Presenter (Представитель): Управляет View, получая данные из Модели. View и Model полностью разделены.

3. MVVM (Model-View-ViewModel): Паттерн, популярный в современных фреймворках (React, Vue, Angular).

   • Model (Модель): Данные и бизнес-логика.
   • View (Представление): UI, который декларативно связан с ViewModel.
   • ViewModel (Модель Представления): Содержит состояние и логику отображения. Связь с View автоматическая через data-binding (привязку данных).

4. MVI (Model-View-Intent): Современный паттерн, основанный на идеях однонаправленного потока данных (Unidirectional Data Flow).

   • Model (Модель): Единственный источник истины, представляет состояние приложения.
   • View (Представление): Отображает состояние и создаёт «намерения» (Intents).
   • Intent (Намерение): Действия пользователя, которые изменяют состояние Модели.

---

Развернутый ответ

1. MVC (Model-View-Controller)

Это один из старейших паттернов, который лёг в основу многих других.

• Как работает: Пользователь взаимодействует с View. View передаёт действия Контроллеру. Контроллер обновляет Модель. Модель уведомляет View об изменениях, и View обновляет UI.
• Особенность: View напрямую зависит от Модели. Контроллер может управлять несколькими View. Это приводит к сильной связанности и усложняет тестирование.
• Пример: Ранние версии Angular.js, Ruby on Rails.

2. MVP (Model-View-Presenter)

Паттерн MVP был создан для решения проблем MVC, в частности, для улучшения тестируемости.

• Как работает: Пользователь взаимодействует с View. View передаёт события Presenter’у. Presenter получает данные из Модели и напрямую обновляет View.
• Особенность: View становится максимально пассивным (Dumb View). Вся логика отображения находится в Presenter’е. Это упрощает тестирование, так как Presenter не зависит от конкретной реализации View (например, DOM).
• Пример: Приложения на Android, старые GWT-приложения.

3. MVVM (Model-View-ViewModel)

Самый популярный паттерн в современном фронтенде.

• Как работает: View и ViewModel связаны через двустороннюю привязку данных (two-way data binding). Когда пользователь что-то меняет в View, ViewModel автоматически обновляется. Когда данные меняются в ViewModel (например, после запроса к Модели), View автоматически перерисовывается.
• Особенность: ViewModel ничего не знает о View. Это делает компоненты ещё более независимыми и тестируемыми. Разработчик описывает, что должно отображаться, а не как это делать.
• Пример: React, Vue, Angular, Svelte.

4. MVI (Model-View-Intent)

MVI продвигает идеи однонаправленного потока данных и неизменяемого состояния (immutable state), что делает поведение приложения очень предсказуемым.

• Как работает:
  1. View отображает Model (состояние).
  2. Пользователь совершает действие, View создаёт Intent (намерение).
  3. Intent обрабатывается и приводит к созданию новой Модели.
  4. View подписывается на изменения Модели и перерисовывается.
• Особенность: Строгий однонаправленный поток данных (цикл View -> Intent -> Model -> View). Это упрощает отладку и управление состоянием, особенно в сложных приложениях.
• Пример: Библиотеки, использующие Redux или другие state-management решения с однонаправленным потоком.

Сравнение

Паттерн	Связь View и Model	Основная логика	Тестируемость
MVC	Прямая	Контроллер	Средняя
MVP	Через Presenter	Presenter	Высокая
MVVM	Через ViewModel (Data Binding)	ViewModel	Высокая
MVI	Однонаправленный поток	Обработчики Intent’ов	Очень высокая