Symbiite.js 3.x – изоморфные компоненты для UI

Что представляет собой Symbiite.js

Symbiite.js – это библиотека, позволяющая писать UI‑компоненты, которые одинаково работают в браузере и на сервере без необходимости дублирования кода. Основой библиотеки являются нативные веб‑стандарты: Custom Elements, Shadow DOM, HTML Templates и ES‑модули. Благодаря этому разработчики получают полностью изолированные компоненты, совместимые со всеми современными браузерами и легко интегрируемые в любые серверные среды Node.js, Deno или Edge‑фреймворки.

Главная идея Symbiite.js – «симбиотический» подход, когда один и тот же компонент «живет» в двух мирах: в клиентском рендеринге для интерактивности и в серверном рендеринге для SEO и ускоренного первого отрисовывания (SSR). Библиотека управляет жизненным циклом компонента, автоматически переключая контекст выполнения и обеспечивая согласованность состояния между клиентом и сервером.

Ключевые нововведения в версии 3.x

1. Универсальный рендеринг через `render()`‑метод

В версии 3.x введён единый метод render() в базовом классе SymbioteComponent. Он принимает данные и контекст (client/server) и возвращает HTML‑строку или DOM‑узел. На сервере render() вызывается синхронно, генерируя готовый markup, а в браузере – асинхронно, позволяя добавлять интерактивные обработчики после гидратации.

class MyButton extends SymbiiteComponent {
  render({label}, ctx) {
    const btn = document.createElement('button');
    btn.textContent = label;
    if (ctx === 'client') {
      btn.addEventListener('click', () => this.emit('click'));
    }
    return btn;
  }
}

2. Автоматическая гидратация и синхронизация состояния

Новое ядро отслеживает изменения состояния в серверном рендеринге и автоматически «прокидывает» их в клиентскую часть через встроенный механизм Hydration Payload. Это избавляет от необходимости вручную сериализовать свойства в data-* атрибуты. При загрузке страницы браузер читает скрытый JSON‑блок и восстанавливает состояние компонента без лишних запросов.

3. Поддержка реактивных свойств через `@prop`‑декоратор

Для упрощения реактивного программирования введён декоратор @prop. Он автоматически генерирует геттер/сеттер, отслеживает изменения и инициирует перерисовку только затронутой части компонента. Декоратор совместим с TypeScript и сохраняет типизацию.

import { prop } from 'symbiite';

class Counter extends SymbiiteComponent {
  @prop() count = 0;

  render(_, ctx) {
    const el = document.createElement('div');
    el.textContent = `Count: ${this.count}`;
    if (ctx === 'client') {
      el.addEventListener('click', () => this.count++);
    }
    return el;
  }
}

4. Интеграция с популярными серверными фреймворками

Версия 3.x поставляется с адаптерами для Express, Fastify, Koa и NestJS. Адаптеры предоставляют функцию symbiiteMiddleware(), которая автоматически рендерит компоненты в ответе, учитывая роутинг и параметры запроса. Это упрощает построение изоморфных страниц без написания шаблонизаторов.

import express from 'express';
import { symbiiteMiddleware } from 'symbiite/express';
import { HomePage } from './components/HomePage.js';

const app = express();

app.get('/', symbiiteMiddleware(() => new HomePage()));
app.listen(3000);

5. Улучшенный API для асинхронных данных

Для работы с данными, получаемыми из API, введён метод fetchData() с поддержкой Suspense‑подобного поведения. Компонент может объявить зависимость от асинхронного ресурса, а Symbiite.js гарантирует, что серверный рендер будет ждать завершения запроса, а клиент – отобразит «заполнитель» до получения результата.

class NewsList extends SymbiiteComponent {
  async fetchData() {
    return await fetch('/api/news').then(r => r.json());
  }

  async render(_, ctx) {
    const news = await this.fetchData();
    // render list …
  }
}

Архитектурные преимущества изоморфных компонентов

Согласованность UI

Поскольку один и тот же JavaScript‑модуль отвечает за рендеринг в обоих окружениях, вероятность рассинхронизации между сервером и клиентом практически исключена. Это особенно ценно для интерактивных приложений, где состояние меняется часто: каждый пользователь видит единый «источник правды».

SEO и первая отрисовка

SSR‑поддержка позволяет отдавать полностью сформированный HTML, что ускоряет загрузку страницы и улучшает индексацию поисковыми системами. Клиент получает готовый DOM и сразу начинает работу, а не ждёт загрузки и выполнения больших JS‑бандлов.

Модульность и переиспользуемость

Компоненты, построенные на нативных веб‑стандартах, могут быть использованы в любом фреймворке (React, Vue, Svelte) через простую обёртку. Это открывает путь к постепенному внедрению Symbiite.js в существующие проекты без полной миграции.

Минимальный размер бандла

Отказ от виртуального DOM и использование чистого браузерного API позволяет сократить размер JavaScript‑бандла. В типичном случае базовый рантайм Symbiite.js занимает менее 10 KB gzipped, а дополнительные функции (Hydration, адаптеры) – опциональны.

Практический пример: изоморфный чат‑виджет

Рассмотрим небольшое приложение – чат‑виджет, который рендерится на сервере и мгновенно появляется в браузере, а затем подключается к WebSocket‑серверу.

// ChatWidget.js
import { prop, SymbiiteComponent } from 'symbiite';

export class ChatWidget extends SymbiiteComponent {
  @prop() messages = [];

  async fetchData() {
    // Предзагружаем последние сообщения для SSR
    return await fetch('/api/chat/recent').then(r => r.json());
  }

  async connectedCallback() {
    // Клиентская часть: открываем WS‑соединение
    if (this.context === 'client') {
      this.socket = new WebSocket('wss://example.com/chat');
      this.socket.addEventListener('message', e => {
        this.messages = [...this.messages, JSON.parse(e.data)];
      });
    }
  }

  render(_, ctx) {
    const container = document.createElement('div');
    container.className = 'chat-widget';

    const list = document.createElement('ul');
    this.messages.forEach(m => {
      const li = document.createElement('li');
      li.textContent = `${m.user}: ${m.text}`;
      list.appendChild(li);
    });
    container.appendChild(list);
    return container;
  }
}

На сервере компонент создаётся, вызывается fetchData(), генерируется HTML‑разметка со списком последних сообщений и отправляется клиенту. После загрузки браузер гидратирует виджет, открывает WebSocket и начинает получать новые сообщения без полной перерисовки.

Как начать работу с Symbiite.js 3.x

Установка
```
npm i symbiite
```
Создание базового компонента – наследуем SymbiiteComponent, объявляем свойства через @prop и реализуем render().
Настройка сервера – подключаем нужный адаптер (express, fastify и т.д.) и добавляем middleware, возвращающий экземпляр компонента.
Запуск – сервер генерирует HTML, клиент автоматически гидратирует компоненты, а любые асинхронные запросы обрабатываются через fetchData().

Перспективы развития

Версия 3.x задаёт фундамент для дальнейшего расширения: планируется поддержка stream‑рендеринга (для больших страниц), интеграция с Edge‑runtime (Cloudflare Workers, Vercel Edge Functions) и появление IDE‑плагинов, упрощающих автодополнение декораторов. Кроме того, в roadmap входит совместимость с Web Components v2 и возможность декларативного описания маршрутов внутри компонентов, что упростит построение микросервисных UI‑шаблонов.

Symbiite.js 3.x демонстрирует, как современные веб‑стандарты могут стать основой для полностью изоморфных приложений, объединяя преимущества SSR и клиентской интерактивности без тяжёлых абстракций. За счёт небольшого ядра, реактивных свойств и гибкой серверной интеграции библиотека предоставляет разработчикам инструменты для создания быстрых, SEO‑дружественных и легко поддерживаемых UI‑решений.

Symbiite.js 3.x: изоморфные веб‑компоненты для клиент‑серверных UI