Модель-представление-контроллер (MVC) - один из наиболее распространенных и влиятельных шаблонов в архитектуре программного обеспечения. Несмотря на слухи о смерти MVC, этот шаблон остается полезным для понимания. В этом посте, вместо того чтобы ограничивать различные определения MVC, я расскажу, как он превратился в современные веб-фреймворки, которые мы знаем и любим сегодня.

Зарождение

В 1978 году Трюгве Ренско и Адель Голдберг придумали название Модель-Представление-Контроллер. Трюгве считал, что MVC и его варианты образуют язык шаблонов, общий язык, на котором люди могут говорить о проблемах и их решениях. Концепция языка шаблонов программного обеспечения также повлияла на Банду четырех, написавшую книгу шаблонов дизайна. Если бы MVC был включен в книгу шаблонов проектирования, мы, вероятно, нашли бы его в разделе Шаблон поведения, где встречаются такие шаблоны, как Посредник и Наблюдатель.

Вот ретроспектива Трюгве 2003 года MVC, его прошлое и настоящее. Trygve перечисляет одиннадцать шаблонов, которые образуют язык шаблонов MVC. Только два из них существенно сохранились: Разделение модели / редактора и Разделение ввода / вывода, и я утверждаю, что по сути это одно и то же:

«Роли Представления и Контроллера могут исполняться одним и тем же объектом, когда они очень тесно связаны» - Трюгве Реенско (точка зрения, которая бесконечно обсуждалась в сообществе)

Собственный MVC

В последующие десятилетия MVC пережил Smalltalk и мощные приложения для Mac OS и Windows, поскольку эти системы быстро росли и развивались. Позже, когда начали появляться смартфоны, нативные мобильные приложения для Windows Mobile и ранних версий iOS также полагались на MVC и его варианты. В Microsoft MVC позже превратился в MVVM, который поддерживает такие проекты, как WPF, Silverlight и Xamarin.

Web MVC

В начале 2000-х несколько важных веб-фреймворков приняли язык шаблонов MVC: Spring, Ruby on Rails, PHP и ASP.net. Эти фреймворки добавили новую ответственность за Контроллер: обработку начального HTTP-запроса. Это было примерно так:

Контроллер теперь является точкой входа в приложение, а не представлением. Также изменилась ответственность View: вместо того, чтобы представлять что-то пользователю напрямую и обрабатывать ввод, его задачей было собрать связку HTML, JS и CSS для отображения браузером. HTML / JS будет содержать логику, такую ​​как обработчики нажатия кнопки, которые отправляли бы действие обратно в контроллер через XMLHttpRequest. Обратите внимание, что в браузере нет значительного присутствия шаблона MVC. Это скоро изменится с появлением современных веб-фреймворков.

Современные веб-фреймворки

Когда войны браузеров утихли, у нас наконец-то появились приятные вещи: XMLHttpRequest, стабильный DOM API, ES6 и т.д. ), в отличие от связанных наборов простых веб-страниц. Современные веб-платформы помогают организовать эту растущую сложность на стороне клиента и обеспечить предсказуемость и продуктивность разработки приложений.

Часто эти фреймворки вводили дополнительный этап сборки для создания статических пакетов HTML, JS и CSS для прямого размещения через простой «Контроллер представления» (обычно это обработчик в / или /index.html). Статический характер этих ресурсов означает, что мы можем устанавливать заголовки для управления кешем и полагаться на сети CDN, чтобы обслуживать их с меньшей задержкой. Эти одностраничные приложения включают логику (в JS) для выполнения запросов HTTP API к набору ресурсов, обслуживаемых «контроллерами API», которые обычно отвечают с помощью JSON:

Это подводит нас к сегодняшнему дню: React, Vue и Angular - самые популярные современные веб-фреймворки. Насколько похожи шаблоны организации этих фреймворков на MVC? У всех есть своего рода представление, поэтому любое сравнение нужно будет проводить на следующем уровне: состояние (модель), логика-посредник (контроллер) и синхронизация.

Я собираюсь описать эти фреймворки по наиболее распространенным способам их использования. Я уверен, что кто-то где-то настаивает на сочетании Data-Binding с React, Flux с Angular и картофеля фри с арахисовым маслом.

Vue наиболее прямолинеен: в его документации четко указано, что Vue - это реализация MVVM. Angular по умолчанию тоже MVVM-ish. Однако React был создан из сердца умирающей звезды с использованием супер-паттерна под названием Flux:

Flux - это односторонний поток данных. Напомним, что модель в MVC представляет сохраненные данные, которые будут отображаться в представлении. Flux разделяет обязанности модели MVC; он использует Действия / API для бизнес-логики и Магазин для обработки состояния. Вы можете рассматривать Магазин как одну монолитную пассивную модель для всего приложения.

Почему Flux поддерживает односторонний поток данных? Рассуждения таковы: по мере того, как приложение становится сложнее, становится все труднее управлять изменениями состояния с помощью обновлений представлений, особенно если эти изменения поступают из разных источников. В отличие от Data-Binding, где View наблюдает за изменяемым экземпляром ViewModel для изменения свойств, React создает новый View как функцию неизменяемого состояния / свойств. Представлению никогда не нужно беспокоиться об изменениях локального состояния. Приложение можно изменить, только создав новый экземпляр модели в дереве состояний. Когда React хочет обновить приложение, он заменяет часть своего дерева состояний новым объектом, что запускает создание новых представлений.

Хотя односторонний поток данных - мощная концепция, это не бесплатный ланч-бокс, наполненный серебряными пулями, и он не поднимает React / Flux на другой уровень мощности по сравнению с Angular / Vue.

Надеюсь, это было полезно. Если не полезно, то интересно. Если не интересно ... ну, это в прошлом, а прошлое неизменно; возможно, вам стоит заменить себя новым функционально сгенерированным неизменяемым экземпляром, который принимает более правильные решения о том, какие статьи читать =).