Здравствуйте, разработчики полного стека. Веб-интерфейс сегодня нуждается в стиле разработки RAD (быстрая разработка приложений). В рамках своей работы я разрабатывал веб-сайты, в которых реализована загрузка веб-страниц с сервера по требованию (простыми словами). Затем я начал присматриваться к СПА и почувствовал, что это просто потрясающе. Я не хочу делиться с вами этим опытом.

Вы должны понимать, почему одностраничные приложения (SPA) являются сегодня горячей темой. Вместо создания пользовательского интерфейса традиционным способом (запрос веб-страниц), этот дизайн SPA заставляет разработчиков писать код совершенно по-другому. Существует множество фреймворков MVC, таких как AngularJS, Angular2, React JS, Knockout JS, Aurelia и т. д., для быстрой разработки веб-интерфейса, но суть каждого из них довольно проста. Все фреймворки MVC помогают нам реализовать один шаблон проектирования. Этот шаблон проектирования называется «Никаких запросов веб-страниц, только REST API».

Определение структуры пользовательского интерфейса веб-сайта с помощью модели

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

Что на самом деле означает приведенная выше строка? Современная веб-интерфейсная разработка значительно продвинулась с 2010 года. Чтобы использовать функции архитектуры MVC (Model-View-Controller), нам необходимо рассматривать внешний интерфейс как отдельный объект, который общается с серверной частью. только с использованием API (наиболее предпочтительно REST JSON). Независимо от того, используете ли вы двухстороннюю ставку или одностороннюю привязку данных, просто сохраните данные в соответствии с макетом.

Все веб-сайты проходят следующие этапы.

  • Запрос веб-страницы с сервера
  • Аутентификация и отображение пользовательского интерфейса Dashboard
  • Разрешить пользователю изменять и сохранять
  • Запросите столько же веб-страниц с сервера, чтобы показать отдельные страницы на сайте

Но в СПА поток совсем другой.

  • Запросите HTML-шаблон(ы) в браузере за один раз.
  • Затем запросите JSON REST API, чтобы заполнить модель (объект данных).
  • Настройте пользовательский интерфейс в соответствии с данными в модели (JSON).
  • Когда пользователи изменяют пользовательский интерфейс, модель (объект данных) должна изменяться автоматически. Например, в AngularJS это возможно с двусторонней привязкой данных. Наконец, сделайте вызовы REST API, чтобы уведомить сервер об изменениях, когда захотите.

Сохранение всего пользовательского интерфейса в виде модели (объекта JSON) — это действительно хороший дизайн, потому что мы можем четко знать иерархию веб-сайта, глядя на этот объект JSON, а не перемещаясь по веб-страницам.

Насколько ремонтопригоден СПА?

В одностраничных приложениях мы изначально используем фиктивные данные (фиктивные JSON) для разработки пользовательского интерфейса. Изначально мы не пишем код Ajax. В типичном (старом) стиле разработки пользовательского интерфейса выполняются вызовы Ajax с пользовательскими данными в соответствии с взаимодействиями с пользователем.

Но в случае SPA выполняются вызовы Ajax с подмножеством состояния модели (JSON). Это означает, что в любой момент времени просто извлеките некоторые данные из универсального объекта JSON и сделайте запрос API Ajax. Получив любой отзыв от сервера, добавьте этот контент в этот объект модели (JSON). Святой Грааль, состояние вашего пользовательского интерфейса будет соответствующим образом обновлено.

Поскольку имеется единственный источник информации, это ограничивает повторение выборки данных из DOM. Это также помогает нам избавиться от необходимости писать сотни строк кода для манипулирования DOM (например, с помощью Jquery). Меньше кода. Меньше времени на исправление ошибок.

AngularJS способ определения пользовательского интерфейса как модели

Я собираюсь показать образец дизайна и то, как мы можем преобразовать эту структуру пользовательского интерфейса в модель данных. Здесь я использую Angular JS, но любой фреймворк MVC делает то же самое.

Например, предположим, что у нас есть этот пользовательский интерфейс с большим количеством таблиц.

Теперь в AngularJS я определяю состояние для этого следующим образом.

В контроллер мы помещаем некоторые фиктивные данные. Обычно, чтобы отобразить мокап, мы напрямую жестко кодируем данные в HTML. Но здесь мы храним данные в модели. Мы также можем получить данные из API в начале загрузки страницы. Хорошей практикой в ​​Angular JS является использование службы, а не контроллера для предоставления этих универсальных данных. Мы можем использовать эту службу данных в нескольких контроллерах.

Всегда размещайте свои данные в сервисе. Затем привяжите эти данные к элементам HTML с помощью ng-bind. Не используйте Jquery для динамического создания таблиц или добавления каких-либо элементов формы в DOM. Вместо этого используйте список и используйте ng-repeat, чтобы создать повторение. Когда вы удаляете что-то из DOM, просто удалите элемент из списка. Тогда все будет контролироваться состоянием данных. Не по пользовательской логике. Код JQuery многословен и ужасен для декодирования. Я заменил почти 65% своего кода JQuery на 20% кода Angular в своем недавнем проекте. Это поможет другим легко приспособиться к моему коду позже. Используя структуру MVC, мы можем написать чистый код для функциональности пользовательского интерфейса. Одностраничные приложения используют преимущества фреймворков MVC. В приведенном выше примере у нас нет способа ввода сведений, но у нас может быть форма с подробностями (страница, посещения, % новых посещений, доход) для добавления данных в таблицу. addBorderedTableRow — это функция, которая должна быть привязана с помощью ng-click на кнопке сохранения формы.

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

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

Резюме

Это всего лишь фото с высоты 1000 футов. Используя фреймворки MVC, такие как AngularJS или React JS, вы можете повысить производительность. Здесь пользовательский интерфейс общается с сервером только с помощью REST API. Нет загрузки шаблонов при каждом клике пользователя. Весь код для пользовательского интерфейса доставляется в браузер только один раз, и одностраничное приложение позаботится о том, что делать с взаимодействием с пользователем. Он может подождать, пока не будет предоставлен набор деталей, или просто поговорить с сервером и получить ответ. Если у вас есть какие-либо вопросы, просто прокомментируйте или напишите мне в Твиттере.