Теперь немного про то как реализовывать дизайн систему на базе UI кита.
Технически это когда вы создаете отдельный пакет, и внутри него делаете
export * from '@materail-ui/core'
и меняете стили и тему UI kit-а на те, которые вам нужны.
Плюсами такого подхода будут все минусы создания с нуля. Но мы говорим о проблемах:
Вам гораздо сложнее заставлять разработчиков следовать правилам вашего дизайна. Потому что API вашего кита абсолютно ничего не знает про ваши правила. Так что придется подстраиваться.
Вы ни в коем случае не должны расширять или переопределять готовое АПИ. То есть если в ките есть только 3 варианта кнопки – вы можете либо использовать эти 3, либо оставить только 2.
Объясняю почему:
Во-первых возникает диссонанс между готовой документацией и тем как ведет себя ваша дизайн система.
А во-вторых если вы пытаетесь манки-патчить готовый кит то вам будет нереально сложно его поддерживать и обновлять в дальнейшем.
Немного объясню что имею ввиду под расширением API: попытка изменить уже готовое поведение к примеру кнопки.
Вместо этого просто сделайте свой собственный новый компонент и используйте его.
Помимо этого вы должны быть готовы к тому что за глобальный оверрайд стилей вы поплатитесь дополнительным бандл-сайзом, потому что стили компонентов никуда не деваются.
@jsunderhood Было бы здорово, если расскажешь как вы работаете с breaking changes при такой кастомизируемости компонентов. Интересно какая стратегия, если у людей после апдейта что-то ломается из-за самих оверрайдов.
Готовьтесь к проблемам с апдейтами twitter.com/blvdmitry/stat…
Это реально огромная проблема, и вас тут не спасут даже codemod скрипты.
Я знаю 2 компании которые используют бутстрап как базу для своих дизайн систем. И не одна из них так и не смогла обновится на 4 версию.
Ну вот собственно и все что мне пришло на ум :)
И кстати мы как раз этот вопрос постараемся порешать в 5 версии material-ui. Мы хотим предоставлять unstyled версию всех компонентов. В двух словах расскажу об этом:
Это API пока в обсуждении, но мы хотим сделать что-то наподобии Angular Material CDK, только для всех компонентов. Как-бы база для построения собственных дизайн систем на базе material-ui.
В идеале было бы отдавать на каждый компонент:
- react hook со всей логикой компонента, который отдает наверх только пропсы для html
- готовые компоненты без стилей, для того чтобы их руками глобально задизайнить без оверрайдов
- ну и как сейчас готовые компоненты к использованию
Такой подход, как по мне, был бы идеален для построения абсолютно любой дизайн системы за вменяемое количество времени и денег :)
Ну а если у вас есть идеи – я с удовольствием их послушаю!