Веб-компоненты на конференции I/O 2019
Опубликовано: 18 июня 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, они могут быть отрисованы всеми популярными фреймворками. Таким образом, ваши компоненты могут использоваться в более широком спектре приложений, не привязывая пользователей к какому-либо одному фреймворку.
А поскольку интерфейс компонентов стандартизирован, веб-компоненты, реализованные с использованием разных библиотек, можно смешивать на одной странице. Это помогает обеспечить перспективность ваших приложений при обновлении технологического стека. Вместо резкого перехода от одного фреймворка к другому, когда заменяются все компоненты, вы можете обновлять компоненты по одному.
Кто использует веб-компоненты?
Поэтому по всем этим причинам веб-компоненты пользуются огромным успехом в самых разных областях применения. Особенно популярны три направления: контентные сайты, системы проектирования и корпоративные приложения.
Контент-сайты
Веб-компоненты — идеальная технология для постепенного улучшения контента, поскольку бесчисленное количество CMS уже сейчас может выводить их в формате стандартного HTML.
AMP — отличный пример того, как быстро и легко веб-компоненты влились в инфраструктуру издательской индустрии для предоставления контента.
Системы проектирования
Всё больше компаний объединяют свой подход к самопрезентации с помощью дизайн-системы — набора компонентов и рекомендаций, определяющих общий внешний вид сайтов и приложений организации. Веб-компоненты здесь тоже отлично подходят.
Зачастую дизайнерам приходится иметь дело с множеством команд, разрабатывающих собственные версии компонентов дизайн-системы на основе React, Angular и других фреймворков, вместо того чтобы иметь единый набор канонических компонентов.
Веб-компоненты — это решение: действительно система компонентов, написанная один раз и запускаемая везде, которая при этом предоставляет командам разработчиков приложений свободу выбора фреймворка.
Такие компании, как ING, EA и Google, внедряют фирменный стиль дизайна в веб-компоненты.
Enterprise: Веб-компоненты в Salesforce
Веб-компоненты также демонстрируют впечатляющие успехи внутри предприятий как безопасная, перспективная технология, которую можно стандартизировать. Кариди Патиньо, архитектор платформы пользовательского интерфейса 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 веб-компонентов, а также несколько обучающих материалов.