Библиотеки компонентного UI — популярный способ создания современных приложений. Angular и React сейчас являются лидерами, но браузеры и их собственные API не отстают. Web Components были впервые представлены в 2011 году и стали попыткой браузеров внедрить компонентный подход в веб-платформу.
Существует несколько библиотек для написания Web Components, наиболее известные из них — Google Polymer, а также X-Tag и Bosonic. Чтобы по-настоящему понять, чего можно достичь с помощью платформы самостоятельно, я покажу, как создать Web Component, используя API, доступные в современных браузерах. Существует множество примеров типа «Hello World» для Web Components, поэтому сегодня мы создадим что-то более сложное — виджет видеочата с использованием Twilio Video. К концу статьи он будет выглядеть примерно так:
Главное, что после написания нашего компонента его использование потребует всего лишь следующего HTML-кода:
Web Components состоят из четырех взаимодополняющих возможностей браузера: Custom Elements, HTML Imports, Shadow DOM и Templates. Вместе они позволяют создавать переиспользуемые виджеты интерфейса, которые инкапсулируют поведение и могут использоваться, как показано выше, путем импорта компонента и размещения пользовательского элемента на HTML-странице. Мы увидим, как эти технологии взаимодействуют, по мере создания нашего виджета видеочата.
Если вы хотите сразу увидеть готовый компонент и как его использовать, ознакомьтесь с репозиторием на GitHub. В противном случае давайте приступим к созданию.
Для создания нашего виджета видеочата нам понадобятся следующие инструменты:
— Аккаунт Twilio — вы можете зарегистрироваться для получения бесплатного аккаунта здесь
— Node.js — мы будем запускать сервер для создания токенов аутентификации с платформой Twilio
— Chrome — разные браузеры поддерживают разные элементы различных функций Web Components, но Chrome в настоящее время поддерживает их все
Всё готово? Тогда начнем.
Для запуска этого проекта я подготовил базовый сервер, который вам нужно будет запустить. Сначала клонируйте или скачайте репозиторий.
После этого вам понадобятся учетные данные Twilio, чтобы приложение работало. Возьмите свой Twilio Account SID из панели управления аккаунтом, создайте профиль конфигурации видео и запишите его SID, а затем сгенерируйте ключ и секрет API. После того как у вас будут все эти данные, мы сможем добавить их в проект.
Сделайте копию файла `.env.example` и назовите её `.env`. Это можно сделать в терминале следующим образом:
Откройте файл `.env` и заполните все учетные данные.
Теперь установите зависимости проекта и запустите сервер.
Пока ничего не происходит, верно? Давайте это изменим и создадим Web Component.
Когда вы создаете компонент, он существует в отдельном файле и может быть импортирован. Это позволяет инкапсулировать весь код. Начнем с создания HTML-импорта для нашего компонента.
В директории public создайте файл с именем `twilio-video.html`. Пока в нем ничего не нужно.
Теперь в файле `public/index.html` добавьте следующее в конец элемента `
`:Обновите страницу, и ничего нового не произойдет! Ну, это не совсем так. Откройте консоль инструментов разработчика на вкладке Network (Cmd + Opt + I на Mac или Ctrl + Shift + I на Windows), и вы увидите, что мы загрузили наш новый HTML-документ.
Чтобы по-настоящему использовать наш HTML-импорт, давайте создадим в нем наш компонент.
Наша цель — сделать создание видеочата таким же простым, как добавление HTML-элемента на страницу, элемента `
` на странице следующим:
Обновите страницу, и заголовок исчезнет, уступив место нашему пользовательскому элементу. Правда, этот элемент пока ничего не делает… Давайте перейдем в наш HTML-импорт и начнем создавать наш пользовательский элемент.
Первое, что нам нужно сделать здесь, — зарегистрировать наш элемент. Для этого нужно написать немного JavaScript. В файле `twilio-video.html` напишите:
`document.registerElement` принимает имя элемента, который мы хотим зарегистрировать, в данном случае «twilio-video». Обратите внимание, что нам нужно использовать имя с дефисом, это отличает пользовательские элементы от элементов, определенных браузером.
Также принимается необязательный объект опций. Этот объект определяет, на чем основан наш пользовательский элемент. Мы используем `prototype` и предоставляем новый прототип, основанный на прототипе `HTMLElement`, базовом объекте для всех HTML-элементов. Мы будем расширять этот прототип по мере работы над проектом.
Обновите страницу, и… ничего больше не произойдет. Пока что мы создали пустой элемент. По умолчанию это строчный элемент без содержимого и поведения. Используя прототип, который мы определили ранее, мы можем добавить как содержимое, так и поведение. Но сначала нужно узнать о жизненных циклах пользовательских элементов.
#### Жизненный цикл пользовательского элемента
Пользовательские элементы имеют несколько функций, которые вызываются на протяжении их жизненного цикла. Эти колбэки полезны для добавления и удаления поведения, разметки и содержимого. Они включают:
`createdCallback` — вызывается при создании экземпляра элемента
`attachedCallback` — вызывается при вставке экземпляра в документ
`detachedCallback` — вызывается при удалении экземпляра из документа
`attributeChangedCallback` — вызывается при изменении атрибута элемента
Мы будем использовать `createdCallback` для определения содержимого и поведения элемента и `detachedCallback` для очистки.
Чтобы работать с содержимым нашего элемента, нужно узнать о двух последних аспектах Web Components.
Может возникнуть соблазн генерировать HTML-содержимое нашего пользовательского элемента с помощью JavaScript, но на самом деле это неудобно, и есть лучший способ. HTML-шаблоны — это инертные фрагменты HTML, которые можно включить на страницу и затем инстанцировать в JavaScript. Они инертны, потому что внутри шаблона `