react-js-ui-library v0.1.0

Библиотека UI-компонентов

Разработать и поддерживать компоненты это далеко не просто, даже если это простой компонент Кнопка. Компонент может иметь большую вариативность, т. е. его внешний вид может по-разному меняться, например, в зависимости от места его размещения или доступного пространства. Компонент может отображаться на разных устройствах, и пользователи могут использовать разные программы (браузеры или скрин-ридеры). Компоненты должны быть доступны разным пользователям. Все эти условия могут приводить к тому, что реализация компонента становится сложной и приходится учитывать множество состояний. Если пытаться учесть всю эту логику и состояния в одном компоненте, то компонент превращается в один большой монолит со множеством настроек (свойств). Такой компонент очень тяжело спроектировать, поддерживать, тестировать и исправлять ошибки по ряду причин и это нужно учитывать: настройки компонента могут конфликтовать между собой и они не всегда нужны. Разобраться в логике такого компонента тяжело и со временем разработчики начнут "боятся" его, а без должного внимания (рефакторинг) такой компонент станет неоптимальным и сильно потеряет в производительности. У разработчика появится соблазн написать новый компонент, тем самым породив дублирование кода и логики.

На рынке уже существует большое количество, но многие компании разрабатывают свои собственные библиотеки UI-компонентов. В чём же проблема? Зачем нужна еще одна библиотека? У готовых решений есть свои проблемы:

• компоненты в этих библиотеках являются монолитами;
• невозможно выразить дизайн продукта, адаптировать компоненты под имеющийся у компании дизайн;
• отсутствие необходимой функциональности, не хватает API для расширения.

Чтобы компонент не превратился в монолит, из-всего выше сказанного, при разработке компонента нужно придерживаться принципа декомпозиции. Этого можно добиться используя React Hooks.

Логику компонента нужно разделить на составляющие: дизайн и функциональность. HTML-разметка остаётся в компоненте, а логика работы, логика изменения состояний и генерация css-стилей оформляется в виде отдельных хуков.

Ссылки:

• Создание универсальной UI-библиотеки

Как запустить проект

Для запуска проекта потребуется Node.js. Откройте терминал в любой директории на вашей локальной машине и выполните следующие команды:

git clone https://github.com/mansurg/ui-library.git
cd ui-library
npm i
npm start