Гибриды - это 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 широко поддерживается большинством распространенных браузеров.
Заключение
Спасибо за чтение, надеюсь, вы открыли для себя что-то новое и полезное. Оставайтесь любопытными и счастливого кодирования!