MVC – паттерн разделения приложения на 3 основных компонента: модель (Model), представление (View), контроллер (Controller).

MVC паттерн был впервые описан Трюгве Реенскаугом в 1978 году. Который изначально использовался для построения графических приложений. Со временем этот паттерн перешел и в веб-приложения. Сначала MVC пришел на серверную сторону с такими фреймворками Ruby and Rails и ASP.NET MVC Framework. В конце концов стал применяться и на клиентской части, для управления сложностью и широтой функциональности. На данный момент имеется иерархия моделей на базе MVC: MVC, MVP, MVVM.

MVC иерархия

Основной концепцией MVC являетя разделение обязанностей, то есть модель данных не имеет зависимости от бизнес-логики и логики представления. На клиенте же происходит разделение данных (модель), от логики (контроллер), которая работает с этими данными, и HTML кода (представление), то есть представления.

Стоит заметить, что паттерн имеет некоторые различия в применении в клиентском и серверном приложениях.

MVC шаблон на сервере

Как это выглядит для сервера:

  1. Контроллер обрабатывает запрос;
  2. Контроллер обращается к модели за данными;
  3. Модель получает данные из персистентного хранилища;
  4. Модель отдает данные контроллеру;
  5. Контроллер получает данные от модели;
  6. Контроллер передает данные в представление;
  7. Рендеринг представления и ответ на запрос от клиента.

Отличным примером использования шаблона MVC являются SPA приложения. Далее рассмотрим признаки MVC в типичном SPA приложении.

MVC шаблон клиентского приложения

Клиент:

  1. Произошло событие от пользователя в окне браузера;
  2. Обработка события контроллером;
  3. Контроллер обращается к модели;
  4. Модель запрашивает у сервера данные;
  5. Модель получает данные и передает в контроллер;
  6. Контроллер обрабатывает данные и передает в представление;
  7. Рендеринг и отображение в окне браузера.

Этот вариант реализации MVC подходит для SPA приложений, также существует вариант, с одним отличием, что клиент получает и отображает данные минуя котроллер.

Опишем подробнее каждый из элементов паттерна.

Модель (Model)

Модель содержит в себе данные, с которыми работает пользователь. Существует два типа моделей:

  • Модель предметной области - содержит все данные предметной области, а также операции, API для получения данных и логику работы с этими данными.
  • Модель представления - данные которые передаются компонентом шаблону, для формирования представления.

Контроллер (Controller)

Контроллер является связующей частью между моделью и представлением. Он содержит логику необходимую для представления модели и операций над ней.

Контроллер должен содержать логику:

  • Для подготовки данных для представления
  • Для обновления данных на основе взаимодействия с пользователем

Контроллер не должен:

  • Оперировать с DOM
  • Долгосрочно хранить данные

Представление (View)

View на клиенте отвечает за отображение данных в браузере. Представление содержит в себе разметку и логику для отображения. Тем не менее оно не должно содержать сложную логику, которая должна быть в контроллерах, и логику манипляций с данными, которая относится к модели. Содержание логики в шаблонах допустимо, но очень умеренно.

Заключение

Многие предвещали смерть MVC на стороне клиента, но к концу 2010х снова обрел популярность. Фреймворки Angular и Backbone – яркие его представители, которые подарили MVC вторую жизнь на клиенте. Будет ли MVC на фронтенде таким же популярным в будущем? Можно лишь только гадать.