Комментарии 6
Спасибо за статью, отличным примером проблемы служит компонент календаря в ui-kit'ах - иногда он включает в себя более 30 разных свойств, которые так или иначе меняют его поведение. Добавление ещё одного свойства может вызывать боль, потому что легко поломать поведение других свойств.
Одно из классных решений, которые я видел - использовать композицию. В том же самом mui, она как раз применяется или более явный пример можно увидеть при использовании фреймворка для редактирования lexical. Если вдруг для вашего проекта нужно специфичное поведение - вы всегда можете его реализовать из базовых блоков. Но у такого подхода тоже есть минус - при обновлении дизайн системы, может понадобится обновить компонент, который в проекте.
Про Cohesion очень хорошо рассказывают в ролике на JS Conf 2018 года
Привет, спасибо за классное дополнение к статье!
Композицию точно можно и нужно использовать. Я в основном пытался раскрыть то, что не стоит бояться больших компонент, которые композиционно состоят из разных кусочков логики (скрываем много разного под одной абстракцией). Про композицию мне ещё нравится подход с хуками примерно как тут. Про подход с композицей нужно помнить одну вещь - чтобы на проекте в куче соседних мест не делали композицию по другому (и везде начиналось разное поведение, пользователи не любят неконсистентность из-за возникающего когнитивного диссонанса). Если возвращаться к истокам, то в таком случае стоит использовать фасад, чтобы потом не страдать в порыве унификации)
Ещё я вдохновлялся докладом про трейдоффы при написании фреймворка от создателя Vue Evan You on Vue.js: Seeking the Balance in Framework Design | JSConf.Asia 2019. Написание компонент тоже часто связано с нахождением подобного баланса
Поздравляю, вы открыли СОЛИД.
Скорее DRY :)
Драй слишком примитивен. Вы же даёте обоснование и принципы рефакторинга отдаленно цитируя солид.
Что компонент делает, какая у него функциональность? - Interface segregation
Не слишком ли много он знает? - SIngle responsibility
Какие есть способы добавлять компоненту поведение, когда он уже существует в продакшене . - open-closed principle
Ну и так далее
Гайд по написанию и рефакторингу компонентов, которые хочется переиспользовать