Веб-компоненты на конференции Google I/O 2019
Опубликовано 18 июня 2019 г.
На конференции Google I/O 2019 Кевин Шааф (Kevin Schaaf) из Polymer Project и Кариди Патиньо (Caridy Patiño) из Salesforce рассказали о текущем состоянии веб-компонентов.
Насколько популярны веб-компоненты?
Если вы сегодня пользовались интернетом, то, скорее всего, сталкивались с веб-компонентами. По нашим подсчетам, от 5 до 8 % всех загрузок страниц сегодня используют один или несколько веб-компонентов. Это делает веб-компоненты одной из самых успешных новых функций веб-платформы, выпущенных за последние пять лет.
Веб-компоненты можно найти на сайтах, которые вы, вероятно, используете каждый день, например на YouTube и GitHub. Они также используются на многих новостных и издательских сайтах, созданных с помощью AMP. Компоненты AMP также являются веб-компонентами. Многие компании также внедряют веб-компоненты.
Что такое веб-компоненты?
Что такое веб-компоненты? Спецификации веб-компонентов предоставляют набор низкоуровневых API, которые позволяют расширить встроенный набор HTML-тегов браузера. Веб-компоненты обеспечивают:
- Стандартный метод создания компонента (с использованием стандартных API DOM).
- Общий способ получения и отправки данных (с использованием свойств/событий).
Помимо этого стандартного интерфейса, стандарты ничего не говорят о том, как компонент фактически реализован:
- Какой механизм визуализации используется для создания DOM.
- Как он обновляется на основе изменений его свойств или атрибутов.
Другими словами, веб-компоненты сообщают браузеру, когда и где создать компонент, но не как это сделать.
Авторы могут выбирать функциональные шаблоны рендеринга, такие как React, для создания своих веб-компонентов, или они могут использовать декларативные шаблоны, такие как вы можете найти в Angular или Vue. Вы можете использовать любые технологии, не беспокоясь о совместимости.
Для чего нужны веб-компоненты?
Основное различие между веб-компонентами и проприетарными системами компонентов заключается в совместимости. Благодаря стандартному интерфейсу веб-компоненты можно использовать везде, где вы бы использовали встроенный элемент, например <input> или <video>.
Поскольку они могут быть выражены в виде реального HTML, они могут быть отображены всеми популярными фреймворками. Это позволяет использовать компоненты в более широком спектре приложений, не ограничивая пользователей одним фреймворком.
Поскольку интерфейс компонентов стандартизирован, веб-компоненты, реализованные с помощью разных библиотек, можно использовать на одной странице. Это позволяет обеспечить совместимость приложений с будущими версиями набора технологий. Вместо того чтобы заменять все компоненты сразу, вы можете обновлять их по одному.
Кто использует веб-компоненты?
Поэтому веб-компоненты успешно применяются в самых разных ситуациях. Три варианта использования были особенно популярны: сайты с контентом, системы проектирования и корпоративные приложения.
Сайты с контентом
Веб-компоненты – идеальная технология для прогрессивного улучшения контента, поскольку они уже могут выводиться в виде стандартного HTML-кода бесчисленным количеством систем управления контентом.
AMP – отличный пример того, как быстро и легко веб-компоненты встроились в инфраструктуру издательской индустрии для показа контента.
Системы проектирования
Все больше компаний используют единый подход к оформлению своих продуктов, основанный на системе проектирования – наборе компонентов и рекомендаций, определяющих общий вид и стиль сайтов и приложений организации. Веб-компоненты отлично подходят и для этого.
Часто дизайнерам приходится иметь дело с множеством команд, создающих свои собственные версии компонентов системы проектирования поверх React, Angular и всех других фреймворков, вместо того чтобы иметь единый набор канонических компонентов.
Веб-компоненты – это ответ на вопрос, как создать систему компонентов, которая будет работать везде и при этом позволит разработчикам использовать любой фреймворк.
Такие компании, как ING, EA и Google, внедряют свои системы дизайна в веб-компоненты.
Корпоративные веб-компоненты в Salesforce
Веб-компоненты также становятся все более популярными в корпоративной среде как безопасная и перспективная технология, которую можно использовать в качестве стандарта. Кариди Патиньо (Caridy Patiño), архитектор платформы пользовательского интерфейса Salesforce, объяснил, почему они создали свою платформу пользовательского интерфейса с использованием веб-компонентов.
Salesforce – это набор приложений, многие из которых были приобретены. Каждый из них может работать на собственном стеке технологий. Поскольку они созданы на разных стеках, им сложно придать одинаковый внешний вид. Кроме того, Salesforce позволяет клиентам создавать собственные приложения на базе платформы Salesforce. Поэтому в идеале компоненты должны быть пригодны для использования и сторонними разработчиками.
Компания Salesforce выявила ряд потребностей клиентов своей платформы:
- Стандартные, а не проприетарные решения, благодаря которым проще найти опытных разработчиков и быстрее обучить новых.
- Общая модель компонентов, благодаря которой настройка любого приложения Salesforce выполняется одинаково.
Они также определили некоторые вещи, которые клиенты не хотели:
- Критические изменения в компонентах и приложениях. Другими словами, обратная совместимость была обязательным условием.
- Использование устаревших технологий и невозможность развиваться
- Ограничения закрытой экосистемы.
Использование веб-компонентов в качестве основы для новой платформы пользовательского интерфейса отвечало всем этим потребностям, и в результате появились новые веб-компоненты Lightning.
Начало работы с веб-компонентами
Существует множество способов начать работу с веб-компонентами.
Если вы создаете веб-приложение, используйте стандартные веб-компоненты. Вот некоторые из этих историй успеха:
- Google предлагает собственную систему проектирования Material Design в виде веб-компонентов: 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 веб-компонентов и руководства.