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

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

Заблуждение

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

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

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

Для чего предназначены веб-компоненты

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

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

Вот для чего нужны технологии веб-компонентов. Он призван дополнить эти библиотеки:

  • Расширение собственного API новыми возможностями и функциями;
  • Внедрение большинства популярных функций изначально, что автоматически поможет этим инструментам доставлять меньше кода в браузер;
  • Устраните необходимость установки всей библиотеки для определенных возможностей и используйте эти библиотеки как гораздо более простой и лучший способ справиться со сложностью собственного API.

Как эти библиотеки и платформы видят веб-компоненты

Все популярные UI-фреймворки и библиотеки уже рассматривают технологии веб-компонентов как замечательное дополнение и рекомендуют людям использовать их по своему усмотрению. Они не рассматривают веб-компоненты как конкурентов и работают с ними без проблем и даже представили новые API-интерфейсы, чтобы упростить процесс.

  • React рекомендует веб-компоненты, поскольку он создан для решения другой проблемы, чем React. Они видят в этом лучшую альтернативу созданию библиотек пользовательского интерфейса, поскольку они работают с любой другой сторонней библиотекой и не имеют встроенной инкапсуляции, которую не делает React.
  • VueJs представил API« defineCustomElement , чтобы упростить создание веб-компонентов и при этом пользоваться Vue. Они рассматривают веб-компоненты как альтернативу гораздо более низкого уровня, в которой отсутствуют дополнительные возможности, с которыми может помочь Vue, и поэтому они идеально подходят.
  • Angular представил« elements », которые компилируются в веб-компоненты. Они видят в этом мощный способ создания компонентов, которые можно использовать с другими сторонними библиотеками, такими как Vue и React. Это позволяет разработчикам продолжать писать компоненты в формате Angular и экспортировать их как веб-компоненты для браузера.
  • Svelte позволяет вам включить опцию« customElements », которая позволяет создавать веб-компоненты с помощью Svelte. Это признак того, что Svelte приветствует веб-компоненты, созданные на основе Svelte.

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

Проблемы, которые могут решить только веб-компоненты

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

  • Создание библиотеки пользовательского интерфейса один раз: преимущество использования веб-компонентов для создания библиотеки пользовательского интерфейса заключается в том, что вы создаете ее один раз, и ее можно использовать с любой сторонней библиотекой. Нет необходимости создавать версию библиотеки пользовательского интерфейса для React, другую для Angular или Vue, что упрощает поддержку с меньшими затратами или временем, требуемым для ее выпуска.
  • Инкапсуляция стиля компонентов: в течение десятилетий появлялось и исчезало множество решений, обещающих решить безумие коллизий CSS. С помощью веб-компонентов стиль изолирован от документа, что предотвращает конфликты, что позволяет упростить создание тем с помощью переменных CSS и расширение шаблона с помощью слотов.
  • Легче изменить библиотеку пользовательского интерфейса или структуру. Сегодня, когда компании решают перейти от одной библиотеки к другой, им необходимо заново переписать большинство своих компонентов. Создавая свои компоненты пользовательского интерфейса с помощью веб-компонентов, вы можете легко адаптировать любую новую библиотеку или фреймворк практически без перезаписи, чтобы обрабатывать логику взаимодействия между компонентами пользовательского интерфейса.
  • Разрешить участие пользовательского интерфейса в вашем приложении: вы можете разрешить пользователям добавлять свои компоненты пользовательского интерфейса в ваше приложение, не заставляя их создавать их с использованием той же технологии, которую вы используете. Вы можете создать свое приложение, например, с помощью React, а они могут использовать Angular. Пока он компилируется в веб-компоненты, эти части могут прекрасно работать вместе.
  • Перспективное решение для пользовательского интерфейса. Веб-компоненты - это не то, что связано с риском потери популярности или исчезновения со временем. Эти технологии никуда не денутся и будут постоянно совершенствоваться. Это безопасный и перспективный выбор, который дополняет все остальное.

Заключение

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

Изучение веб-компонентов - это просто расширение ваших знаний о DOM и API браузера, что вам нужно делать время от времени как веб-разработчику, чтобы в любом случае оставаться актуальным.

Если вам нужно больше примеров, ознакомьтесь с этими руководствами:

Канал YouTube: До точки с запятой
Веб-сайт: beforesemicolon.com