ТОП-7 инструментов для работы с веб-компонентами | В паутине

ТОП-7 инструментов для работы с веб-компонентами

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

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

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

Начинаем погружение!

1. Bit

Bit – это платформа и опенсорсный инструмент, облегчающий разработку, использование и шаринг компонентов.

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

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

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

Наконец, все компоненты из репозитория можно расшарить на bit.dev, где они организованы в удобные коллекции. Так ваша команда может быстро обмениваться и повторно использовать компоненты.

Вот пример библиотеки веб-компонентов wired-elements на bit.dev. Обратите внимание, что с каждым компонентом можно поиграть, прежде чем использовать его.

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

2. lit-html и lit-element

Lit-html – это, в общих чертах, настраиваемый конструктор для веб-компонентов. Это «эффективная, выразительная, расширяемая библиотека шаблонов HTML для JavaScript». Другими словами, Lit-html использует шаблонные строки JavaScript для создания динамических шаблонов с литералами шаблона (пример).

lit-html использует такие встроенные фичи, как элементы <template>, и сочетает их с собственным клонированием для повышения эффективности. При изменениях данных не происходит полного ререндеринга шаблона – получается очень быстро.

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

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

Lit-element – это «простой базовый класс для создания быстрых и легких веб-компонентов». Он использует lit-html для визуализации Shadow DOM элементов и добавляет API для управления свойствами и атрибутами. LitElement реагирует на изменения свойств и визуализирует их декларативно с помощью lit-html.

LitElement составляет очень мощную комбинацию с Bit — для простого создания, повторного использования, управления и синхронизации компонентов. П

3. StencilJS

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

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

Stencil также открывает новые возможности:

  • отрисовка на стороне сервера без необходимости запуска headless браузера4
  • пререндеринг;
  • свойства в виде объектов, а не только строк.

Компоненты Stencil – это простые классы ES6/TypeScript с декораторами метаданных, поэтому работать с ними очень просто.

4. Svelte JS

Svelte – это «компилятор, который принимает ваши декларативные компоненты и преобразует их в эффективный JavaScript, который точечно обновляет DOM» при изменении состояния вашего приложения. Это означает, что вы можете создавать boiler-plate free компоненты, используя CSS, HTML и чистый JavaScript, а Svelte скомпилирует его в легкий JS-код со встроенной реактивностью.

Звучит умопомрачительно и просто, не так ли? Еще одна полезная возможность – встроенная поддержка любой библиотеки CSS-in-JS, не привязанной к какому-либо фреймворку.

Svelte является важным шагом на пути к framework-agnostic веб-компонентами. Рабочий процесс позволяет выполнение постепенного рефакторинга.

Вы также можете легко комбинировать Svelte с Bit.

5. Angular Elements

Angular elements – это новый пакет в Angular, который помогает публиковать компоненты Angular как пользовательские элементы. По сути он компилирует их в веб-компоненты.

Это весомая и очень интересная попытка преодолеть разрыв между фреймворком и framework-agnostic разработкой. Пакет @angular/elements экспортирует API createCustomElement, который обеспечивает мост от интерфейса компонентов Angular и обнаружения изменений до встроенного DOM API.

Практически Вы можете использовать новую функцию createCustomElement() для преобразования компонента в класс и регистрации его в браузере в качестве пользовательского элемента. Затем вы можете использовать новый элемент так же, как встроенный HTML-элемент. Это открывает множество новых возможностей: от лучшего разделения задач и возможности повторного использования до SSR!

6. Hybrids

Hybrids – это «UI библиотека для создания веб-компонентов, которая предпочитает простые объекты и чистые функции классам и синтаксису this”. Она предлагает простой и функциональный API для создания пользовательских элементов.

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

«Бонусные» фичи:

  • движок шаблонов, основанный на tagged template literals;
  • поддержка замены модулей для более быстрой разработки.

7. Sigil

Sigil – это «функциональная библиотека веб-компонентов». Она использует виртуальный DOM для супер быстрого рендеринга с использованием snabbadom, язык шаблонов html, который позволяет привязки к атрибутам и свойствам, чистый функциональный стиль для уменьшения перерисовок, поддержку неизменяемых хранилищ, как в Redux и Kamea. Вы можете поэкспериментировать с Sigil на JSFiddle.

Полезные ссылки

Комментарии (0)

Ваш email не будет опубликован. Все поля обязательны