Сравнение с другими решениями

Atomico — это современная библиотека для создания веб-компонентов на базе стандартов Web Components с реактивным подходом, напоминающим фреймворки вроде React или Vue, но с упором на лёгкость, нативность и модульность. Основные отличия становятся особенно заметны при сравнении с популярными альтернативами.

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

Atomico использует реактивные сигналы, которые позволяют компонентам автоматически обновляться при изменении данных. Сигналы функционируют аналогично useState в React, но без необходимости перерендеривания всего дерева компонентов:

import { component, useState } from "atomico";

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <host>
            <button oncl ick={() => setCount(count + 1)}>
                {count}
            </button>
        </host>
    );
}

Counter = component(Counter);

Сравнение с React и Vue:

  • React требует Virtual DOM для отслеживания изменений, Atomico работает напрямую с DOM.
  • Vue использует реактивность через прокси-объекты, Atomico применяет lightweight-сигналы, что снижает накладные расходы.

Система рендеринга

Atomico применяет концепцию <host> для корневого узла компонента, обеспечивая строгую привязку к Web Components. Это позволяет избегать лишних обёрток и гарантирует полную совместимость со стандартом:

import { html, component } from "atomico";

function MyComponent() {
    return html`
        <host>
            <p>Прямой доступ к shadow DOM и событиям</p>
        </host>
    `;
}

MyComponent = component(MyComponent);

Сравнение с другими фреймворками:

  • React и Vue используют Virtual DOM, что добавляет слой абстракции.
  • Stencil и LitElement также ориентируются на Web Components, но Atomico предлагает более «реактивный» API и меньше шаблонного кода.

Работа с атрибутами и свойствами

В Atomico свойства компонента автоматически синхронизируются с атрибутами HTML. Это обеспечивает нативную интеграцию с DOM и позволяет использовать компоненты как обычные HTML-теги:

function Button({ label = "Нажми" }) {
    return html`<host><button>${label}</button></host>`;
}

Button.props = {
    label: String
};

Button = component(Button);

Сравнение с LitElement и Stencil:

  • LitElement требует явного декорирования свойств через @property.
  • Stencil использует TypeScript-декораторы @Prop().
  • Atomico минимизирует синтаксис и автоматически синхронизирует свойства с атрибутами.

События и коммуникация между компонентами

Atomico поддерживает события с каптуром и bubbling, что делает взаимодействие компонентов предсказуемым и полностью совместимым с DOM API:

function Child() {
    const handleClick = () => dispatch("childClick", { detail: 42 });
    return html`<host><button oncl ick=${handleClick}>Click</button></host>`;
}

Преимущества перед React и Vue:

  • В React события часто оборачиваются в SyntheticEvent, что скрывает детали нативного DOM.
  • Vue использует кастомные события через $emit, что требует явного объявления.
  • Atomico даёт прямой доступ к стандартным событиям DOM.

Поддержка TypeScript и модульность

Atomico изначально проектировался с учётом TypeScript. Все свойства, события и слоты могут быть типизированы, что снижает количество ошибок и улучшает автокомплешн в редакторах:

interface Props {
    label: string;
}

function Button({ label }: Props) {
    return html`<host><button>${label}</button></host>`;
}

Сравнение с React и Vue:

  • React требует отдельного объявления типов для props, часто через generics.
  • Vue поддерживает TypeScript, но интеграция со слотовой системой сложнее.
  • Atomico предоставляет более прямую типизацию с минимальными усилиями.

Размер и производительность

Atomico создаёт минимальный runtime, ориентированный на Web Components. Это снижает общий размер бандла по сравнению с React или Vue:

Библиотека Размер (gzipped) Подход к рендерингу
Atomico ~3 KB Нативный DOM + сигналы
React ~40 KB Virtual DOM
Vue ~33 KB Virtual DOM
LitElement ~5 KB Шаблонный рендеринг

Экосистема и совместимость

Atomico легко интегрируется с любыми веб-стандартами: CSS Custom Properties, Shadow DOM, HTML-слоты, что обеспечивает бесшовную работу в микрофронтендах. В отличие от некоторых фреймворков, компоненты Atomico не зависят от глобального контекста или сложных библиотек.

Ключевые выводы по сравнению с другими решениями:

  • Atomico объединяет реактивность и Web Components без лишнего кода.
  • Минимальный runtime и нативная интеграция с DOM ускоряют работу приложения.
  • Типизация и сигналы делают разработку более предсказуемой и безопасной.
  • Лёгкая совместимость с современными стандартами позволяет использовать Atomico в крупных проектах наряду с другими библиотеками.
Оглавление