7 инструментов для разработки веб-компонентов в 2019 году

Компоненты и виджеты, разработанные по стандартам веб-компонентов, работают в современных браузерах и используются с библиотеками JavaScript и фреймворками, работающими с HTML.

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

Рассмотрим 7 полезных инструментов для тех, кто использует веб-компоненты в 2019 году.

Приступим.

1. Bit

Все о рабочем пространстве демо-версии Bit за 5 минут

Bit — это платформа и open-source инструмент для разработки модульных приложений с помощью создания и соединения компонентов.

Bit предлагает инновационные функции для создания модульных и повторно используемых компонентов.

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

Во-вторых, помимо установки компонентов с помощью NPM/Yarn, Bit используется для переноса компонента в новый проект, в котором его можно доработать, изменив исходный код, стиль и многое другое. Больше никакого ожидания на PR.

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

И наконец, компонентами, находящимися в хранилище, можно поделиться на bit.dev (Bit hub), где они будут организованы в визуальном “плейлисте” в виде коллекций.

Для примера рассмотрим библиотеку веб-компонентов wired-elements. Обратите внимание на возможность поэкспериментировать перед использованием с каждым компонентом на живой игровой площадке.

wired-elements by wiredjs

веб-компоненты wired-elements с bit

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

teambit/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 можно создавать, повторно использовать, управлять и синхронизировать компоненты.

Polymer/lit-html

3. StencilJS

Введение в веб-компоненты со StencilJS

Stencil, разработанный командой Ionic, представляет собой “компилятор веб-компонентов для быстрого создания повторно используемых UI-компонентов и прогрессивных веб-приложений”. То есть, этот компилятор предназначен для создания веб-компонентов и прогрессивных веб-приложений (PWA).

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

Stencil открывает такие новые возможности для создания веб-компонентов, как Server Side Rendering без необходимости запуска headless-браузера, пререндеринга и использования объектов в качестве свойств (вместо строк). Компоненты Stencil — это простые классы ES6/TypeScript с декораторами и метаданными. Посмотрите:

ionic-team/stencil

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 компоненты для свободного использования, а также стилизованные компоненты для стилизации других компонентов, превратив стилизацию в способ создания композиции.

sveltejs/svelte

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);

“Бонусные” функции включают шаблонизатор на основе литералов теговых шаблонов и поддержку горячей замены модуля для ускорения разработки. Здорово.

hybridsjs/hybrids

7. Sigil

Sigil — это “функциональная библиотека веб-компонентов”. Она предлагает повторно используемые html-элементы с использованием веб-компонентов, виртуальный dom для супер быстрого пререндеринга с использованием snabbadom, шаблонный язык html, с помощью которого можно связать атрибуты и свойства с мощными выражениями, чистый стиль функционального представления компонента для сокращения количества пререндеринга, а также поддержку таких неизменяемых хранилищ на основе flux, как Redux, Kamea и другие. Опробуйте ее вместе с JSFiddle.

---

Перевод статьи  Jonathan Saring: 7 Tools for Developing Web Components in 2019