Начало работы
- Для разделения зон ответственности компонентов в вашем приложении, рекомендуется выделить для компонентов, создающихся с помощью инструментов Hyperion отдельный слой
ui - Пример рекомендованной структуры
ui:
Все компоненты в Hyperion являются модульными и расширяемыми, поэтому сборка одного компонента будет представлять собой настройку нескольких частей по отдельности и последующую их связку между собой. По умолчанию Hyperion не предоставляет готовые компоненты, так как его цель - стандартизация и упрощение процесса их сборки. Вы сможете использовать инструменты из Hyperion чтобы с минимальными затратами собрать любой компонент для своих нужд.
Все части для сборки компонентов находятся в ui-parts. Среди частей можно найти компоненты, контейнеры, стили и другие utility модули.
Все стили в Hyperion подразделяются на 3 базовые категории:
-
base - стили, подготавливающие базу для кастомизации будущего компонента. Например, сброс базовых стилей у элемента
button, или добавлениеoverflow: hiddenдля контейнера. - shape - стили, отвечающие за форму компонента. Например, размер шрифта, border radius, border width, heigth или width.
- appearance - стили, отвечающие за внешний вид компонента. Здесь не должно быть стилей, влияющих на форму компонента. Например, в стилях appearance могут находиться background color, цвет шрифта, border color, box shadow и прочее.
Прототипы - это готовые ui компоненты, собранные на базе инструментов Hyperion. Их можно найти в ui-proto.
Прототипы можно использовать как пример создания нужного компонента, чтобы вам было проще освоится в Hyperion.
Также, если у вас нет нужды в детальной настройке ваших компонентов, вы можете установить прототипы из ui-proto как зависимость в ваш проект и использовать компоненты оттуда напрямую.
Hyperion предоставляет генераторы для определённых пакетов. Все генераторы можно найти в generators.
С их помощью можно автоматизировать часть процессов при разработке ui-компонентов. Генераторы используются только при разработке, и имеют директиву bin в своём package.json. Вы сможете без проблем использовать генератор сразу после его установки себе на проект, используя cli вашего пакетного менеджера (npm/yarn).
Старайтесь не помещать никакой бизнес-логики в ui-компоненты. Используйте их только для конфигурации отображения тех или иных элементов системы
Также, старайтесь минимизировать описание логики отображения элементов за пределами ui. В противном случае, это приведёт к ухудшению читабельности вашего кода. Цель ui - сократить использование таких приёмов в конечной вёрстке проекта, объединив их под понятные каждому разработчику абстракции, которые в случае чего можно легко конфигурировать и расширять.
Все компоненты в Hyperion так или иначе наследуют принципы SOLID. Проектируя свои компоненты придерживаясь этих принципов, вы сможете избежать дальнейших рефакторов на проекте, а так же запросто обновляться на новые версии зависимостей Hyperion с течением времени, без необходимости вносить ломающие обратную совместимость изменения на своём проекте.
Используется semver
Добавить сюда детали из старой конвенции, приложить ссылки