Как собрать мастер-компонент. Реальный опыт
Атомарный дизайн и компоненты
Что такое мастер-компоненты
Я обычно объясняю так — мастер-компонент это родитель, который содержит в себе весь набор генов, а его дети-инстансы содержат в себе только определенный набор генов
Самый простой пример:
Когда начинать создавать компоненты?
Компоненты лучше создавать на раннем этапе проектирования, особенно, когда элементы повторяются на нескольких экранах. Дизайн может измениться и пройти через множество итераций, но создав компоненты на раннем этапе, вы сможете сэкономить время для последующих доделок/переделок и для усложнения компонента.
Реальный опыт сборки мастер-компонента
Недавно мы с джуном разбирали что такое мастер-компоненты и как их правильно собрать, чтобы потом не пришлось переделывать.
За основу практического занятия взяли наш MVP продукт, который еще только верстается, но иметь готовую маленькую библиотеку для него нам хочется уже сейчас. Чтобы легко вносить изменения, чтобы легко управлять, чтобы была консистентность и т.д.
Разбираться в мастер-компонентах лучше всего на простых вещах — на кнопках.
Первое, что сделали — собрали со всех экранов нашего MVP продукта всевозможные кнопки, получилось 6 штук.
Упорядочили их и выявили свойства, по которым лучше всего будет собрать свойства компонента (пропсы)
Исходя из представленных кнопок, нарисовали схему пропсов, которые нужно учесть при разработке мастер-компонента
У нас получается 6 пропсов в мастер-компоненте кнопки, это очень много. Думаем, исходя из контекста продукта, какую часть пропсов нужно обязательно прописать в мастере, а какую можно передать уже простым компонентам
Оставляем только два пропса для мастер-компонента, но я знаю, что можно еще уменьшить вариативность мастер-компонента, передав аттрибуты в отдельный мастер-компонент.
При такой логике компонента на первый план выходит мастер-компонент контента, который обернется в мастер-компонент кнопки. Зачем? Атомарный дизайн. В этой схеме не учтено, что .masterContent в свою очередь состоит из атома text (со стилями) и атома icon (компонент со свойством: size). Мы создаем мастер-контент, чтобы на его базе строить другие компоненты, помимо кнопки. Так дизайн-система будет консистентной.
Теперь мы знаем из чего состоит мастер-кнопка. Но из чего же тогда будет состоять просто кнопка?
Компоненты кнопок будут иметь свои пропсы состояний и тем, плюс они будут наследовать пропсы мастер-кнопки и мастер-контента.
Я советую заводить все кнопки вариантами одного компонента, чтобы было легче ими управлять при верстке макетов, не шарясь постоянно в ассетах библиотеки, но это обсуждаемая история.
