Всем привет! 

Спешу сообщить, о выходе новой версии замечательной фронтенд-библиотеки Symbiote.js! Никогда не слышали о ней? Самое время познакомиться.

Symbiote - это компактная, но очень мощная библиотека для создания веб-компонентов и приложений на их основе. Да, я знаю, у нас уже есть React, Vue, Svelte, LitElement и прочее. И может быть, не очень понятно, зачем вникать во что-то еще… Но не торопитесь с выводами, Симбиоту есть, что вам предложить.

Концепция

В отличие от многих популярных решений, Symbiote.js идет по пути расширения стандартных браузерных API. Он НЕ пытается подменить собой веб-платформу и стать новой мета-платформой, создать новый синтаксис или переизобрести велосипед каким-либо иным образом. Ему не нужны специальные компиляторы, парсеры или особые инструменты окружения. Симбиоту нужен только браузер и JavaScript, а в остальном - он абсолютный агностик и может работать как сам по себе, так и в сочетании со многими популярными и привычными технологиями. 

Также, особенностью Symbiote.js является то, что компоненты, созданные с его помощью, используют DOM, как основу своего рантайма. Они способны на анализ фактического контекста своего использования и сами могут определить, как им себя вести в каждом конкретном случае. Это делает Symbiote.js отличным выбором для создания виджетов, организации микрофронтендов, создания мета-приложений и библиотек UI-компонентов.

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

Symbiote.js - это ответ на вопрос:  - что можно выжать из стандартного HTML, JavaScript и CSS? И ответ этот - Можно выжать очень немало. Больше, чем может голый React и его ближайшие, по популярности, конкуренты. 

Чтобы не быть голословным, приведу пример с такой непростой темой, как SSR (Server Side Rendering). Поскольку шаблоны Симбиота, это просто HTML, который можно напрямую парсить браузером без каких-либо дополнительных обработок, вы можете генерировать разметку базового документа для своего Symbiote-приложения практически всем, чем угодно: от различных CMS и JAMStack-генераторов, до использования простых шаблонных литералов в Node.js или даже статических файлов, непосредственно. Все, что вам нужно, для последующий “гидрации” (оживления) результата, это один единственный флаг в коде вашего компонента-оболочки: ssrMode = true. И все! Не нужно никакой предварительной генерации HTML из JSX-шаблонов, никаких специальных плейсхолдеров и никаких волшебных “серверных компонентов”. Здесь вы можете посмотреть как это работает вживую: https://symbiotejs.org/2x/playground/ssr-hydration/ 

Простой пример

Здесь я приведу базовый пример из официальной документации:

import Symbiote, { html, css } from 'https://esm.run/@symbiotejs/symbiote';

export class MyComponent extends Symbiote {

  init$ = {
    count: 0,
    increment: () => {
      this.$.count++;
    },
  }

}

MyComponent.template = html`
  <h2>{{count}}</h2>
  <button ${{onclick: 'increment'}}>Click me!</button>
`;

MyComponent.rootStyles = css`
  my-component {
    color: green;
  }
`;

MyComponent.reg('my-component');

Как вы видите, все довольно просто и привычно: инициализация состояния, шаблон компонента, стили, обработчики событий… Никакой концептуальной сложности. Все это вам, скорее всего, уже встречалось, в том или ином виде. 

DX

В основе DX-стратегии (Developer Experience) Симбиота лежит мысль, о том, что вульгарная минимизация печатаемых разработчиком символов - не равна удобству, сама по себе. Да, компактный код и минимум бойлерплейта это очень хорошо (и код Symbiote-приложений не нарушает общих тенденций), но гораздо важнее понимание того, что разработчик видит перед собой и ясная ментальная модель, стоящая за процессом разработки. Именно поэтому, лично мне, очень не нравятся модные “черные ящики”, скрывающие детали за пределами своего самого банального и поверхностного использования. В этих “темных водах” ВСЕГДА скрываются проблемы. И чем “волшебнее” ваш фреймворк, тем сложнее эти проблемы решать. А порой, почти  все развитие в таких окружениях сводится к решению проблем, созданных на предыдущих итерациях.

В Symbiote.js, почти все, что вы видите, вам должно быть уже знакомо, прямо или косвенно. Если только вы не новичок во фронтенде. А если новичек, то необходимые основы вы можете почерпнуть на популярных сайтах с документацией по современным спецификациям, например MDN. 

Паттерны

Этот раздел прямо связан с предыдущим. Для реализации реактивности и работы с данными, Симбиот использует до предела простой и понятный паттерн pub/sub (Publish–subscribe). Большинство изменений происходит синхронно, и, сюрприз-сюрприз, это работает, в большинстве случаев, быстрее, чем подход с накоплением изменений и последующим асинхронным рендером. Гораздо быстрее, судя по бенчмаркам.

Во многом, Симбиот следует принципам, благоприятствующим созданию слабо связанной архитектуры (Loosely Coupled Architecture), которая зашита в саму ДНК веб-платформы. Симбиот стимулирует вас создавать бизнес-абстракции (независимые компоненты) а не абстракции над платформой и альтернативы нативным API, дополнительно связывающие собой ваши сущности.

Экосистема

Для любой базовой библиотеки важна экосистема готовых решений. И часто, это является аргументом, против использования чего-то нового. И здесь у Симбиота, также, сильные позиции. Дело в том, что благодаря его близости к платформе, он может легко работать с готовыми решениями для этой самой платформы и не требовать к себе какого-то специального отношения. У меня еще ни разу не было каких-либо проблем с интеграциями, а я их делал уже немало, от работы с WebGL, до онлайн-редакторов кода, сложных UI для работы с графовыми данными и прочего.

Говоря о инструментах окружения разработки, мы имеем такую-же картину. Примерный и достаточный сетап описан на сайте проекта: https://symbiotejs.org/#biome 

А очень многое, Симбиот прекрасно делает самостоятельно и вообще не требует никаких дополнительных зависимостей. Например, вам не нужно искать библиотеки для рендеринга сложных динамических таблиц и списков (itemize API прекрасно справляется с этим), не нужны внешние решения для локализации приложений (для этого есть несколько очень простых и компактных способов), не нужны внешние стейт-менеджеры (вы можете их подключить, но в Симбиоте есть и без них все необходимое, и даже больше). И так далее. Примеры, также, можно увидеть на сайте: https://symbiotejs.org/#playground 

Резюме

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

Я часто общаюсь с другими разработчиками, провожу собеседования и читаю посты с комментариями на профильных ресурсах. И я часто сталкиваюсь с мнением, что есть библиотеки “для больших проектов” и “для души”. Одни, используют для основной работы, другие - для личных экспериментов. Многим Symbiote.js нравится, но его, чаще всего, автоматом, относят ко второй категории решений для “маленьких”. Мне сложно с этим согласится. Недавно, моя команда закончила очередной, весьма большой и взрослый проект, с использованием Symbiote.js и мы не жалели о своем выборе ни секунды.

Спасибо за внимание, и не пожалейте звездочки на GitHub, разработчикам будет очень приятно знать, что они не “кричат в пустоту”.

В общем, let’s make frontend great again!