Symbiote.js: суперспособности для веб-компонентов

Смысл создания и использования новых библиотек и фреймворков в том, чтобы решить задачи, которые не были решены ранее. Либо, в том, чтобы решить какую-либо задачу более эффективно, чем это уже было сделано кем-то.

Сегодня мы начнем разговор о задачах, которые можно решать с помощью Symbiote.js, и делать это гораздо проще и элегантнее, чем с другими фреймворками.

Symbiote.js — это легкая (~6 кб brotli), но очень мощная библиотека, основанная на веб-компонентах. Ее основным отличием от конкурентов является фокус на продвинутых композиционных возможностях в рамках HTML-разметки (как общей, так и в шаблонах) и более гибкой работе с контекстами данных.

Symbiote.js — это самодостаточное решение для создания сложных современных интерфейсов. С ним вам не нужно собирать классический бутерброд из глобального стейт-менеджера, роутера или SSR — все это есть из коробки. При этом, вы получаете максимальную творческую свободу, без обязательной привязки к компиляторам, сборщикам, каким-то закрытым экосистемам. И все это с минимумом бойлерплейта, типами, реактивностью, рантайм дебаггером и всем тем полезным и современным, к чему мы давно привыкли.

Композиция

Работу с интерфейсами можно, условно, разделить на 2 составляющие:

1. Логическая — компонентная модель и логика + абстракции данных

2. Структурная — композиция компонентов и потоков данных

И в первом и во втором случае, Symbiote.js имеет свои уникальные фишки. Но сейчас я предлагаю сосредоточиться именно на второй части.

Библиотека заточена на работу с HTML. Собственные шаблоны компонентов в ней — это независимые HTML-строки. Внешний HTML — это полноценный каркас и определение структурных зависимостей. Принципиально отсутствует жесткая привязка к JS-рантайму. Это позволяет очень гибко оперировать элементами вашего интерфейса на композиционном и декларативном уровне, причем, как на клиенте так и на сервере.

Вы можете оживлять предварительно созданную разметку, рендерить шаблоны с нуля или использовать любые гибридные подходы. Вы можете создавать “чистые” компоненты-провайдеры контекста и “глупые” компоненты без своей логики, которые автоматически подключаются к, основанному на DOM-структуре, или полностью абстрактному контексту данных. Вы можете использовать один компонент с совершенно разными кастомными шаблонами без единой дополнительной строчки в JS, что особенно полезно для встраиваемых решений, где декларативный подход к конфигурированию особенно удобен.

Перейдем к примерам.

Давайте создадим нечто предельно понятное и полезное — универсальные табы для нашего интерфейса.

Наше решение будет состоять из двух частей: переключателя табов и view-контейнера для отображения выбранного контента.

Шаг первый:

import Symbiote, { css } from '@symbiotejs/symbiote';class SuperTabs extends Symbiote {    init$ = {    '*currentTabName': 'first',  };  renderCallback() {    this.tabEls = [...this.querySelectorAll('[tab]')];    this.tabEls.forEach((/** @type {HTMLElement} */ el) => {      let tab = el.getAttribute('tab');      if (el.hasAttribute('current')) {        this.$['*currentTabName'] = tab;      }      el.onclick = () => {        this.$['*currentTabName'] = tab;      };    });    this.sub('*currentTabName', (val) => {      this.tabEls.forEach((/** @type {HTMLElement} */ el) => {        if (el.getAttribute('tab') === val) {          el.setAttribute('current', '');        } else {          el.removeAttribute('current');        }      });    });  }}SuperTabs.rootStyles = css`super-tabs {  display: inline-flex;  gap: 2px;  button {    cursor: pointer;    &[current] {      background-color: transparent;      pointer-events: none;    }  }}`;SuperTabs.reg('super-tabs');

Шаг второй:

class SuperTabsView extends Symbiote {  renderCallback() {    this.tabCtxEls = [...this.querySelectorAll('[tab-ctx]')];    this.sub('*currentTabName', (val) => {      this.tabCtxEls.forEach((/** @type {HTMLElement} */ el) => {        if (el.getAttribute('tab-ctx') === val) {          el.setAttribute('active', '');        } else {          el.removeAttribute('active');        }      });    });  }}SuperTabsView.rootStyles = css`super-tabs-view {  display: block;  [tab-ctx] {    display: none;    &[active] {      display: contents;    }  }}`;SuperTabsView.reg('super-tabs-view');

Наши табы готовы и будут прекрасно работать в сочетании с любым другим фреймворком или полностью самостоятельно:

<super-tabs ctx="section-select">  <button tab="first">First</button>  <button tab="second">Second</button>  <button tab="third">Third</button></super-tabs><super-tabs-view ctx="section-select">  <div tab-ctx="first">First content</div>  <div tab-ctx="second">Second content</div>  <div tab-ctx="third">Third content</div></super-tabs-view>

На что обратить внимание в этих примерах кода?

1. Интерфейс rootStyles — в данном случае, компоненты создаются без собственного Shadow DOM по умолчанию. Но они могут быть “в тени” внешнего Shadow DOM, который может быть где-то вверх по дереву. А может и не быть. И в том и в другом случае, стили будут применены корректно. Любые ваши тэйлвинды, бутстрапы и общие стили документа, также, тут работают штатно.

2. Коллбек жизненного цикла renderCallback — этот хук гарантирует нам доступ к дочерним DOM-узлам компонента (стандартный connectedCallback такой гарантии не дает).

3. Инициализация свойств init$ — тут мы инициализируем свойство и задаем значение по умолчанию (имя активного таба).

4. Подписка на свойство с помощью метода sub() — базовый паттерн для работы с реактивными свойствами — простой и понятный Pub/Sub. Подписки (отписки) и публикации значений могут происходить как полностью автоматически, так и явно, как в примере.

5. Определение свойства через *propName — пример объявления свойства для Shared Context. Это уже не собственное свойство компонента, оно общее для всех, у кого явно задан атрибут ctx. Похожим образом, к примеру, работает нативный браузерный элемент <input type="radio"> и его атрибут name.

Кроме того, как видите, Symbiote.js отлично сочетается со стандартными методами DOM API. И, в отличие от многих других фреймворков, тут это совсем НЕ антипаттерн, так как нет никакого Virtual DOM.

Работать с другим подходом, когда вы НЕ взаимодействуете с DOM напрямую — также, легко и удобно. Для примера давайте создадим “глупый” компонент, который будет просто отображать текущее значение контекста табов:

import Symbiote, { html, css } from '@symbiotejs/symbiote';class SuperCurrent extends Symbiote {}SuperCurrent.rootStyles = css`super-current {  display: block;  h2 {    text-transform: capitalize;  }}`;SuperCurrent.template = html`<h2>{{*currentTabName}}</h2>`;SuperCurrent.reg('super-current');

Использование в разметке:

<super-current ctx="section-select"></super-current>

Вот и все, минимум кода — и вы связали независимые компоненты в одну взаимодействующую группу. И этих компонентов и групп на странице может быть сколько угодно. Естественно, аналогичным образом вы можете привязывать обработчики событий, и любые более сложные структуры данных.

Low-code/no-js

Где все это особенно полезно?

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

Команды часто состоят из разного рода специалистов: дизайнеров, аналитиков, маркетологов, SEO-шников… Таким образом, мы создаем общедоступный технический протокол общения, и позволяем огромному количеству людей вносить свой вклад без необходимости погружаться в дебри настоящего программирования или дергать разработчиков ради любой мелочи.

Это открывает двери для:

• Дизайнеров — прототипирование интерфейсов прямо в HTML

• Контент-менеджеров — настройка отображения контента через атрибуты, без написания кода

• Встраиваемых решений — сложные виджеты, которые любой может настроить через HTML, не погружаясь в код

• AI-ассистентов — генерация и модификация интерфейсов на лету, где простая и предсказуемая связь между разметкой и поведением критически важна

Описанные в статье механики — это ДАЛЕКО не все, что умеет Symbiote.js. Я сознательно не стал перегружать материал и планирую целый цикл подобных публикаций с примерами и реальными кейсами. Вы же, со своей стороны, можете провести интересный эксперимент: попросить ИИ привести пример решения подобной задачи в любом другом, интересующем вас, фреймворке и сравнить объем и сложность полученного кода, размер бандла, количество зависимостей и т.д. Уверяю вас, результат заставит вас посмотреть на Symbiote.js более внимательно.