Архитектура MVC

Поскольку современные браузеры становятся все более мощными и обладают богатыми функциями, создание полноценных веб-приложений на JavaScript становится не только возможным, но и становится все более популярным. Судя по тенденциям HTTP Archive , размер развернутого кода JavaScript за год вырос на 45%.

Размер передачи JS и запросы JS

С ростом популярности JavaScript наши клиентские приложения стали намного сложнее, чем раньше. Разработка приложений требует сотрудничества нескольких разработчиков. Написание поддерживаемого и многократно используемого кода имеет решающее значение в новую эпоху веб-приложений. Приложение Chrome с его богатыми функциями на стороне клиента не является исключением.

Шаблоны проектирования важны для написания удобного в сопровождении и многократного использования кода. Шаблон — это многократно используемое решение, которое можно применять к часто возникающим проблемам при разработке программного обеспечения — в нашем случае — при написании приложений Chrome. Мы рекомендуем разработчикам разделить приложение на ряд независимых компонентов, следуя шаблону MVC.

За последние несколько лет был разработан ряд фреймворков JavaScript MVC, таких как backbone.js , ember.js , AngularJS , Sencha , Kendo UI и другие. Хотя все они имеют свои уникальные преимущества, каждый из них следует той или иной форме шаблона MVC с целью побудить разработчиков писать более структурированный код JavaScript.

Обзор шаблона MVC

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

MVC состоит из трех компонентов:

модель-представление-контроллер

Модель

Модель — это место, где хранятся объекты данных приложения. Модель ничего не знает о представлениях и контроллерах. Когда модель меняется, она обычно уведомляет своих наблюдателей о том, что произошло изменение.

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

модель-представление-контроллер

Модель здесь представляет атрибуты, связанные с каждым элементом задачи, такие как описание и статус. Когда создается новый элемент задачи, он сохраняется в экземпляре модели.

Вид

Представление — это то, что отображается пользователям и как они взаимодействуют с приложением. Представление создается с использованием HTML, CSS, JavaScript и часто шаблонов. Эта часть вашего приложения Chrome имеет доступ к DOM.

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

Контроллер

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

В веб-приложении списка дел, когда пользователь проверяет элемент как выполненный, щелчок перенаправляется на контроллер. Контроллер изменяет модель, чтобы пометить элемент как завершенный. Если данные должны быть постоянными, они также выполняют асинхронное сохранение на сервере. При разработке многофункциональных клиентских веб-приложений, таких как приложения Chrome, сохранение данных в локальном хранилище также имеет решающее значение. В этом случае контроллер также обрабатывает сохранение данных в хранилище на стороне клиента, например FileSystem API .

Существует несколько вариантов шаблона проектирования MVC, например MVP (Модель-Представление-Презентатор) и MVVP (Модель-Представление-ViewModel). Даже в самом так называемом шаблоне проектирования MVC существуют некоторые различия между традиционным шаблоном MVC и современной интерпретацией на различных языках программирования. Например, в некоторых платформах на основе MVC представление будет наблюдать за изменениями в моделях, в то время как другие позволят контроллеру обрабатывать обновление представления. Эта статья сосредоточена не на сравнении различных реализаций, а скорее на разделении задач и его важности при написании современных веб-приложений.

Если вы хотите узнать больше, мы рекомендуем онлайн-книгу Адди Османи : Изучение шаблонов проектирования JavaScript .

Подводя итог, можно сказать, что шаблон MVC обеспечивает модульность разработчикам приложений и позволяет:

  • Многоразовый и расширяемый код.
  • Отделение логики представления от бизнес-логики.
  • Разрешить одновременную работу между разработчиками, которые отвечают за разные компоненты (например, уровень пользовательского интерфейса и базовую логику).
  • Легче в обслуживании.

Шаблоны персистентности MVC

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

Модель обеспечивает собственное сохранение — шаблон ActiveRecord.

Шаблон ActiveRecord, популярный как в серверных платформах, таких как Ruby on Rails, так и в клиентских платформах, таких как Backbone.js и ember.js , возлагает ответственность за сохранение данных на саму модель и обычно реализуется через JSON API.

Несколько иной подход к модели, обрабатывающей постоянство, — это введение отдельной концепции API хранилища и адаптера. Магазин, Модель и Адаптер (в некоторых фреймворках он называется Прокси) работают рука об руку. Store — это репозиторий, в котором хранятся загруженные модели, а также предоставляются такие функции, как создание, запрос и фильтрация экземпляров моделей, содержащихся в нем.

Адаптер или прокси-сервер получает запросы из хранилища и преобразует их в соответствующие действия, которые необходимо предпринять в отношении вашего постоянного уровня данных (например, JSON API). Это интересно в дизайне современных веб-приложений, поскольку вы часто взаимодействуете с более чем одним постоянным слоем данных, например с удаленным сервером и локальным хранилищем браузера. Chrome Apps предоставляет как Chrome Storage API , так и API файловой системы HTML 5 для хранения на стороне клиента.

Плюсы:

  • Простой в использовании и понимании.

Минусы:

  • Трудно протестировать, поскольку уровень персистентности «встроен» в иерархию объектов.
  • Сложно заставить разные объекты использовать разные постоянные хранилища (например, API-интерфейсы файловой системы, indexedDB или серверные).
  • Повторное использование модели в других приложениях может привести к конфликтам, например, при совместном использовании одного класса Customer между двумя разными представлениями, при этом каждое представление хочет сохранить в разных местах.

Контроллер делает настойчивость

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

Плюсы:

  • Легче тестировать, контроллеру можно передать макет хранилища данных для написания тестов.
  • Одну и ту же модель можно повторно использовать с несколькими хранилищами данных, просто создав контроллеры с разными хранилищами данных.

Минусы:

  • Код может быть более сложным в обслуживании.

AppController обеспечивает сохранение

В некоторых шаблонах существует контролирующий контроллер, отвечающий за навигацию между одним MVC и другим. Например, AppController решает, что кнопка «Назад» перемещает клиента с экрана редактирования (который содержит виджеты/форматы MVC) на экран настроек.

В шаблоне AppController AppController реагирует на события и изменяет текущий экран приложения, вызывая хранилище данных для загрузки любых необходимых моделей и создания всех соответствующих представлений и контроллеров для этого экрана.

Плюсы:

  • Перемещает сохраняемый слой еще выше в стеке, где его можно легко изменить.
  • Не загрязняет контроллеры нижнего уровня, такие как DatePickerController, необходимостью знать о постоянстве.

Минусы:

  • Для каждой «страницы/экрана» приложения теперь требуется написать или обновить множество шаблонов: модель, представление, контроллер, AppController.

MVC имеет решающее значение для разработки приложений Chrome. Мы рекомендуем следующие CSP-совместимые платформы MVC для написания безопасных и масштабируемых приложений Chrome:

Полезные ресурсы

В сети

Книги

,

Поскольку современные браузеры становятся все более мощными и обладают богатыми функциями, создание полноценных веб-приложений на JavaScript становится не только возможным, но и становится все более популярным. Судя по тенденциям HTTP Archive , размер развернутого кода JavaScript за год вырос на 45%.

Размер передачи JS и запросы JS

С ростом популярности JavaScript наши клиентские приложения стали намного сложнее, чем раньше. Разработка приложений требует сотрудничества нескольких разработчиков. Написание поддерживаемого и многократно используемого кода имеет решающее значение в новую эпоху веб-приложений. Приложение Chrome с его богатыми функциями на стороне клиента не является исключением.

Шаблоны проектирования важны для написания удобного в сопровождении и многократного использования кода. Шаблон — это многократно используемое решение, которое можно применять к часто возникающим проблемам при разработке программного обеспечения — в нашем случае — при написании приложений Chrome. Мы рекомендуем разработчикам разделить приложение на ряд независимых компонентов, следуя шаблону MVC.

За последние несколько лет был разработан ряд фреймворков JavaScript MVC, таких как backbone.js , ember.js , AngularJS , Sencha , Kendo UI и другие. Хотя все они имеют свои уникальные преимущества, каждый из них следует той или иной форме шаблона MVC с целью побудить разработчиков писать более структурированный код JavaScript.

Обзор шаблона MVC

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

MVC состоит из трех компонентов:

модель-представление-контроллер

Модель

Модель — это место, где хранятся объекты данных приложения. Модель ничего не знает о представлениях и контроллерах. Когда модель меняется, она обычно уведомляет своих наблюдателей о том, что произошло изменение.

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

модель-представление-контроллер

Модель здесь представляет атрибуты, связанные с каждым элементом задачи, такие как описание и статус. Когда создается новый элемент задачи, он сохраняется в экземпляре модели.

Вид

Представление — это то, что отображается пользователям и как они взаимодействуют с приложением. Представление создается с использованием HTML, CSS, JavaScript и часто шаблонов. Эта часть вашего приложения Chrome имеет доступ к DOM.

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

Контроллер

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

В веб-приложении списка дел, когда пользователь проверяет элемент как выполненный, щелчок перенаправляется на контроллер. Контроллер изменяет модель, чтобы пометить элемент как завершенный. Если данные должны быть постоянными, они также выполняют асинхронное сохранение на сервере. При разработке многофункциональных клиентских веб-приложений, таких как приложения Chrome, сохранение данных в локальном хранилище также имеет решающее значение. В этом случае контроллер также обрабатывает сохранение данных в хранилище на стороне клиента, например FileSystem API .

Существует несколько вариантов шаблона проектирования MVC, например MVP (Модель-Представление-Презентатор) и MVVP (Модель-Представление-ViewModel). Даже в самом так называемом шаблоне проектирования MVC существуют некоторые различия между традиционным шаблоном MVC и современной интерпретацией на различных языках программирования. Например, в некоторых платформах на основе MVC представление будет наблюдать за изменениями в моделях, в то время как другие позволят контроллеру обрабатывать обновление представления. Эта статья сосредоточена не на сравнении различных реализаций, а скорее на разделении задач и его важности при написании современных веб-приложений.

Если вы хотите узнать больше, мы рекомендуем онлайн-книгу Адди Османи : Изучение шаблонов проектирования JavaScript .

Подводя итог, можно сказать, что шаблон MVC обеспечивает модульность разработчикам приложений и позволяет:

  • Многоразовый и расширяемый код.
  • Отделение логики представления от бизнес-логики.
  • Разрешить одновременную работу между разработчиками, которые отвечают за разные компоненты (например, уровень пользовательского интерфейса и базовую логику).
  • Легче в обслуживании.

Шаблоны персистентности MVC

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

Модель обеспечивает собственное сохранение — шаблон ActiveRecord.

Шаблон ActiveRecord, популярный как в серверных платформах, таких как Ruby on Rails, так и в клиентских платформах, таких как Backbone.js и ember.js , возлагает ответственность за сохранение данных на саму модель и обычно реализуется через JSON API.

Несколько иной подход к модели, обрабатывающей постоянство, — это введение отдельной концепции API хранилища и адаптера. Магазин, Модель и Адаптер (в некоторых фреймворках он называется Прокси) работают рука об руку. Store — это репозиторий, в котором хранятся загруженные модели, а также предоставляются такие функции, как создание, запрос и фильтрация экземпляров моделей, содержащихся в нем.

Адаптер или прокси-сервер получает запросы из хранилища и преобразует их в соответствующие действия, которые необходимо предпринять в отношении вашего постоянного уровня данных (например, JSON API). Это интересно в дизайне современных веб-приложений, поскольку вы часто взаимодействуете с более чем одним постоянным слоем данных, например с удаленным сервером и локальным хранилищем браузера. Chrome Apps предоставляет как Chrome Storage API , так и API файловой системы HTML 5 для хранения на стороне клиента.

Плюсы:

  • Простой в использовании и понимании.

Минусы:

  • Трудно протестировать, поскольку уровень персистентности «встроен» в иерархию объектов.
  • Сложно заставить разные объекты использовать разные постоянные хранилища (например, API-интерфейсы файловой системы, indexedDB или серверные).
  • Повторное использование модели в других приложениях может привести к конфликтам, например, при совместном использовании одного класса Customer между двумя разными представлениями, при этом каждое представление хочет сохранить в разных местах.

Контроллер делает настойчивость

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

Плюсы:

  • Легче тестировать, контроллеру можно передать макет хранилища данных для написания тестов.
  • Одну и ту же модель можно повторно использовать с несколькими хранилищами данных, просто создав контроллеры с разными хранилищами данных.

Минусы:

  • Код может быть более сложным в обслуживании.

AppController обеспечивает сохранение

В некоторых шаблонах существует контролирующий контроллер, отвечающий за навигацию между одним MVC и другим. Например, AppController решает, что кнопка «Назад» перемещает клиента с экрана редактирования (который содержит виджеты/форматы MVC) на экран настроек.

В шаблоне AppController AppController реагирует на события и изменяет текущий экран приложения, вызывая хранилище данных для загрузки любых необходимых моделей и создания всех соответствующих представлений и контроллеров для этого экрана.

Плюсы:

  • Перемещает сохраняемый слой еще выше в стеке, где его можно легко изменить.
  • Не загрязняет контроллеры нижнего уровня, такие как DatePickerController, необходимостью знать о постоянстве.

Минусы:

  • Для каждой «страницы/экрана» приложения теперь требуется написать или обновить множество шаблонов: модель, представление, контроллер, AppController.

MVC имеет решающее значение для разработки приложений Chrome. Мы рекомендуем следующие CSP-совместимые платформы MVC для написания безопасных и масштабируемых приложений Chrome:

Полезные ресурсы

В сети

Книги