Состояние веб-компонентов в 2022 году

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

TLDR;

  • ~18% загрузок страниц, отслеживаемых Google, содержат веб-компонент
  • Stencil — самая скачиваемая библиотека для разработки веб-компонентов
  • Custom Elements Manifest содержит документацию для Storybook, где веб-компоненты стали гражданином первого класса в 2021 году.
  • Во время пандемии возникло несколько онлайн-сообществ о веб-компонентах, включая этот экземпляр Forem, посвященный веб-компонентам.

Принятие

Популярность веб-компонентов среди веб-разработчиков растет с тех пор, как Custom Elements v1 стали доступны во всех вечнозеленых браузерах: Chrome, Safari, Firefox и Edge. По данным Google, в 2019 году «> 5% загружаемых страниц используют веб-компонент». Сегодня Chrome Platform Status показывает, что ~18% загрузок страниц, отслеживаемых Google, содержат веб-компонент. Эта статистика получена на страницах, которые регистрируют пользовательский элемент в CustomElementRegistry.

Библиотеки и инструментарий

За прошедшие годы появилось несколько библиотек, позволяющих разрабатывать веб-компоненты. https://webcomponents.dev отслеживает 61 вариант одного компонента, закодированного с использованием спецификаций веб-компонентов. divriots, компания, которая «создает отличное программное обеспечение для расширения возможностей команд front-end», анализирует размер пакета и производительность нескольких библиотек веб-компонентов и публикует результаты в полугодовом блоге под названием «Все способы сделать веб-компонент».

  • 4 варианта визуализируются быстрее, чем тот же компонент, написанный с помощью Svelte
  • У 5 вариантов размер пакета меньше, чем у того же компонента, созданного с помощью Svelte
  • 54 варианта, созданных с использованием пользовательских элементов, имеют меньший размер пакета и отображаются быстрее, чем тот же компонент, созданный с использованием React или Vue.

Пять лучших библиотек веб-компонентов по количеству загрузок

Следующие библиотеки JavaScript ранжированы по количеству еженедельных загрузок с npm. Эти библиотеки либо используют веб-компоненты «под капотом», либо компилируются в веб-компоненты.

  1. Stencil — 357 795
  2. Lit — 282 068
  3. FAST — 37 489
  4. Lightning Web Components — 35 452
  5. Solid — 26 261
  • Еженедельные загрузки получены из npm 24 июня 2022 года.

Инструментарий

За последний год веб-компоненты стали гражданином первого класса в Storybook.

Custom Elements Manifest — это «формат файла, который описывает пользовательские элементы». Пакет @custom-elements-manifest/analyzer генерирует JSON-файл, который может предоставить богатую информацию о веб-компонентах. Storybook использует этот инструмент для создания документации по веб-компонентам.

Поддержка браузеров

Каждый основной браузер поддерживает пользовательские элементы согласно caniuse.com, за исключением того, что Apple Safari не поддерживает пользовательские встроенные элементы. Web Components — это набор спецификаций, включающих пользовательские элементы, Shadow DOM и шаблоны HTML. caniuse.com использует устаревший маркетинговый термин (custom elements v1) для спецификаций, позволяющих определять новые HTML-теги, которые, вероятно, следует называть «пользовательскими элементами». v1 отличает спецификации от прототипной версии пользовательских элементов (v0), которая устарела с 2014 года. Этот маркетинговый термин сбивает с толку, в основном потому, что HTML — живой документ. caniuse.com также не отслеживает некоторые спецификации, связанные с веб-компонентами, что может запутать новичков.

Живой стандарт HTML предоставляет документацию по пользовательским элементам, включая три основных типа: автономные, встроенные и связанные с формой пользовательские элементы. Пользовательские элементы — это одна часть спецификаций, составляющих Web-компоненты, наряду с Shadow DOM и шаблонами HTML. Другие спецификации некоторым образом улучшают Web-компоненты, например, пользовательские свойства CSS, но не относятся к Web-компонентам. Ниже приведено описание каждой спецификации, а также уровень поддержки браузерами.

Автономные пользовательские элементы позволяют инженерам определять пользовательские элементы HTML. Автономные пользовательские элементы поставляются в каждом современном браузере.

Настраиваемые встроенные элементы позволяют повторно использовать поведение существующих HTML-элементов, что может быть полезно для доступности в некоторых случаях. Настраиваемые встроенные элементы доступны во всех современных браузерах, кроме Apple Safari. Представитель WebKit в прошлом заявил, что WebKit никогда не будет поддерживать настраиваемые встроенные элементы. WebKit поддерживает автономные встроенные элементы и другие спецификации Web Components, включая шаблоны HTML и Shadow DOM, с 2019 года. Несмотря на маркетинговые заявления о том, что Safari находится на одном уровне или лидирует в поддержке спецификаций, WebKit отстает от других браузеров в плане поддержки Web Components. Для пользовательских встроенных компонентов существует полифилл, необходимый для Apple Safari.

Связанные с формой пользовательские элементы позволяют пользовательским элементам участвовать в жизненном цикле HTML-формы. Эта спецификация позволяет разработчикам создавать совершенно новые элементы управления формой, а также при встраивании ввода или в Shadow DOM преодолевать проблемы, блокирующие элементы управления формой от сообщения о валидности и значении HTMLFormElement, одновременно обеспечивая доступность. Пользовательские элементы, связанные с формой, доступны в Chrome, Edge и Firefox Developer Edition. Есть некоторые свидетельства того, что связанные с формой пользовательские элементы будут доступны в WebKit в будущем. Для браузеров, в которых не реализованы пользовательские элементы, связанные с формой, существует полифилл.

Shadow DOM обеспечивает инкапсуляцию для HTML-разметки и стилизации пользовательских элементов. Shadow DOM доступен в каждом современном браузере.

Шаблоны HTML — это способ кэширования HTML в DOM, который не отображается немедленно, но может быть повторно использован для использования в документе. Шаблоны HTML доступны в каждом современном браузере.

Пользовательские свойства CSS, иначе известные как переменные CSS, являются эффективным средством для предоставления «маркеров дизайна», которые пересекают границу Shadow. Хотя пользовательские свойства CSS не обязательно считаются спецификацией веб-компонентов, они позволяют инженерам по существу повторно использовать стиль в пользовательских элементах, использующих Shadow DOM. Пользовательские свойства CSS присутствуют в каждом современном браузере.

CSS Shadow Parts позволяют хозяевам теней «выборочно выставлять выбранные элементы из своего дерева теней на внешнюю страницу для стилизации». CSS Shadow Parts полезны для тематизации или других настроек стиля в пользовательских элементах, использующих Shadow DOM. CSS Shadow Parts есть в каждом современном браузере.

Предложения по спецификациям

Веб-компоненты — это набор спецификаций браузеров. Спецификации появляются с течением времени: предлагаются, проходят итерации, разрабатываются и интегрируются в браузеры. Спецификации Web Components поддерживаются и предлагаются в нескольких местах. Индекс можно найти на Web Incubator CG Github в репозитории README.md.

Различные спецификации находятся на той или иной стадии процесса предложения, что влияет на Web-компоненты. Эти спецификации описаны ниже.

Декларативный теневой DOM

В начале 2020 года было представлено пояснение для декларативного Shadow DOM — спецификации, которая позволяет объявлять Shadow DOM в шаблоне HTML, а не в обязательном порядке в определении класса JavaScript. Декларативный Shadow DOM обеспечивает рендеринг пользовательских элементов на стороне сервера. С тех пор в Google Chrome и Microsoft Edge был реализован декларативный Shadow DOM. Для реализации спецификации в Mozilla Firefox и Apple Safari требуется ponyfill.

В видении Mozilla по эволюции веба фонд видит «возможности для улучшения или добавления примитивов, обеспечивающих декларативные альтернативы для ситуаций, которые в настоящее время требуют JavaScript». Это указывает на то, что Mozilla, скорее всего, будет реализовывать такие спецификации, как Declarative Shadow DOM, как и комментарии, подобные этому, хотя в прошлом Mozilla критиковала эту спецификацию. WebKit не сигнализировал о поддержке Declarative Shadow DOM. Прогресс в развитии декларативного теневого DOM можно отследить здесь и здесь.

Стоит отметить, что Lit продвинулся вперед, предоставив пакет @lit-labs/ssr, который серверно рендерит пользовательские элементы и активно использует Declarative Shadow DOM.

Конструируемые таблицы стилей

В 2018 году было представлено объяснение для Constructable Stylesheets. Конструируемые таблицы стилей позволяют пользователям программно составлять стили CSS без необходимости использования тега <style>. Это способствует повторному использованию стилей CSS, помогая решить проблему, распространенную при разработке библиотек пользовательского интерфейса, когда один и тот же CSS повторяется по всей кодовой базе. Конструируемые таблицы стилей работают через границы теней, заменяя необходимость использования селекторов CSS в более ранних версиях спецификаций веб-компонентов (/deep/, >>> и ::shadow). В настоящее время Constructable Stylesheets доступны в Google Chrome и Microsoft Edge. Для браузеров, в которых отсутствует спецификация, существует полифилл.

Mozilla в настоящее время реализует Constructable Stylesheets для Mozilla Firefox. WebKit не заявлял о поддержке спецификации.

Инстанцирование шаблона HTML

HTML Template Instantiation была предложена компанией Apple в 2017 году. HTML Template Instantiation позволил бы HTML-шаблонам инстанцироваться «с заменой, условным включением или повторением некоторых частей на основе значений JavaScript», подобно синтаксису, доступному в Angular, Vue или Ember. Существует ponyfill, несмотря на полное отсутствие поддержки в браузере.

Другие спецификации

Среди спецификаций веб-компонентов, находящихся на ранних стадиях разработки, можно назвать Partial Hydration, Pending Task Protocol и Context Protocol.

Для получения дополнительной информации о готовящихся спецификациях ознакомьтесь с документом Web Components Community Group 2021 Spec / API Status Document.

Сообщество

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

Группа сообщества веб-компонентов помогает «сотрудничеству между людьми, работающими над библиотеками, инструментами, документацией и стандартами веб-компонентов». Эта группа помогает продвигать стандарты, организовывать конференции и встречи, а также многое другое. Для веб-компонентов существует организация Slack, где инженеры могут объединяться.

Экземпляр Forem, посвященный веб-компонентам, стал доступен в 2022 году.

Сообщество Web Components в Twitter было сформировано в 2022 году.

На Reddit уже некоторое время существует сообщество веб-компонентов.

Веб-компоненты Fullstack

Вы хотите заняться разработкой веб-компонентов, но не знаете, с чего начать? Я написал книгу под названием Fullstack Web Components — практическое руководство по созданию библиотек пользовательского интерфейса и веб-приложений с пользовательскими элементами. В книге Fullstack Web Components вы…

  • Создадите несколько компонентов, используя автономные, встроенные и связанные с формой пользовательские элементы, Shadow DOM, шаблоны HTML, переменные CSS и декларативный Shadow DOM.
  • Разработаете микробиблиотеку с декораторами TypeScript, которая упрощает разработку компонентов пользовательского интерфейса
  • Изучите передовые методы поддержки библиотеки веб-компонентов пользовательского интерфейса с помощью Storybook.
  • Создайте приложение, используя веб-компоненты и TypeScript.

Fullstack Web Components уже доступна на сайте newline.co

Оцените статью
Procodings.ru
Добавить комментарий