Гибриды - это UI-библиотека для создания веб-компонентов с сильным декларативным и функциональным подходом, основанным на простых объектах и ​​чистых функциях.

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

Если вы новичок в веб-компонентах, ознакомьтесь с моей предыдущей публикацией API веб-компонентов в двух словах.

Гибридный пакет включает следующее:

  • Самое простое определение - только простые объекты и чистые функции - без синтаксиса class и this.
  • Отсутствие глобального жизненного цикла - независимые свойства с собственными упрощенными методами жизненного цикла.
  • Композиция вместо наследования - простое повторное использование, слияние или разделение определений свойств.
  • Сверхбыстрый пересчет - встроенный интеллектуальный кеш и механизмы обнаружения изменений.
  • Шаблоны без внешних инструментов - механизм шаблонов, основанный на тегированных литералах шаблона.
  • Включены инструменты разработчика - поддержка горячей замены модулей для быстрой и приятной разработки.

Начиная

Установите пакет npm с помощью NPM или Yarn.

НПМ

npm i hybrids

Пряжа

yarn add hybrids

Затем импортируйте необходимые функции и определите настраиваемый элемент. Вот простой пример счетчика.

Наконец, используйте свой собственный элемент в HTML:

<simple-counter count="10"></simple-counter>

Библиотека гибридов предоставляет простой и декларативный способ создания настраиваемых элементов. Его название взято из идеи, что это сочетание функциональной и объектно-ориентированной архитектуры с уникальным подходом к определению настраиваемых элементов, примерно так:

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

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

Упрощенные жизненные циклы компонентов

Жизненный цикл компонента обратный по сравнению с обычными решениями. То, что обычно является результатом вычисления состояния, здесь является причиной этого вычисления. Каждое отдельное свойство (включая render) является независимым. Если от компонента требуются другие свойства, он вызывает их. Только после этого рассчитываются значения этих свойств. Мы можем проиллюстрировать это следующей диаграммой:

Свойство рендеринга (функция обновления, которая управляет DOM) требует, чтобы текущее состояние было взято из других свойств, а не наоборот. Установка состояния в некоторых обратных вызовах жизненного цикла (даже при асинхронной выборке данных) не требуется. Механизм обнаружения изменений позволяет запускать функцию обновления только при изменении одного из свойств компонента.

В результате мы можем легко создать структуру компонента как список свойств (входные данные) и чистую функцию рендеринга (выход), которая отражает текущее состояние компонента в DOM.

В этой концепции побочные эффекты выходят за рамки области применения компонента. Это результаты пользовательского ввода или других событий DOM, связанных с внутренней структурой компонента. Шаблон рендеринга, используемый в библиотеке, позволяет нам реализовать их как обычные функции, которые принимают экземпляр настраиваемого элемента и изменяют значения свойств (входные данные). Эти изменения в конечном итоге приведут к обновлению свойства, но только тогда, когда это необходимо.

Модули ES

Если вы ориентируетесь на современные браузеры и не хотите использовать внешние инструменты (например, webpack или parcel), вы можете использовать модули ES:

<script type="module">
// We can use "/src" here - browsers, which support modules also support ES2015
import { html, define } from 'https://unpkg.com/hybrids@[PUT_VERSION_HERE:x.x.x]/src';
...
</script>

Учтите, что он не обеспечивает минификацию кода и загружает все необходимые файлы отдельными запросами.

Замена горячего модуля

HMR работает "из коробки", но для настройки вашего связующего может потребоваться указание, что ваша точка входа поддерживает его. Для webpack и parcel добавьте следующий код в свою точку входа:

// Enable HMR for development
if (process.env.NODE_ENV !== 'production') module.hot.accept();

Если ваша точка входа импортирует файлы, которые не поддерживают HMR, вы можете разместить приведенный выше фрагмент в модуле, где вы определяете настраиваемый элемент. (где используется метод define).

Документация

Документация по гибридам доступна на сайте hybrids.js.org или по пути docs в репозитории:

Живые примеры

Вот несколько примеров проектов, созданных с использованием гибридных веб-компонентов.

  • ‹Simple-counter› - кнопка со счетчиком, управляемым собственным состоянием
  • ‹Redux-counter› - библиотека Redux для управления состоянием
  • ‹React-counter› - фабрика рендеринга и библиотека React для рендеринга в теневой DOM
  • ‹Lit-counter› - фабрика рендеринга и lit-html для рендеринга в теневом DOM
  • ‹App-todos› - список дел с использованием родительской фабрики для государственного управления
  • ‹Tab-group› - переключение вкладок с помощью фабрики детей
  • ‹Async-user› - асинхронные данные в шаблоне

Поддержка браузера

Библиотека Hybrids широко поддерживается большинством распространенных браузеров.

Заключение

Спасибо за чтение, надеюсь, вы открыли для себя что-то новое и полезное. Оставайтесь любопытными и счастливого кодирования!