Дизайн системы нового поколения. «Голые» компоненты
Привет, Мир! 🍷
Каждый из нас работает в компаниях со своим брендбуком. У всех разные цвета, шрифты, иконки. Перед разработкой фронтенда у нас всегда встаёт вопрос — как мы будем делать компоненты.
Когда проект не выглядит сложным или это стандартная админка, где дизайн совсем не важен, то всё достаточно просто — берём любимую библиотеку компонентов и собираем интерфейс из того что есть.
Бывают ситуации сложнее, когда готовые решения не очень подходят, а стилизовать компоненты проблематично. Мы обычно сначала пробуем сделать обёртки над компонентами, где все манипуляции прячем внутрь наших компонентов. В самых тяжёлых случаях приходится реализовать собственную библиотеку компонентов.
Знакомо? Думаю каждый сталкивался с такими проблемами, когда постоянно приходится переопределять стили сверху или лезть во внутренности компонента. Как же получить лучшее от двух миров — не писать логику для всех компонентов самому и одновременно легко управлять стилизацией и положением элементов?
Встречайте — «голые компоненты». Суть таких библиотек в том, что они поставляют компоненты с логикой, но без каких-либо стилей. Ещё одна важная особенность таких компонентов — это разделение логики на множество мелких компонентов.
Приведу пример на основе селекта. В большинстве традиционных библиотек компонентов селект делается через один компонент:
Хорошо, если даются слоты для контроля над иконками или лейблом. А если нет? Придётся лезть во внутрь, писать вложенные стили, мучиться со специфичностью селектора.
Голый селект выглядит примерно так:
Каждый компонент это в большинстве случаев один HTML тег. За счёт этого на любой компонент можно навесить сверху классы и не заниматься переопределениями. Это также даёт гибкость в выборе способа стилизации: можно использовать обычные css классы, можно прикрутить Tailwind CSS — можно всё.
«Голые» компоненты набирают всё больше популярности в последнее время, так как это реально очень удобно. Стоит заметить, некоторые традиционные библиотеки уже начали переписывать свои компоненты на «голые». Например, так делает Material UI или Mantine UI.
Давно собираю список «голых» библиотек, слежу за разработкой, поэтому вот мои любимые:
React
Vue
Все они хорошие, все поддерживаются, везде идёт доступность из коробки. В каких-то просто больше функциональности, больше компонентов. Если не знаете что выбрать — то возьмите Radix. Мне он нравится больше всех, именно с него начался такой спрос на эти библиотеки.
Каждый из рассмотренных подходов к компонентах имеет свои плюсы и минусы. Если не важны стили компонента, не так нужен маленький размер бандла — то почему бы и не продолжить использовать традиционные библиотеки компонентов. Когда нужен полный контроль над стилизацией — то, конечно, «голые» библиотеки наш выход.