Что это и что даёт

Глава определяет Smart-компонент, его место среди уровней Framework и границу между компонентом и проектом. Она помогает решить, нужен ли Smart-компонент в конкретном сценарии.

Определение

Smart-компонент — элемент интерфейса в виде собственного HTML-тега (<sf-button>, <sf-datepicker>, <sf-tabs>), который сам загружается, читает свои настройки, хранит своё состояние, перерисовывается при изменениях и сообщает приложению о том, что сделал человек.

Обычный компонент задаёт, как элемент выглядит; Smart-компонент добавляет, как он себя ведёт.

<sf-input size="1" label="Название" placeholder="Введите название"></sf-input>

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

Обычная кнопка задаёт внешний вид, а Smart-кнопка может показать загрузку, заблокироваться и сообщить проекту о результате действия. Пример показывает Smart-кнопку, которую подключает один тег:

<sf-button text="Сохранить" scheme="primary"></sf-button>

Элемент сам управляет своей внутренней разметкой. Проект решает, что именно нужно сохранить, и передаёт результат обратно компоненту.

Место в Framework

Smart-компонент — один из уровней Framework (все уровни — см. Уровни Framework). Он стоит над утилитами и компонентами на классах и под составными Smart-компонентами, которые собраны из других Smart-компонентов (см. Составные компоненты).

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

Что дают Smart-компоненты

• Единая структура и единый вызов. Все компоненты подключаются одинаково, настраиваются по одним правилам имён и сообщают о событиях одинаково.
• Централизованное обновление. Проект ставит тег, а реализация приходит из поставки Framework. Обновление поставки обновляет все включения компонента сразу, без ручной правки каждого проекта.
• Разделение компонента и его использования. Проект описывает, что нужно (тег и настройки); как это сделано — забота Framework.
• Взаимодействие и сценарии. Компоненты сообщают о действиях событиями, принимают данные от приложения и связываются между собой в составных компонентах.
• Машинное описание. У каждого компонента есть манифест — описание, по которому его можно применить, не читая исходный код. Это делает компоненты пригодными для работы с ИИ.

Когда применять, а когда нет

Выбирайте Smart-компонент, когда одной HTML-структуры и CSS недостаточно: поле проверяет ввод, таблица сортирует, список подгружает данные, диалог открывается и возвращает фокус.

Не выбирайте его, когда:

• нужен только внешний вид — используйте класс компонента и утилиты;
• фрагмент встречается один раз и не имеет поведения — достаточно разметки;
• нужно спрятать бизнес-правило проекта — оно остаётся в проекте (см. Граница ответственности).

Граница ответственности

Общая граница Framework и проекта описана в Framework и проект: граница. Для Smart-компонента она означает следующее.

• Компонент владеет своим поведением и своим видом: открыто ли меню, какое значение выбрано, показ загрузки, пустого состояния и ошибки, клавиатура, фокус и доступное имя, событие «человек выбрал значение».
• Проект владеет данными, правами и решениями: корзиной и заказом, запросом к серверу и авторизацией, ролями, решением, что делать с выбранным значением.

Компонент сообщает намерение («человек хочет удалить эти записи»), а приложение решает и отвечает результатом. Правила:

• компонент никогда не выводит право из значения поля, имени роли или отсутствия ошибки;
• компонент не отправляет правку сохранённого документа сам.

Смотрите также

• Уровни Framework — уровни Framework.
• Framework и проект: граница — граница Framework и проекта.
• Составные компоненты — составные компоненты.
• Связь с приложением: порты хоста и намерения — связь с приложением через порты хоста и намерения.