Gea: компилируемый
реактивный UI-фреймворк

Что такое Gea?

Gea — это компилируемый реактивный UI-фреймворк для JavaScript, который полностью устраняет виртуальный DOM. Вместо diffing'а на этапе выполнения, плагин Gea для Vite анализирует ваш JSX во время сборки, отслеживает каждый доступ к состоянию и генерирует хирургические DOM-патчи — код, обновляющий только те узлы DOM, которые зависят от изменившегося состояния. Никакой сверки, никаких накладных расходов рантайма.

Создан Армаганом Амкаларом (известным в JavaScript-сообществе как dashersw). Gea — третье поколение его фреймворков. Предыдущие: tartJS (фреймворк, лежавший в основе первого в мире SPA для электронной коммерции) и erste (современная версия для мобильных приложений в Cordova). Версия 1.3.0 вышла в июне 2026 года.

Написание компонентов в Gea

Ключевая идея: JavaScript достаточен. Вам не нужно изучать новые примитивы — просто пишите обычные классы.

Компонент-счётчик

Вот полностью рабочий компонент счётчика в Gea:

class Counter extends Component {
  count = 0

  increment() { this.count++ }
  decrement() { this.count-- }

  template() {
    return (
      <div class="counter">
        <span>{this.count}</span>
        <button click={this.increment}>+</button>
        <button click={this.decrement}>-</button>
      </div>
    )
  }
}

Это всё. Состояние — свойство класса. Методы мутируют его напрямую. Шаблон его читает. this.count++ запускает обновление DOM. Никаких useState, сигналов или массивов зависимостей. Просто класс JavaScript.

Компилятор отслеживает, что this.count используется внутри JSX-шаблона. Когда count меняется, генерируется патч, обновляющий только <span> со значением — не весь компонент и не виртуальное DOM-поддерево.

Общее состояние через Store

Для состояния, разделяемого между компонентами, Gea предоставляет Store — базовый класс с Proxy-обёрткой:

class CounterStore extends Store {
  count = 0

  increment() { this.count++ }
  decrement() { this.count-- }
}

Хранилища работают так же, как локальное состояние компонента: обычные свойства, обычные методы. Proxy-обёртка перехватывает доступ к свойствам, чтобы компилятор мог отслеживать зависимости и запускать обновления при изменениях. Массивы перехватываются на уровне методов — push, splice, sort и другие мутирующие методы генерируют точные события изменений.

Вычисляемые геттеры

Вычисляемые значения — это обычные JavaScript-геттеры:

class TodoStore extends Store {
  items = []

  get activeCount() {
    return this.items.filter(i => !i.done).length
  }

  get completedCount() {
    return this.items.filter(i => i.done).length
  }
}

Компилятор распознаёт геттеры, зависящие от свойств хранилища, и пересчитывает их автоматически при изменении зависимостей. Явная мемоизация не требуется.

Функциональные компоненты

Gea также поддерживает функциональные компоненты для простых случаев:

function Greeting({ name }) {
  return <h1>Привет, {name}!</h1>
}

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

Магия — и производительность — исходит от плагина Gea для Vite, работающего на этапе сборки:

1. Анализ JSX: Плагин парсит каждый JSX-шаблон и определяет все выражения, ссылающиеся на свойства компонента или хранилища.
2. Граф зависимостей: Для каждого выражения компилятор строит граф зависимостей, отображающий узлы DOM на источники состояния.
3. Генерация патчей: На этапе сборки компилятор генерирует JavaScript, напрямую обновляющий узлы DOM при изменении их зависимостей — через textContent, setAttribute или вставку/удаление элементов.
4. Устранение рантайма: В hello-world сборке рантайм фреймворка полностью исчезает из бандла. Каждая манипуляция с DOM — прямая.

Это фундаментально отличается от подхода виртуального DOM, используемого React и Vue. Вместо перерендера виртуального дерева и сверки с предыдущей версией компилятор Gea генерирует код: "когда свойство X меняется, обнови DOM-узел Y". Никакой сверки и согласования — только прямая DOM-хирургия.

Бенчмарки: как Gea выглядит на фоне других

Цифры впечатляют. Рассмотрим два набора данных: hello-world (доказывает, что компилятор может исчезнуть) и реальное todo-приложение (доказывает, что рантайм остаётся лёгким, когда приложение действительно работает).

Размер hello-world

Измерения из свежих production-сборок Vite 8.0.10, только JavaScript-активы. React, Vue и Svelte использовали эквивалентные минимальные hello-world-компоненты.

Todo-приложение (интерактивное)

CSS был идентичен во всех сборках: 2 711 Б raw, 746 Б brotli.

Результаты js-framework-benchmark

js-framework-benchmark — отраслевой стандарт для измерения производительности UI-фреймворков. Он создаёт таблицу из 1 000 строк, выполняет операции выбора, обновления и перестановки строк, и измеряет время выполнения каждого фреймворка.

Gea набирает 1.02 — в пределах 2% от ручного ванильного JavaScript. Это самый близкий результат, которого добивался какой-либо компилируемый UI-фреймворк.

Встроенные возможности

Клиентский роутер

Встроенные компоненты RouterView и Link с параметрами маршрутов, wildcard'ами и программной навигацией. Роутер подвергается tree-shaking'у — импорт не добавляет лишнего веса, когда роутер не используется.

Gea UI — доступные компоненты

Пакет @geajs/ui предоставляет 35+ доступных UI-примитивов на основе Zag.js: диалоги, меню, подсказки, аккордеоны, комбобоксы и другие. Это headless-компоненты — вы стилизуете их своим CSS, а логика доступности (ARIA-атрибуты, клавиатурная навигация, управление фокусом) обрабатывается автоматически.

Gea Mobile

Построенный на опыте erste (предыдущего мобильного фреймворка Амкалара), Gea Mobile предоставляет навигацию в стиле iOS, обработку жестов, свайп назад и мобильные transition'ы для создания веб-приложений с нативным ощущением в оболочке Cordova/Capacitor.

Gea vs Svelte vs Solid: ландшафт компилируемых фреймворков

Gea vs Svelte

Svelte первым популяризировал подход «скомпилировать лишнее». Однако Svelte всё ещё включает рантайм для реактивности. Gea использует Proxy-хранилища, позволяющие компилятору точнее отслеживать зависимости и устранять практически весь рантайм-код.

• Svelte: компилирует компоненты, но оставляет рантайм реактивности (~8.5 КБ в hello-world)
• Gea: компилирует фреймворк полностью из hot path (121 Б в hello-world)
• Порог входа: Svelte использует свой синтаксис шаблонов; Gea — обычные JS-классы с JSX
• Экосистема: Svelte зрелее (SvelteKit, сообщество); Gea новее, но включает полный инструментарий

Gea vs Solid

• Solid: точная реактивность через явные сигналы (createSignal), без виртуального DOM
• Gea: неявная реактивность через Proxy-классы, без сигналов
• Размер: Solid 3.6 КБ vs Gea 121 Б (hello-world); Solid 5.7 КБ vs Gea 4.9 КБ (todo)
• Бенчмарк: Solid 1.10, Gea 1.03 на js-framework-benchmark

Как начать

Создать новый проект на Gea просто:

npm create gea
cd my-gea-app
npm run dev

Скаффолдер создаёт проект на Vite 8.0 с TypeScript, компиляцией JSX и предварительно настроенным плагином Gea.

Стоит ли использовать Gea?

Gea — genuinely инновационный подход. Компилируемая реактивность демонстрирует результаты, которые казались невозможными год назад. Но, как с любым новым фреймворком, решение зависит от контекста:

Рассмотрите Gea, если:

• Минимальный размер бандла критичен — 121 байт hello-world недостижим для других
• Ваша команда предпочитает обычный JavaScript вместо примитивов фреймворка
• Вы начинаете greenfield-проект и готовы принять риск зрелости фреймворка
• Производительность критична и каждая миллисекунда на счету

Оставайтесь на зрелых фреймворках, если:

• Вам нужно крупное сообщество и экосистема (пул React-разработчиков незаменим для найма)
• Проекту требуется обширная поддержка сторонних библиотек
• Вы строите долгоживущее enterprise-приложение
• Команда уже имеет глубокую экспертизу в React, Vue или Angular

Для большинства проектов зрелые фреймворки остаются правильным выбором. Но Gea представляет реальный шаг вперёд в том, что возможно с компилируемыми UI-фреймворками, и его подход — устранение накладных расходов через компиляторный анализ — вероятно, повлияет на следующее поколение инструментов, независимо от того, будете ли вы использовать его напрямую.

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