В последние годы произошел заметный сдвиг в подходе разработчиков к библиотекам пользовательского интерфейса: они отказались от установки целых библиотек компонентов через пакеты npm и перешли к прямому копированию кода в свою кодовую базу.

Эту тенденцию во многом популяризировал Shadcn/UI, библиотека, которая предоставляет разработчикам готовые настраиваемые компоненты, которые можно копировать непосредственно в проект для максимальной гибкости.

Зачем копировать выигрыши для сложных компонентов

Подход копирования и вставки хорош, особенно для сложных элементов пользовательского интерфейса, таких как страницы аутентификации, подробные информационные панели или сложные визуализации данных. Эти компоненты требуют тонкой настройки, которую сложно достичь с помощью неизменяемых пакетов npm.

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

Вместо длинных и сложных селекторов CSS вы можете напрямую применять стили к элементам в компоненте. Вместо внедрения компонентов с использованием сложной логики внедрения зависимостей вы просто размещаете или переставляете компоненты по своему усмотрению.

Интерактивный график Shadcnui на Bit Platform

Этот подход приобрел еще большее значение с появлением помощников по программированию на базе искусственного интеллекта. Вместо того, чтобы создавать компоненты с нуля с помощью искусственного интеллекта с длинными и сложными подсказками или вести длительную беседу с помощником, вы можете начать с заранее созданной композиции, близкой к тому, что вам нужно.

Встраивая код в свой проект, вы предоставляете ИИ-помощнику конкретный, осязаемый контекст. Отсюда вы можете попросить его внести дополнительные изменения, такие как настройка стилей, добавление специальных возможностей или изменение макета.

Битовые компоненты: пакеты, которые вы можете редактировать напрямую.

Bit представила в мире веб-разработки новую сущность: Bit Component. Короче говоря, битовый компонент можно рассматривать как суперпакет. Вы можете поделиться им, установить, скопировать и даже совместно работать над ним независимо от какой-либо конкретной настройки проекта.

Для простоты мы можем разделить компоненты пользовательского интерфейса на две группы: компоненты системы проектирования и компоненты блоков. В дизайн-системе базовые компоненты, такие как Card, являются фундаментальными строительными блоками. Между тем, блочные компоненты, такие как MediaCard, состоят из элементов системы дизайна, но предлагают более расширенную функциональность.

Выбор 1: Компоновка с использованием компонентов системы дизайна

При создании нового компонента первый вариант — использовать его из вашей дизайн-системы. Например, чтобы создать собственную карточку, вам может потребоваться объединить такие компоненты, как «Карточка», «Кнопка» и «Типографика».

Компоненты на основе MUI, доступные на платформе Bit Platform

Эти компоненты можно установить в ваш проект с помощью npm, pnpm, Yarn или установки Bit:

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

Вариант 2: использование блочных компонентов

Выбирая готовый блочный компонент, у вас есть несколько гибких вариантов, помимо простой установки.

Самый простой способ — напрямую установить пакет компонента и использовать его API. Этот подход хорошо работает, если компонент сразу же соответствует вашим потребностям или требует лишь незначительных настроек.

Для сценариев, когда вам необходимо внести значительные изменения, команда Bit fork позволяет скопировать полный код компонента в ваш проект. Сюда входят исходные файлы, зависимости и конфигурации (включая инструменты разработки компонента).

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

Например, чтобы скопировать компонент MediaCard и его конфигурацию, мы запустим bit fork и передадим его идентификатор компонента (а не имя пакета) в качестве аргумента:

bit fork learnbit-react.material-ui-blocks/content/media-card

Стоит отметить, что Bit также предоставляет команду битового импорта, которая позволяет вносить изменения в компонент и выпускать новую версию. Для этого параметра требуются соответствующие разрешения на изменение компонента (в отличие от команды bit fork, которая не влияет на исходный компонент).

Извлечение исходных файлов зависимостей

При создании компонентов с зависимостями Bit для удобства автоматически устанавливает их. Однако если вам нужен прямой доступ к исходному коду зависимости, вы также можете разветвить эти зависимости.

Например, если вы хотите скопировать компонент Button, вы также можете создать его форк из коллекции вашей команды на Bit Platform:

bit fork bitdesign.material-ui/inputs/button