Компоненты и виджеты, разработанные по стандартам веб-компонентов, работают в современных браузерах и используются с библиотеками JavaScript и фреймворками, работающими с HTML.
Помимо возможности повторного использования, с помощью веб-компонентов можно добиться лучшей стабильности, абстракции и стандартизации, а также сокращения количества работы и модульность. За последний год появилось множество новых инструментов и технологий, приближающих будущее.
Рассмотрим 7 полезных инструментов для тех, кто использует веб-компоненты в 2019 году.
Приступим.
1. Bit
Все о рабочем пространстве демо-версии Bit за 5 минут
Bit — это платформа и open-source инструмент для разработки модульных приложений с помощью создания и соединения компонентов.
Bit предлагает инновационные функции для создания модульных и повторно используемых компонентов.
Во-первых, он автоматически определяет граф зависимостей компонента, чтобы полностью отделить его от проекта. Размещение нескольких компонентов из проекта можно осуществить с помощью одной команды без выполнения рефакторинга (!).
Во-вторых, помимо установки компонентов с помощью NPM/Yarn, Bit используется для переноса компонента в новый проект, в котором его можно доработать, изменив исходный код, стиль и многое другое. Больше никакого ожидания на PR.
В-третьих, Bit управляет как исходным кодом, так и графом зависимостей компонентов между проектами. Благодаря этому компоненты можно использовать повторно в любом масштабе в нескольких проектах. Синхронизировать изменения компонентов по всей базе кода можно с помощью одной команды, при этом будет известно не только какие зависимости изменены, но и места их изменений. Это не только полезно при поэтапном рефакторинге, но и облегчает поддержку кода.
И наконец, компонентами, находящимися в хранилище, можно поделиться на bit.dev (Bit hub), где они будут организованы в визуальном “плейлисте” в виде коллекций.
Для примера рассмотрим библиотеку веб-компонентов wired-elements. Обратите внимание на возможность поэкспериментировать перед использованием с каждым компонентом на живой игровой площадке.
Bit ускоряет разработку модульных приложений с компонентами, упрощает поддержку базы кода (например, поэтапный рефакторинг с полным контролем), а также увеличивает тестовое покрытие и повторное использование кода с возможностью внесения изменений.
2. lit-html и lit-element
Lit-html — это настраиваемый конструктор веб-компонентов. Это “эффективная, экспрессивная, расширяемая HTML-библиотека шаблонов для JavaScript”. Lit-html использует шаблонные строки JavaScript для создания динамических шаблонов с шаблонными литералами (пример).
lit-html использует такие возможности платформы, как HTML-элементы <template> с native cloning для повышения эффективности, а также обновляет лишь измененные части шаблонов без повторной визуализации всего представления. Это значительно ускоряет процесс.
Шаблоны представляют собой значения (строки, узлы DOM, гетерогенные списки, вложенные шаблоны и т. д.), которые можно вычислять, передавать в/из функции, а также вкладывать. Выражения написаны на JavaScript и включают все необходимое.
Директивы настраивают способ обработки значений с возможностью использования асинхронных значений, эффективных повторов клавиш, границ ошибок и многого другого.
Lit-element — это “базовый класс для быстрого создания легких веб-компонентов”. Он использует lit-html для визуализации в Shadow DOM элемента и добавляет API для управления свойствами и атрибутами элемента. LitElement реагирует на изменения свойств и отображает их с помощью lit-html.
С помощью LitElement можно с легкостью определить веб-компоненты для обмена элементами в рамках организации или при создании UI системы дизайна. В сочетании с Bit можно создавать, повторно использовать, управлять и синхронизировать компоненты.
3. StencilJS
Введение в веб-компоненты со StencilJS
Stencil, разработанный командой Ionic, представляет собой “компилятор веб-компонентов для быстрого создания повторно используемых UI-компонентов и прогрессивных веб-приложений”. То есть, этот компилятор предназначен для создания веб-компонентов и прогрессивных веб-приложений (PWA).
Он использует TypeScript, JSX, виртуальный слой DOM, эффективное одностороннее связывание данных, асинхронный конвейер рендеринга и отложенную загрузку для создания основанных на стандартах веб-компонентов, работающих не только на современных, но и на устаревших браузерах.
Stencil открывает такие новые возможности для создания веб-компонентов, как Server Side Rendering без необходимости запуска headless-браузера, пререндеринга и использования объектов в качестве свойств (вместо строк). Компоненты Stencil — это простые классы ES6/TypeScript с декораторами и метаданными. Посмотрите:
4. Svelte JS
Rich Harris рассказывает о svelte и будущем
Svelte — это “компилятор, преобразующий декларативные компоненты в эффективный JavaScript, который обновляет DOM” при изменении состояния приложения. Это означает, что Svelt компилирует boiler-plate компоненты, созданные с использованием CSS, HTML и чистым JavaScript, в маленький и легкий JS со встроенной реактивностью.
Еще одна полезная функция — встроенная поддержка любого framework-agnostic CSS в библиотеке JS.
Svelte делает большой шаг на пути к использованию framework-agnostic веб-компонентов, поскольку с помощью его рабочего пространства можно выполнить поэтапный рефакторинг. При сочетании Svelete с Bit можно создать framework-agnostic компоненты для свободного использования, а также стилизованные компоненты для стилизации других компонентов, превратив стилизацию в способ создания композиции.
5. Angular elements
Angular elements — это новый пакет в Angular, с помощью которого можно опубликовать компоненты Angular в качестве пользовательских компонентов через их компиляцию в веб-компоненты.
Пакет @angular/elements экспортирует API createCustomElement(), предоставляющий мост от интерфейса компонента Angular и обнаружение изменений во встроенном DOM API.
Фактически новую функцию createCustomElement() можно использовать для конвертирования компонента в класс и регистрации его в браузере в качестве пользовательского элемента. Затем новый элемент можно использовать как встроенный HTML-элемент в содержимом, добавленном напрямую в DOM. В итоге получаем новые возможности в рабочем пространстве NG, начиная от улучшенного разделения ответственностей до возможности повторного использования SSR!
6. Hybrids
Hybrids — это “UI-библиотека для создания веб-компонентов, в которой использование простых объектов и чистых функций преобладает над синтаксисом class и this”. Она предоставляет простой и функциональный API для создания пользовательских элементов.
Эта библиотека представляет собой смесь функциональной и объектно-ориентированной архитектуры с уникальным подходом для определения пользовательских элементов. Рассмотрим пример, основанный на трех идеях: дескрипторы (descriptors), фабрики (factories) и трансляции (translation). Библиотека использует обнаружение изменений и механизмы кэширования для упрощения жизненного цикла компонента.
import { define } from 'hybrids';
const MyElement = {
count: 0,
render: ({ count }) => {...},
};
define('my-element', MyElement);“Бонусные” функции включают шаблонизатор на основе литералов теговых шаблонов и поддержку горячей замены модуля для ускорения разработки. Здорово.
7. Sigil
Sigil — это “функциональная библиотека веб-компонентов”. Она предлагает повторно используемые html-элементы с использованием веб-компонентов, виртуальный dom для супер быстрого пререндеринга с использованием snabbadom, шаблонный язык html, с помощью которого можно связать атрибуты и свойства с мощными выражениями, чистый стиль функционального представления компонента для сокращения количества пререндеринга, а также поддержку таких неизменяемых хранилищ на основе flux, как Redux, Kamea и другие. Опробуйте ее вместе с JSFiddle.
Читайте также:
Перевод статьи Jonathan Saring: 7 Tools for Developing Web Components in 2019
