Framework-Agnostic UI компоненты с Web Awesome

Современная frontend-разработка заставляет делать неудобный выбор. Либо привязаться к framework-специфичной библиотеке компонентов, такой как Material UI (React) или Vuetify (Vue), принимая vendor lock-in и проблемы с миграцией — либо создавать кастомные компоненты с нуля, жертвуя скоростью разработки и консистентностью.

В этой статье мы рассмотрим Web Awesome — framework-agnostic UI библиотеку, построенную на нативных Web Components, которая устраняет эту ложную дихотомию. Как преемник Shoelace, она предоставляет production-ready компоненты, которые работают везде, где работает HTML, с мощным API для тематизации, не уступающим framework-специфичным решениям.

Чем Web Awesome отличается от других решений

Нативные Web Components в основе

Web Awesome использует встроенные в браузер custom elements, Shadow DOM и CSS custom properties. В отличие от React или Vue компонентов, они работают напрямую в браузере без транспиляции:

<!-- Работает в любом HTML-файле, не требует сборки -->
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/button/button.js"></script>

<wa-button variant="brand">Click me</wa-button>

Это не просто ещё один слой абстракции — это использование самой платформы. Ваш <wa-button> такой же нативный, как и <button>, с полной инкапсуляцией и оптимизацией браузера.

Истинная framework-agnostic природа

Хотя другие библиотеки заявляют о совместимости с фреймворками через адаптеры, компоненты Web Awesome действительно framework-agnostic. Они работают идентично в React, Vue, Angular, Svelte или vanilla JavaScript:

// React 19+
import '@awesome.me/webawesome/dist/components/input/input.js';

function Form() {
  return <wa-input label="Email" type="email" required />;
}

<!-- Vue 3 -->
<template>
  <wa-input label="Email" type="email" required />
</template>

<script setup>
import '@awesome.me/webawesome/dist/components/input/input.js';
</script>

Никаких обёрток. Никаких адаптеров. Просто HTML-элементы, которые являются кастомными.

Эволюция от Shoelace

Web Awesome строится на фундаменте Shoelace со значительными улучшениями:

• Полноценный CSS-фреймворк: помимо компонентов, Web Awesome включает типографику, лейауты и утилитарные классы
• Улучшенный API тематизации: трёхуровневая система кастомизации (глобальные свойства, свойства компонентов, CSS parts)
• Расширенная библиотека компонентов: дополнена относительно базы Shoelace новыми элементами форм, лейаутами и паттернами
• Интеграция с Font Awesome: опциональные премиум наборы иконок через kit codes

Путь миграции с Shoelace прямолинейный — большинство компонентов имеют схожие API, где префикс sl- заменяется на wa-.

Тематизация без инструментов сборки

Три уровня кастомизации

Система тематизации Web Awesome работает на трёх уровнях, все используют стандартный CSS:

/* 1. Глобальные дизайн-токены */
:root {
  --wa-color-primary-500: #0ea5e9;
  --wa-border-radius-medium: 0.5rem;
  --wa-font-size-base: 16px;
}

/* 2. Свойства, специфичные для компонентов */
wa-button {
  --wa-button-height-medium: 3rem;
  --wa-button-font-weight: 600;
}

/* 3. CSS parts для глубокой кастомизации */
wa-button::part(label) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

Этот подход обеспечивает гибкость тематизации, сравнимую с Bootstrap, без препроцессоров или этапов сборки. Изменения естественным образом каскадируются через дерево компонентов.

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

Ленивая загрузка по умолчанию

Web Components обеспечивают истинную ленивую загрузку на уровне компонентов. Используя autoloader Web Awesome, компоненты загружаются только при использовании:

<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

<!-- Компонент загружается только когда <wa-dialog> появляется в DOM -->
<wa-dialog label="Settings">...</wa-dialog>

Встроенная доступность

Каждый компонент Web Awesome включает правильные ARIA-атрибуты, клавиатурную навигацию и управление фокусом. Shadow DOM гарантирует, что эти реализации не могут быть случайно переопределены:

<!-- Автоматически включает role="button", tabindex, обработчики клавиатуры -->
<wa-button disabled>
  Программы чтения с экрана объявляют это корректно
</wa-button>

Начало работы

Для большинства проектов подход с CDN требует всего двух строк:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

Для production-приложений, использующих npm:

npm install @awesome.me/webawesome

Затем импортируйте только то, что нужно:

import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/card/card.js';
import '@awesome.me/webawesome/dist/components/button/button.js';

Почему UI на основе стандартов важен

Framework-agnostic компоненты, построенные на веб-стандартах, предоставляют уникальные долгосрочные преимущества. Ваши UI-компоненты остаются портируемыми между технологическими стеками, снижая затраты на переписывание при смене фреймворков. Команды могут выбирать разные фреймворки для разных частей приложения без ущерба для консистентности UI.

Самое важное — вы делаете ставку на саму веб-платформу, а не на какую-то конкретную компанию или сообщество. Web Components теперь поддерживаются во всех современных браузерах, со спецификацией, которая вряд ли нарушит обратную совместимость.

Заключение

Для команд, уставших переписывать UI при каждой миграции фреймворка, Web Awesome предлагает устойчивую альтернативу — компоненты, которые работают везде, кастомизируются с помощью CSS и построены на стандартах, которые переживут любой фреймворковый тренд. Выбирая Web Components вместо framework-специфичных решений, вы инвестируете в код, который останется ценным независимо от того, какой фреймворк будет доминировать в завтрашнем ландшафте.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.