Stencil vs Lit

Stencil и Lit решают схожую задачу — создание Web Components, — но делают это принципиально разными способами.

Stencil — это компилятор. Он анализирует исходный код, написанный с использованием декораторов, JSX и TypeScript, и на этапе сборки генерирует оптимизированные Web Components. Итоговый результат — чистые стандартизированные Custom Elements без зависимости от Stencil в рантайме.

Lit — это библиотека. Она предоставляет базовый класс (LitElement), систему реактивных свойств и шаблонизацию, работающие напрямую в браузере. Код Lit остаётся частью итогового бандла и выполняется в рантайме.

Ключевое следствие:

  • Stencil смещает сложность в build-time
  • Lit оставляет логику в runtime

Подход к декларативности

Stencil

  • Использует JSX, близкий к React
  • Структура компонента определяется через метод render()
  • JSX компилируется в оптимизированные вызовы h()
  • Поддерживает условный рендеринг и списки на уровне синтаксиса языка
render() {
  return (
    <div class="item">
      {this.active ? <span>Активен</span> : null}
    </div>
  );
}

Lit

  • Использует tagged template literals
  • Шаблон — это строка с встраиваемыми выражениями
  • DOM обновляется диффингом шаблонов
render() {
  return html`
    <div class="item">
      ${this.active ? html`<span>Активен</span>` : ''}
    </div>
  `;
}

Stencil выигрывает в читаемости для разработчиков с React-бэкграундом, Lit — в прозрачности и близости к нативному JavaScript.

Реактивность и управление состоянием

Stencil

  • Реактивность основана на декораторах:

    • @Prop() — внешние свойства
    • @State() — внутреннее состояние

  • Изменение этих значений автоматически вызывает повторный рендер

  • Используется односторонний поток данных

  • Поддерживается отслеживание изменений через @Watch()

@Prop() value: string;
@State() count = 0;

Lit

  • Реактивность основана на объявлении static properties
  • Изменения отслеживаются через setters
  • Можно контролировать обновления, переопределяя shouldUpdate
static properties = {
  value: { type: String },
  count: { state: true }
};

Stencil предлагает более строгую и формализованную модель, Lit — более гибкую и минималистичную.

Производительность и оптимизация

Stencil

  • Генерирует highly-optimized код:

    • lazy-loading компонентов
    • автоматический tree-shaking
    • оптимизация re-render

  • Каждый компонент компилируется в максимально простой Custom Element

  • Отсутствие фреймворка в runtime снижает overhead

Lit

  • Очень лёгкий runtime (~6–8 KB gzip)
  • Использует эффективный DOM diffing
  • Производительность стабильна, но зависит от сложности шаблонов
  • Нет автоматического code splitting — ответственность на сборщике

Stencil лучше подходит для крупных дизайн-систем и библиотек компонентов, Lit — для приложений и отдельных виджетов.

Работа с TypeScript

Stencil

  • TypeScript — основной и обязательный язык
  • Генерация .d.ts для компонентов
  • Автоматическое описание Custom Elements для IDE
  • Строгая типизация props и events

Lit

  • TypeScript опционален
  • Типизация требует дополнительной конфигурации
  • Нет автоматической генерации типов Custom Elements

Stencil обеспечивает более высокий уровень типобезопасности «из коробки».

События и взаимодействие

Stencil

  • Использует декоратор @Event()
  • Генерирует типизированные Custom Events
  • Поддерживает bubbles, composed, cancelable
@Event() valueChange: EventEmitter<string>;

Lit

  • Использует стандартные CustomEvent
  • Типизация ложится на разработчика
  • События создаются вручную
this.dispatchEvent(new CustomEvent('value-change', { detail }));

Stencil минимизирует boilerplate и ошибки конфигурации событий.

Экосистема и tooling

Stencil

  • Встроенный CLI
  • Dev server
  • Testing (Jest, E2E)
  • Hydration для SSR
  • Генерация документации
  • Интеграция с Angular, React, Vue через output targets

Lit

  • Минимальный набор инструментов
  • Использует стандартные сборщики (Vite, Rollup, Webpack)
  • Тестирование — через сторонние библиотеки
  • SSR реализуется отдельно

Stencil ориентирован на корпоративные библиотеки компонентов, Lit — на гибкость и свободу архитектуры.

SSR и гидратация

Stencil

  • Поддерживает server-side rendering
  • Генерирует HTML с гидратационными маркерами
  • Клиентская часть подхватывает готовую разметку
  • Подходит для SEO-критичных проектов

Lit

  • SSR возможен, но требует дополнительной инфраструктуры
  • Гидратация не встроена по умолчанию
  • Чаще используется client-side rendering

Stencil выигрывает в сценариях с жёсткими требованиями к SEO и времени первого рендера.

Порог входа и стиль разработки

Stencil

  • Более высокий порог входа

  • Необходимость понимать:

    • компиляцию
    • декораторы
    • output targets

  • Жёсткие архитектурные рамки

Lit

  • Быстрый старт
  • Минимум абстракций
  • Максимальное следование Web Standards
  • Подходит для небольших команд и одиночных разработчиков

Типичные сценарии использования

Stencil

  • Дизайн-системы
  • UI-библиотеки для нескольких фреймворков
  • Корпоративные компоненты с долгим жизненным циклом
  • Проекты с высокими требованиями к типизации и стабильности API

Lit

  • Веб-приложения
  • Интерактивные виджеты
  • Микрофронтенды
  • Быстрые прототипы и кастомные элементы

Идеологические различия

  • Stencil — это инженерный инструмент, оптимизирующий масштабирование и поддержку
  • Lit — это тонкий слой над стандартами, усиливающий нативные возможности браузера

Stencil диктует архитектуру, Lit её не навязывает.

Оглавление