Впровадження 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 та оцінку скорочення часу розробки. Економте ресурси — використовуйте готові компоненти.
Фронтенд-розробка React: від аудиту до production
Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.
Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.
Чому Next.js — стандартний вибір для SEO?
React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.
Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.
Як TypeScript запобігає багам у продакшені?
TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.
Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.
Vue 3 + Nuxt 3 — альтернативний стек для SSR
Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.
Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.
Продуктивність: метрики та інструменти
Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.
Динамічні імпорти для важких компонентів:
const RichEditor = dynamic(() => import('@/components/RichEditor'), {
ssr: false,
loading: () => <EditorSkeleton />,
});
Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.
Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.
State management: без овериніжирингу
Для більшості додатків достатньо:
-
React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
-
Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
-
React Hook Form — для форм
Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.
CSS та дизайн-система
Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки.
React DevTools Profiler — офіційний інструмент від команди React.
Тестування
| Рівень |
Інструмент |
Що тестуємо |
| Unit |
Vitest |
Утиліти, хуки, чисті функції |
| Component |
Testing Library |
Рендер, взаємодії |
| E2E |
Playwright |
Критичні користувацькі флоу |
| Visual |
Chromatic (Storybook) |
Регресія UI |
E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.
Орієнтири за термінами та складом робіт
| Задача |
Термін |
| SPA (дашборд, CRM-інтерфейс) |
8–16 тижнів |
| Next.js сайт з SSR/ISR |
6–14 тижнів |
| Frontend для існуючого API |
4–10 тижнів |
| Компонентна бібліотека |
6–12 тижнів |
Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.
Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.
У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.
Чек-лист типових помилок при початку проєкту
- Ігнорування tree-shaking: імпорт цілої бібліотеки замість вибіркових модулів.
- Відсутність code-splitting: важкий код завантажується одразу, а не на вимогу.
- Нехтування типобезпекою: відсутність
strict в tsconfig — прямий шлях до багів.
- Надмірна мемоізація:
useMemo та useCallback там, де вони не потрібні.
- Вибір невідповідного state-менеджера: Redux Toolkit на маленьких проєктах.
Який стек обрати для фронтенд-розробки React?
Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.
Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.
