MVC против компонентной архитектуры

Как разработчик, имеющий опыт работы с Rails и ванильным JavaScript, но плохо знакомый с React.js, наиболее пугающий переход происходит от архитектуры модель-представление-контроллер к архитектуре компонентов. Этот пост призван помочь тем, кто проходит похожий путь обучения, перейти от мышления в MVC к мышлению в React.

Вот наша дорожная карта:

  1. Зачем использовать шаблон проектирования?
  2. Пример приложения: ZooBook
  3. Архитектура MVC
  4. Компонентная архитектура
  5. Файловая структура
  6. Сравнение кода
  7. Выводы

1. Почему шаблоны проектирования?

Код без шаблона проектирования:

Удачи с этим! Двигаемся дальше.

2. Пример приложения: ZooBook

Для этого проекта я создал простое приложение на JavaScript и jQuery с использованием архитектуры MVC, а мой коллега Сэмми Штайнер построил точно такое же приложение на React. По сути, это Facebook, но вы можете защищать всех каждый день, а не только во время сезона выборов.

3. MVC-архитектура ZooBook

MVC разбивает код на три компонента: модель, представление и контроллер. На гифке ниже показано взаимодействие между ними.

Демонстрация MVC

  1. Контроллер (animalsController) обновляет представление (animalList)
  2. Представление (animalForm) передает данные, введенные пользователем, в контроллер.
  3. Контроллер обновляет модель (животное) изменений на основе ввода пользователя.
  4. Модель уведомляет Контроллер об изменениях, чтобы Контроллер мог обновить представление (animalList).

Компоненты MVC

  1. Модель
    . Модель работает с базой данных и API для вызова и структурирования данных для приложения.
    - Он обрабатывает логику, манипулирование данными и состояние приложения. Он информирует Контроллер о текущем состоянии данных, чтобы Контроллер мог передать эту информацию представлению.
  2. Представление
    . Представление - это пользовательский интерфейс приложения. Это единственное место, где клиенты могут взаимодействовать с программой.
    - Представление принимает данные пользователя, которые передаются контроллеру, чтобы он мог передать их модели. Когда Модель получает данные пользователя, она может изменить состояние приложения и передать новое состояние обратно в Контроллер.
  3. Контроллер
    - Контроллер является промежуточным звеном между моделью и представлением. Он обрабатывает пользовательские данные, которые он получает из представления, и передает их модели, а затем обновляет представление с новым состоянием, которое дает ему модель.

4. Компонентная архитектура ZooBook

В React компоненты действуют как представления на стероидах.

Все компоненты представляют собой визуализированный фрагмент веб-сайта, но они также выполняют работу по поддержанию состояния и логики (без инструмента управления состоянием, такого как Redux). Чтобы создать приложение React, сначала начните с дизайна.

Первое, что вам нужно сделать, это нарисовать рамки вокруг каждого компонента (и подкомпонента) в макете и дать им все имена. Если вы работаете с дизайнером, возможно, он уже это сделал, так что поговорите с ним! Их имена слоев Photoshop могут оказаться именами ваших компонентов React!
- Thinking in React, React.js Docs

Компонент Демонстрация

Имеющиеся у нас слои выполняют следующие роли:

Презентационные компоненты:

  • Приложение: отображает NavBar и ZooContainer.
  • NavBar: отображает ссылки вокруг сайта и заголовок сайта.
  • ZooForm: отображает форму для ввода пользователем.
  • ZooList: отображает контейнер для животных, который нужно добавить в список.
  • Животное: отображает каждое животное в ZooList.

«Умный» компонент (поддерживает состояние):

  • ZooContainer: это особенный слой. Это единственный уровень, который знает о «состоянии» нашего приложения: для наших целей он знает, какие животные должны быть в списке в любое время, и передает эту информацию компонентам ZooList и Animal, чтобы они могли просто сосредоточиться на работе. их правильного рендеринга.
  • ** Обратите внимание, что несколько компонентов могут быть «умными», но разработчики стремятся поддерживать состояние как можно меньшего количества компонентов, потому что это очень быстро становится беспорядочным.

5. Сравнение файловой структуры

Структура файла MVC

Неудивительно, что MVC разбит на три папки. Единственные файлы, с которыми может взаимодействовать клиент, - это файлы просмотра, в то время как файлы модели и контроллера выполняют фоновую работу.

Компонентная файловая структура

Наш код разбит на файлы-контейнеры и компоненты. Обратите внимание, что все файлы компонентов были презентационными, а файл-контейнер - умным компонентом. Дэн Абрамов, создатель Redux, дает некоторые преимущества использования этого подхода в своем сообщении в блоге о презентационных и контейнерных компонентах:

- Лучшее разделение проблем. Вы лучше понимаете свое приложение и свой пользовательский интерфейс, создавая компоненты таким образом.

- Лучшая возможность повторного использования. Вы можете использовать один и тот же презентационный компонент с совершенно разными источниками состояния и превратить их в отдельные компоненты-контейнеры, которые можно будет использовать повторно.

- Компоненты презентации - это, по сути, «палитра» вашего приложения. Вы можете разместить их на одной странице и позволить дизайнеру настроить все их варианты, не затрагивая логику приложения. Вы можете запустить регрессионные тесты снимков экрана на этой странице.

6. Сравнение кода ZooBook

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

MVC: animalsController

Разбивая каждую часть:

  • Render: функция переноса для этого класса animalsController, которая сообщает ему, что отображать при вызове.
  • Форма: создает новую форму животных (представление, в котором отображается наша форма для добавления животных) и добавляет ее в DOM.
  • Отправить: описывает, что произойдет, когда пользователь нажмет кнопку отправки.
  • Ввод: определяет пользовательский ввод, который мы получаем из формы.
  • Модель: создает новое животное (модель, которая определяет, каким будет друг-животное).
  • Список: создает новый список животных (представление, в котором отображаются все наши друзья-животные) и отправляет ему наше новое животное для размещения в DOM.

Компонент: ZooContainer

Разбиваем эти части (обратите внимание, что некоторые из них были псевдокодированы для удобства чтения):

  • Состояние: задает пустые значения для исходного ввода формы и списка животных.
  • Ввод: захватывает вводимые пользователем данные и задает nameInput, разновидностиInput и picInput в состоянии, равные тому, что пользователь вводит.
  • Отправить: когда пользователь отправляет форму, новое животное добавляется в массив животных штата.
  • Визуализация: Визуализация - это часть, которую пользователь видит в DOM. Он показывает два других компонента:
    - ZooForm: Этот презентационный компонент отображает представление формы, чтобы пользователь мог ввести нового друга животного
    - ZooList: Этот презентационный компонент отображает весь список животных.

Параллельно: сравнение кода

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

7. Выводы

При переходе на React с JavaScript вы можете обнаружить, что пишете больше кода, чем привыкли, особенно для небольшого приложения, такого как ZooBook, где мы перешли от использования по существу 4 файлов к 6 и с гораздо более длинным логическим центром. ” Это нормально! Из React docs again:

Хотя это может быть немного больше набора текста, чем вы привыкли, помните, что код читается гораздо больше, чем он написан, и этот модульный, явный код очень легко читать. Когда вы начнете создавать большие библиотеки компонентов, вы оцените эту явность и модульность, а при повторном использовании кода ваши строки кода начнут сокращаться. :)

Источники: