В последнее время вокруг веб-компонентов очень много шума. И это оправдано, ведь они уже неплохо поддерживаются в современных браузерах и воплощают в себе долгожданный стандарт для работы с модульным кодом.
Веб-компоненты это про повторное использование, стабильность, абстракцию, стандартизацию и уменьшение затрат на разработку. Пока мы ждем полноценной реализации таких технологий как 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>, и сочетает их с собственным клонированием для повышения эффективности. При изменениях данных не происходит полного ререндеринга шаблона – получается очень быстро.
import { html, render } from 'lit-html';
// Шаблоны lit-html используют тег `html`:
let sayHello = (name) => html`<h1>Hello ${name}</h1>`;
// Для рендера используется функция `render()`:
render(sayHello('Wordl'), document.body);
// Ререндер только обновляет данные в шаблоне:
render(sayHello('Everyone'), document.body);Шаблоны-это значения (строки, узлы DOM, гетерогенные списки, вложенные шаблоны и т. д.), которые могут быть вычислены, переданы функциям, получены из них и вложены друг в друга. Выражения могут включать в себя все, что необходимо.
Директивы настраивают способ обработки значений, позволяя использовать асинхронные значения, эффективные повторения с ключом, ошибки и многое другое.
Lit-element – это «простой базовый класс для создания быстрых и легких веб-компонентов». Он использует lit-html для визуализации Shadow DOM элементов и добавляет API для управления свойствами и атрибутами. LitElement реагирует на изменения свойств и визуализирует их декларативно с помощью lit-html.
import { LitElement, html, property, customElement } from 'lit-element';
@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
@property() name = 'World';
render() {
return html`<p>Hello, ${this.name}!</p>`;
}
}<simple-greeting name="Everyone"></simple-greeting>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 предоставляет декларативный способ создания пользовательских элементов. Это сочетание функциональной и объектно-ориентированной архитектуры с уникальным подходом к определению пользовательских элементов. Вот пример, который передает три базовые идеи библиотеки, связанные со свойствами: дескрипторы, фабрики и трансляция. Библиотека использует механизм обнаружения изменений и кэширования для упрощения жизненного цикла компонента.
import { define } from 'hybrids';
const MyElement = {
count: 0,
render: ({ count }) => {...},
};
define('my-element', MyElement);«Бонусные» фичи:
- движок шаблонов, основанный на tagged template literals;
- поддержка замены модулей для более быстрой разработки.
7. Sigil
Sigil – это «функциональная библиотека веб-компонентов». Она использует виртуальный DOM для супер быстрого рендеринга с использованием snabbadom, язык шаблонов html, который позволяет привязки к атрибутам и свойствам, чистый функциональный стиль для уменьшения перерисовок, поддержку неизменяемых хранилищ, как в Redux и Kamea. Вы можете поэкспериментировать с Sigil на JSFiddle.
0 комментариев