Компоненты Frontend C3

На предыдущем этапе мы создали Frontend C3 и подготовили тринадцать объектов внешнего контекста. Теперь вернём из единой модели семь компонентов, которые принадлежат контейнеру Frontend. Связи пока оставим скрытыми, чтобы отдельно проверить состав диаграммы.

Добавление семи внутренних компонентов Frontend C3..

Исходный контекст

В начале урока на диаграмме ровно тринадцать объектов окружения. Внутренняя граница Frontend пуста, а все двадцать две зависимости скрыты.

Загрузка изображения...

Исходное состояние точно продолжает результат предыдущего урока

Каталог компонентов

Нажмите Добавить: Компонент. Каталог показывает существующие компоненты ландшафта, которые ещё не видны на этой диаграмме. Использование каталога сохраняет единый объект и не создаёт копию с новым идентификатором.

Загрузка изображения...

Нужные элементы уже принадлежат Frontend в импортированной модели

Веб-контур

Сначала выберите Web single page application, Nginx и Backend. Эти компоненты отвечают за загрузку одностраничного приложения, балансировку и серверное API.

Загрузка изображения...

Клиентское приложение, Nginx и Backend образуют основной веб-контур

Авторизация и пакетная загрузка

Добавьте Auth service и Inventory ETL worker. Первый компонент отвечает за аутентификацию и авторизацию, второй пакетно обновляет каталог и сверяет данные о товарах.

Загрузка изображения...

К веб-контуру добавлены сервис авторизации и пакетный обработчик

Каталог и события

Завершите выбор компонентами eCatalogue и Inventory event worker. Они обновляют электронный каталог по пакетным данным и событиям внешней системы управления запасами.

Загрузка изображения...

Счётчик каталога подтверждает выбор полного внутреннего состава

Добавление на диаграмму

Нажмите Добавить. ArchiVision возвращает все семь элементов одним действием, сохраняет их принадлежность контейнеру Frontend и перестраивает представление.

Загрузка изображения...

Все внутренние элементы находятся внутри границы Frontend

Результат

Frontend C3 содержит все двадцать объектов: тринадцать элементов контекста и семь внутренних компонентов. Связей по-прежнему нет. Это позволяет в следующем уроке последовательно восстановить направления зависимостей и объяснить обобщённые архитектурные наименования.

Загрузка изображения...

Двадцать объектов готовы к восстановлению двадцати двух зависимостей

Таймкоды

• 00:00 - Контекст Frontend "Си три";
• 00:08 - Каталог компонентов;
• 00:18 - Одностраничное приложение;
• 00:35 - Авторизация;
• 00:42 - Электронный каталог;
• 00:53 - Добавление;
• 01:03 - Проверка состава;
• 01:11 - Компоненты готовы.

Предыдущий урок: Структура Frontend C3.

Следующий урок: Связи Frontend C3.