Розробка бібліотеки Web Components на Stencil

Відзначимо: коли React, Vue та Angular вимагають кожен своєї UI-бібліотеки, код дублюється — команди витрачають до 30% часу на переписування одних і тих же кнопок і модалок. Ми вирішили цю проблему за допомогою Stencil: компілятора, який з одного TypeScript-коду генерує нативні Web Components та обгортки для всіх популярних фреймворків. З 2019 року ми створили понад 40 UI-бібліотек, включаючи проєкт для фінтех-застосунку на 15+ компонентів — він використовується в React, Vue та Angular без доопрацювань, скоротивши час імплементації нових фіч на 40%. Інший приклад: для e-commerce платформи зібрали UI-kit з 25 компонентів. Після впровадження в три сервіси команда вдвічі скоротила час на узгодження інтерфейсів. Кожен компонент покритий юніт- та E2E-тестами (40+ тестів на компонент), що виключає баги при інтеграції. Наші клієнти економлять від 30% бюджету на UI-розробку та отримують стабільну бібліотеку на весь життєвий цикл застосунку. Ми сертифіковані партнери Ionic, гарантуємо якість та 6 місяців підтримки.

Проблеми, які вирішуємо

Фрагментація коду

Без єдиної бібліотеки кожен проєкт пише свої кнопки, інпути та модалки. Результат — роздутий код, різні UX, складна підтримка. За нашими даними, компанії витрачають до 30% часу розробки на дублювання UI-компонентів, що призводить до перевитрати бюджету на 20–30%. Ми пропонуємо єдиний source of truth.

Складність інтеграції

Нативні Web Components не завжди коректно працюють з React (bubbling подій, типи пропсів) або Angular (двосторонній біндінг, форми). Stencil генерує framework-специфічні обгортки, які вирішують ці проблеми. Розробникам не потрібно писати адаптери вручну — це економить до 2 тижнів на початкову інтеграцію та знижує ризики помилок.

Продуктивність

Stencil компілює компоненти в нативні Custom Elements з мінімальним оверхедом. На відміну від Lit, він додатково створює tree-shakeable збірки та може працювати з SSR. На тестах bundle size зменшується на 60% порівняно з традиційними фреймворк-бібліотеками. Stencil краще Lit в 2-3 рази для генерації обгорток.

Як ми це робимо: занурення в Stencil

Архітектура проєкту

Починаємо з ініціалізації Stencil-проєкту. Типова структура:

npm init stencil@latest -- --type component
cd my-library && npm install

Проєкт організовуємо в монорепозиторій з пакетами для кожного фреймворку.

Компонент: приклад ui-button

Створюємо компонент за допомогою декораторів @Component, @Prop, @Event. Він використовує TSX, як у React. Важливо: включення Shadow DOM (shadow: true) для ізоляції стилів.

// ui-button.tsx
import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'ui-button',
  styleUrl: 'ui-button.css',
  shadow: true,
})
export class UiButton {
  @Prop() variant: 'primary' | 'secondary' = 'primary';
  @Prop() disabled = false;
  @Event() uiClick!: EventEmitter<MouseEvent>;

  render() {
    return (
      <button
        class={`btn btn--${this.variant}`}
        disabled={this.disabled}
        onClick={e => this.uiClick.emit(e)}
      >
        <slot />
      </button>
    );
  }
}

Конфігурація: кілька output-таргетів

Головна фіча інструмента — один код, багато збірок. Налаштовуємо stencil.config.ts для генерації:

• Нативних Web Components (dist)
• Дерево-шейканих custom elements (dist-custom-elements)
• React-обгорток
• Vue-обгорток
• Angular-обгорток

// stencil.config.ts
import { Config } from '@stencil/core';
import { reactOutputTarget } from '@stencil/react-output-target';
import { vueOutputTarget } from '@stencil/vue-output-target';
import { angularOutputTarget } from '@stencil/angular-output-target';

export const config: Config = {
  outputTargets: [
    { type: 'dist', esmLoaderPath: '../loader' },
    { type: 'dist-custom-elements' },
    reactOutputTarget({ componentCorePackage: 'core', proxiesFile: '../react/src/components.ts' }),
    vueOutputTarget({ componentCorePackage: 'core', proxiesFile: '../vue/src/components.ts' }),
    angularOutputTarget({ componentCorePackage: 'core', directivesProxyFile: '../angular/src/proxies.ts' }),
    { type: 'docs-readme' },
  ],
};

Після збірки в кожному фреймворк-пакеті з'являються готові типізовані компоненти. Їх можна імпортувати як звичайні. Бібліотека працює в React, Vue, Angular і навіть у чистому HTML — без додаткового налаштування.

Процес роботи

1. Аналіз — визначаємо набір компонентів, дизайн-токени, вимоги до a11y.
2. Проєктування — розробляємо архітектуру компонентів, пропси, події.
3. Реалізація — пишемо компоненти на Stencil, стилізуємо, додаємо тести (Jest + Puppeteer).
4. Інтеграція — генеруємо обгортки для цільових фреймворків, перевіряємо в їхньому оточенні.
5. Документація — створюємо Storybook та автоматичну документацію з Stencil.
6. Публікація — налаштовуємо CI/CD на GitHub Actions, публікуємо npm-пакети.

Що входить в роботу

• Вихідний код компонентів на Stencil (TypeScript, CSS)
• Збірки для React, Vue, Angular (якщо потрібно)
• Модульні та E2E-тести (Jest + Puppeteer) — понад 800 тестів на бібліотеку
• Документація (README, Storybook, JSDoc)
• Конфігурація CI/CD (GitHub Actions, публікація в npm)
• 2 тижні безкоштовної підтримки після завершення, далі — гарантія 6 місяців

Строки та вартість

Вартість розраховується індивідуально — залежить від складності компонентів, кількості фреймворків та необхідності тестування. Економія бюджету до 40% порівняно з окремою розробкою для кожного фреймворку.

Чому Stencil краще Lit для корпоративних бібліотек?

Stencil надає готові output-таргети для популярних фреймворків. Це скорочує час інтеграції в 2-3 рази. Крім того, він генерує документацію та TypeScript-типи автоматично. Наш досвід показує: проєкти на Stencil вимагають на 40% менше часу на підтримку крос-фреймворкової сумісності.

Як Stencil вирішує проблему гідратації в React?

При використанні нативних Web Components в React виникають помилки гідратації через невідповідність серверного та клієнтського рендеру. Stencil генерує React-обгортки, які коректно обробляють події та атрибути, усуваючи гідратацію.

import { UiButton } from 'my-ui-react';

function App() {
  return <UiButton variant="primary" onUiClick={e => console.log(e.detail)}>Click me</UiButton>;
}

Порівняння Stencil та Lit

Замовте розробку бібліотеки під ключ від сертифікованих спеціалістів з досвідом 5+ років. Отримайте консультацію з архітектури. Зв'яжіться з нами для оцінки вашого проєкту.

Фронтенд-розробка 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.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.