Правила взаимодействия компонентов
Стандарт правил взаимодействия (simai.interaction-rules) задаёт, как
любой Smart-компонент — простой или составной — загружается, говорит с
другими компонентами и рисует. Правила действуют по вертикали (составной
компонент и его части) и по горизонтали (компоненты рядом на странице).
Благодаря им новый компонент вписывается в страницу без собственных
соглашений: одно действие человека даёт одну отрисовку, загрузка выглядит
одинаково везде, а сбой одного компонента не роняет остальные.
Стандарт не наследует другие стандарты и относится к компонентам и составным компонентам Framework и пакетов. Страницы продукта, например страницы администрирования, строятся поверх него по стандарту самого продукта.
Действие и отрисовка
| Требование | Уровень | Суть |
|---|---|---|
one-action-one-render |
обязательно | Одно действие человека поднимает не больше одного намерения к хосту и вызывает одну отрисовку того, что оно меняет; дальше — только состояния, через которые запрос проходит (загрузка, затем ответ). Замер после отрисовки пишет стили напрямую и не просит новой отрисовки |
updates-coalesce |
обязательно | Компонент собирает свои обновления в один кадр: изменения свойств в одной задаче — одна отрисовка |
stale-answers-dropped |
обязательно | Ответ на запрос, который уже не последний, отбрасывается по номеру или эпохе и не рисуется; побеждает самый новый запрос |
Как компонент планирует отрисовку, описано в Жизненный цикл; правило о последнем ответе — в Загрузка данных и скелетоны.
Состояния
| Требование | Уровень | Суть |
|---|---|---|
five-states |
обязательно | У каждого запроса компонента пять состояний: загрузка, есть данные, пусто, нет доступа, ошибка — одни и те же слова во всех компонентах и портах |
loading-is-a-skeleton |
обязательно | Загрузка — скелетон итоговой формы компонента, а не текст и не пустой ответ; компонент рождается в загрузке, поэтому его первый кадр — скелетон |
empty-states-by-one-component |
обязательно | Пусто, нет доступа и ошибку рисует sf-empty-state: строкой в списках и меню, блоком на странице; ошибка предлагает повтор |
pending-not-unavailable |
обязательно | Хост, который ещё не готов, держит запрос в ожидании и не отвечает unavailable на «ещё нет». unavailable значит «не удалось», и человеку показывается ошибка |
no-flash-of-wrong-state |
обязательно | Компонент не показывает состояние, в котором не находится: ни «пусто» до первого ответа, ни «недоступно» до того, как названа запись, ни содержимого без оформления до прихода стилей |
Состояния, заготовки до прихода кода и пустые состояния описаны в Состояния и загрузка данных; ожидание хоста — в Порты хоста и намерения.
Связи между компонентами
| Требование | Уровень | Суть |
|---|---|---|
vertical-props-events-port |
обязательно | Составной компонент передаёт частям данные свойствами и атрибутами и слушает их события; часть не обращается вверх к составному компоненту и вбок к соседней части. С хостом говорит только внешний составной компонент — через объявленный порт |
horizontal-through-routes |
обязательно | Компоненты рядом говорят только через объявленные порты композиции и маршруты (simai.interface-fragment) и не ищут друг друга в DOM |
page-state-through-preferences |
обязательно | Состояние, которое принадлежит человеку и касается нескольких компонентов, — настройки вида — идёт через SF.Preferences; через глобальные объекты больше ничего не делится |
По вертикали — Ответственность уровней и Порты хоста и намерения; по горизонтали — Связь компонентов без кода проекта и Фрагменты интерфейса; настройки вида — Персональный вид.
Разметка, ресурсы и геометрия
| Требование | Уровень | Суть |
|---|---|---|
repeats-are-light-markup |
обязательно | То, что повторяется много раз, — ячейки, строки списка, метки в ячейке — рисуется разметкой с классами компонентов Framework, а не Smart-элементом на каждое значение; Smart-элементы — для интерактивного и того, у чего есть состояние |
assets-asked-together |
обязательно | Стили и скрипты, которые понадобятся странице, запрашиваются вместе и один раз; код компонента не обнаруживает свои части по одной во время отрисовки, а ресурс, который уже есть на странице, повторно не запрашивается |
stable-geometry |
обязательно | Ничто не сдвигается под указателем: панель держит ширину независимо от содержимого, список держит высоту строк во время загрузки, а коробка скелетона совпадает с загруженной в пределах одной ступени лестницы |
motion-respects-the-person |
обязательно | При prefers-reduced-motion анимация и пульсация останавливаются: скелетон неподвижен, переход пропускается |
Обычный компонент рядом со Smart-компонентом — Компонент и его Smart-двойник; как Loader собирает загрузку — Как работает Loader; геометрия — Геометрия: стандарт и проверка; движение — Движение.
Сбои и проверки
| Требование | Уровень | Суть |
|---|---|---|
failure-is-contained |
обязательно | Компонент, упавший при отрисовке, сообщает sf-component-error, и его граница показывает состояние ошибки с повтором; остальная страница не страдает |
work-runs-without-a-frame |
обязательно | Работа, которую планирует компонент или Loader, выполняется и там, где кадров анимации нет (фрейм вне видимой области, скрытая вкладка), — по короткому запасному таймеру |
enforced-by-checks |
обязательно | У каждого правила есть проверка в сборке — отрисовки на действие, пять состояний, отсутствие обращений через DOM к другим компонентам, геометрия скелетона, элементы на ячейку, уменьшение движения; компонент, который их не выполняет, не проходит гейт |
Поведение при ошибке — Ошибки и диагностика и Граница фрагмента; браузерные пробы, которыми меряются правила, — Браузерные пробы.
Проверка ручная: автор компонента показывает, чем выполнено каждое требование, а браузерные пробы Framework меряют то, что можно измерить, — число отрисовок на действие, первые кадры без стилей, вес строки таблицы, неизменную ширину панели.
Смотрите также
- Карта стандартов — место стандарта среди остальных.
- Состояния и загрузка данных — состояния, скелетоны и пустые состояния.
- Составные компоненты — связи по вертикали и по горизонтали.
- Качество — поведение при ошибке и проверки Smart-компонентов.