Веб-компоненты на I/O 2019
На Google I/O 2019 Кевин Шааф из Polymer Project и Кэриди Патиньо из Salesforce рассказали о состоянии веб-компонентов.
Насколько популярны веб-компоненты?
Если вы сегодня пользовались Интернетом, вы, вероятно, использовали веб-компоненты. По нашим подсчетам, сегодня от 5% до 8% всех загрузок страниц используют один или несколько веб-компонентов. Это делает веб-компоненты одной из самых успешных новых функций веб-платформы, представленных за последние пять лет.
Вы можете найти веб-компоненты на сайтах, которыми вы, вероятно, пользуетесь каждый день, например на YouTube и GitHub. Они также используются на многих новостных и издательских сайтах, созданных с использованием AMP . Компоненты AMP также являются веб-компонентами. Многие предприятия также внедряют веб-компоненты.
Что такое веб-компоненты?
Так что же такое веб-компоненты? Спецификации веб-компонентов предоставляют низкоуровневый набор API-интерфейсов, которые позволяют расширять встроенный в браузер набор HTML-тегов. Веб-компоненты обеспечивают:
- Распространенный метод создания компонента (с использованием стандартных API DOM).
- Распространенный способ получения и отправки данных (с использованием свойств/событий).
За пределами этого стандартного интерфейса стандарты ничего не говорят о том, как на самом деле реализован компонент:
- Какой механизм рендеринга он использует для создания своего DOM.
- Как он обновляется в зависимости от изменений своих свойств или атрибутов.
Другими словами, веб-компоненты сообщают браузеру, когда и где создавать компонент, но не как .
Авторы могут выбирать функциональные шаблоны рендеринга, такие как React, для создания своих веб-компонентов, или они могут использовать декларативные шаблоны, такие как Angular или Vue. Как автор, вы имеете полную свободу выбора технологии, которую вы используете внутри компонента, сохраняя при этом совместимость.
Для чего нужны веб-компоненты?
Ключевое различие между веб-компонентами и проприетарными компонентными системами — это совместимость . Благодаря стандартному интерфейсу вы можете использовать веб-компоненты везде, где используется встроенный элемент, например <input> или <video> .
Поскольку они могут быть выражены как настоящий HTML, их можно визуализировать всеми популярными платформами. Таким образом, ваши компоненты можно будет использовать более широко и в более разнообразных приложениях, не привязывая пользователей к какой-либо одной платформе.
А поскольку интерфейс компонента стандартен, веб-компоненты, реализованные с использованием разных библиотек, можно смешивать на одной странице. Этот факт помогает защитить ваши приложения от будущего при обновлении вашего технологического стека. Вместо гигантского поэтапного перехода от одной платформы к другой, при котором вы заменяете все компоненты, вы можете обновлять компоненты по одному.
Кто использует веб-компоненты?
Таким образом, по всем этим причинам веб-компоненты на самом деле пользуются огромным успехом в самых разных случаях использования. Особой популярностью пользуются три варианта использования: сайты с контентом, системы дизайна и корпоративные приложения.
Контентные сайты
Веб-компоненты являются идеальной технологией для постепенного улучшения контента, поскольку они уже могут выводиться в виде стандартного HTML бесчисленным количеством систем CMS.
AMP — отличный пример того, как быстро и легко веб-компоненты внедряются в инфраструктуру издательской индустрии для обслуживания контента.
Системы проектирования
Все больше и больше компаний унифицируют способы своего представления, используя систему дизайна — набор компонентов и руководящих принципов, которые определяют общий внешний вид сайтов и приложений организации. Веб-компоненты и здесь отлично подходят.
Часто дизайнерам приходится сталкиваться с тем, что множество команд создают свои собственные версии компонентов системы дизайна поверх React, Angular и всех других фреймворков вместо того, чтобы иметь единый набор канонических компонентов.
Веб-компоненты — это ответ: по-настоящему написанная один раз система компонентов, запускаемая повсюду, которая по-прежнему дает командам разработчиков приложений свободу использовать платформу по своему выбору.
Такие компании, как ING, EA и Google, реализуют язык дизайна своей компании в веб-компонентах.
Предприятие: веб-компоненты в Salesforce
Веб-компоненты также набирают популярность внутри предприятий как безопасная, ориентированная на будущее технология, которую можно стандартизировать. Кэриди Патиньо, архитектор платформы пользовательского интерфейса Salesforce, объяснила, почему они построили свою платформу пользовательского интерфейса с использованием веб-компонентов.
Salesforce — это набор приложений, многие из которых появились в результате приобретений. Каждый из них может работать на своем собственном технологическом стеке. Поскольку они построены на разных стеках, сложно придать им одинаковый внешний вид. Кроме того, Salesforce позволяет клиентам создавать собственные приложения с использованием платформы Salesforce. Поэтому в идеале компоненты должны быть доступны и сторонним разработчикам.
Salesforce определила набор потребностей клиентов своей платформы:
- Стандартные, а не проприетарные решения, поэтому легче найти опытных разработчиков и быстрее набрать новых разработчиков.
- Модель общих компонентов, поэтому настройка любого приложения Salesforce работает одинаково.
Они также определили некоторые вещи, которые не нужны клиентам:
- Критические изменения в их компонентах и приложениях. Другими словами, обратная совместимость была просто необходима.
- Застрял в старых технологиях и не способен развиваться.
- Застрять в огороженном саду.
Использование веб-компонентов в качестве основы для новой платформы пользовательского интерфейса удовлетворило все эти потребности, и результатом стали новые веб-компоненты Lightning .
Начало работы с веб-компонентами
Есть много отличных способов начать работу с веб-компонентами.
Если вы создаете веб-приложение, рассмотрите возможность использования некоторых из множества готовых веб-компонентов. Вот несколько примеров:
- Google предлагает собственную систему материального дизайна в виде веб-компонентов: Material Web Components .
- Wired Elements — это классный набор веб-компонентов, которые имеют схематичный, нарисованный от руки вид.
- Существуют отличные веб-компоненты специального назначения, такие как
<model-viewer>, которые вы можете добавить в любое приложение для добавления 3D-контента.
Если вы разрабатываете систему дизайна для своей компании или продаете отдельный компонент или библиотеку, которую вы хотите использовать в любой среде, рассмотрите возможность создания своих компонентов с использованием веб-компонентов. Вы можете использовать встроенные API-интерфейсы веб-компонентов, но они довольно низкоуровневые, поэтому существует ряд библиотек, которые упрощают этот процесс.
Чтобы начать создавать свои собственные компоненты, вы можете воспользоваться LitElement, базовым классом веб-компонентов, разработанным Google, который имеет великолепные возможности функционального рендеринга, аналогичные React.
Другие инструменты и библиотеки, которые стоит рассмотреть:
- Stencil — это фреймворк, ориентированный на веб-компоненты. Он включает в себя несколько популярных функций платформы, таких как JSX и TypeScript.
- Angular Elements предоставляет способ обернуть компоненты Angular в веб-компоненты.
- Оболочка веб-компонента Vue.js позволяет упаковать компоненты Vue как веб-компоненты.
Дополнительные ресурсы:
- На open-wc.org представлена отличная информация для начала работы, а также советы и настройки по умолчанию для инструментов сборки и разработки.
- В разделе «Основы веб-технологий» представлены базовые API-интерфейсы веб-компонентов, а также лучшие практики проектирования веб-компонентов.
- MDN предоставляет справочную документацию по API веб-компонентов, а также несколько руководств. \
Изображение героя Джейсона Туинстра на Unsplash.
Примечание редактора: диаграмма использования пользовательских элементов была обновлена и теперь отображает полные данные об использовании за месяц, как сообщается на chromestatus.com . Предыдущая версия этого поста включала график с детализацией по 6 месяцев, без последних месяцев. Серии V0 и V1 в исходной таблице были сложены друг на друга; теперь они отображаются без суммирования с общей строкой, чтобы устранить двусмысленность. Резкий скачок в конце 2017 года связан с изменением системы сбора данных chromestatus.com. Это изменение повлияло на статистику всех функций веб-платформы и привело к более точным измерениям в будущем.