Внедрение Shoelace Web Components в дизайн-систему
Написание UI-компонентов с нуля — дорогое удовольствие. Каждая кнопка, инпут или диалог требует проектирования, вёрстки, тестирования на доступность и кросс-браузерность. Если проект живёт в нескольких фреймворках (React, Vue, Angular), трудоёмкость растёт линейно. Shoelace (теперь Web Awesome) решает эту проблему: готовая библиотека из 50+ Web Components, не привязанная к фреймворку. Она кастомизируется через CSS-переменные и части, поддерживает тёмную тему и соответствует стандартам WCAG.
Наша команда внедряет Shoelace с 2019 года. За это время мы реализовали 30+ проектов — от стартапов до enterprise-систем. Ниже разберём, как интеграция Shoelace ускоряет разработку в 3–5 раз и почему это выгоднее кастомной разработки.
Почему Shoelace сокращает время разработки в 3–5 раз?
Сравним: написать один компонент «Select» с нуля — 3–5 дней с учётом тестирования и a11y. Shoelace даёт готовый <sl-select> с поддержкой клавиатуры, ARIA-атрибутов и тёмной темы. Вам остаётся лишь переопределить цвета под бренд через CSS-переменные. Итог: 2–4 дня на всю библиотеку вместо 2–3 месяцев на свою.
Сравнение затрат:
| Характеристика | Свои компоненты | Shoelace |
|---|---|---|
| Время разработки (50 компонентов) | 2–3 месяца | 2–4 дня |
| Количество компонентов | 10–20 | 50+ |
| Доступность (a11y) | Требует отдельной работы | Встроенная (WCAG 2.1 AA) |
| Поддержка тем | Нужно реализовывать | Встроенная CSS-переменными |
| Обновления и багфиксы | Самостоятельно | Сообщество и авторы |
| Стоимость владения за год | Высокая | $0 (бесплатная лицензия) |
Экономия на разработке превышает 60% уже на первом проекте. Переход на Shoelace окупается за счёт сокращения времени разработки и снижения затрат на поддержку.
Как интегрировать Shoelace с React?
Интеграция Shoelace с React требует минимум кода:
- Установите пакет:
npm install @shoelace-style/shoelace - Зарегистрируйте необходимые компоненты в отдельном файле (например,
shoelace-setup.ts). Мы используем cherry-pick импорт с tree-shaking, чтобы уменьшить бандл в 10 раз по сравнению с полным импортом. - Импортируйте тему и настройте путь к ассетам.
Пример типизированного React-компонента модального окна:
import { useRef } from 'react' import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js' import '../shoelace-setup' export function ContactModal() { const dialogRef = useRef<SlDialog>(null) const openDialog = () => dialogRef.current?.show() const closeDialog = () => dialogRef.current?.hide() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // обработка формы closeDialog() } return ( <> <sl-button variant="primary" onClick={openDialog}> Написать нам </sl-button> <sl-dialog ref={dialogRef} label="Контактная форма"> <form onSubmit={handleSubmit}> <sl-input label="Имя" required placeholder="Иван Иванов" style={{ marginBottom: '16px' }} /> <sl-input label="Email" type="email" required placeholder="[email protected]" style={{ marginBottom: '16px' }} /> <sl-textarea label="Сообщение" rows={4} required /> </form> <sl-button slot="footer" variant="default" onClick={closeDialog}>Отмена</sl-button> <sl-button slot="footer" variant="primary" type="submit">Отправить</sl-button> </sl-dialog> </> ) } Для типизации JSX добавьте декларации модулей для всех компонентов. Это можно сгенерировать через custom-elements.json, поставляемый с библиотекой.
Кастомизация под ваш бренд
Shoelace построен на дизайн-токенах. Вы переопределяете цвета, шрифты, радиусы и другие переменные CSS — и вся библиотека меняет внешний вид. Для точечной стилизации используйте CSS-части (::part()). Мы также подготавливаем для команды гайд по стилизации с примерами.
/* Глобальные токены */ :root { --sl-color-primary-600: hsl(262, 75%, 45%); --sl-font-sans: 'Inter', system-ui, sans-serif; --sl-border-radius-medium: 8px; --sl-transition-medium: 200ms ease; } /* Стилизация отдельной кнопки */ sl-button::part(base) { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } sl-button[variant="primary"]::part(base) { background: linear-gradient(135deg, #7000ff, #b600ff); border: none; } Тёмная тема — за 5 минут
Переключение темы реализуется добавлением класса sl-theme-dark или sl-theme-light на <html>. Мы подключаем сохранённую тему из localStorage и учитываем prefers-color-scheme. Весь код инициализации занимает 10 строк.
Подробнее о темизации — в официальной документации Shoelace: https://shoelace.style/getting-started/themes
Процесс внедрения
| Этап | Длительность |
|---|---|
| Анализ дизайн-системы и требований | 1–2 дня |
| Настройка Shoelace и cherry-pick импорт | 1 день |
| Кастомизация под бренд (CSS-переменные, parts) | 1–2 дня |
| Интеграция с React/Vue и тестирование | 1–2 дня |
| Документация и обучение команды | 1 день |
| Поддержка и гарантия | в течение месяца |
Что входит в работу
- Настройка Shoelace с cherry-pick импортом (tree-shaking) — размер бандла уменьшается в 10 раз.
- Кастомизация всех компонентов под вашу дизайн-систему.
- Интеграция с используемым фреймворком (React, Vue, Angular).
- Поддержка тёмной и светлой темы.
- Документация по использованию и кастомизации.
- Обучение команды (2–3 часа).
- Гарантия совместимости и бесплатные обновления в течение месяца.
Типичные ошибки и как их избежать
- Импорт всей библиотеки вместо cherry-pick — увеличивает бандл в 10 раз.
- Игнорирование CSS-переменных — точечная стилизация через parts без токенов приводит к дублированию кода.
- Отсутствие типов TypeScript — без деклараций компоненты не будут работать в JSX.
Мы подготовили чек-лист интеграции, который передадим вам после аудита.
Закажите консультацию — мы проанализируем вашу дизайн-систему и предложим план внедрения Shoelace с расчётом экономии. Получите бесплатный аудит текущего UI и оценку сокращения времени разработки. Экономьте ресурсы — используйте готовые компоненты.