Зачем использовать веб-компоненты?
В этой статье мы объясним, почему многим так нравятся веб-компоненты и почему мы можем их использовать. Попутно мы также развеем некоторые мифы. Вы готовы?
Зачем использовать веб-компоненты?
JavaScript-фреймворки предлагают множество преимуществ:
- Экономия энергии. Современные JavaScript фреймворки наполнены лучшими практиками, инструментами, парадигмами и отраслевыми стандартами, что позволяет нам создавать и публиковать приложения в кратчайшие сроки. Это позволяет разработчикам сосредоточиться на фактической разработке, а не на инструментах и архитектуре.
- Многократно используемый код. Компоненты, созданные с помощью JavaScript-фреймворка, взаимозаменяемы (в рамках приложений, использующих тот же фреймворк), поэтому командам не приходится дважды изобретать велосипед.
- Общий язык для всех. Использование JavaScript-фреймворка создает общее понимание между разработчиками. Все "говорят" на одном и том же общем языке и находятся на одной странице.
Неудивительно, что почти каждое приложение JavaScript построено с использованием (современного) фреймворка или библиотеки JavaScript, так почему же мы должны использовать веб-компоненты вместо того, чтобы использовать наш любимый фреймворк? Какие проблемы решает использование "родной" компонентной модели?
Согласованность
Хорошие, согласованные приложения предлагают удобные интерфейсы и имеют высокие показатели конверсии. Однако, приложения могут быть созданы тяп-ляп, разными программистами, которые и не слышали о каких-то договоренностях в коде. Разделение приложений на библиотеки компонентов повышает согласованность дизайна, но только в том случае, если они совместимы с различными технологическими стеками.
Веб-компоненты с их API, основанными на веб-стандартах, взаимозаменяемы между различными техническими стеками, фреймворками и библиотеками JavaScript и обеспечивают идеальную техническую базу для согласованности дизайна во всех приложениях.
Удобство обслуживания
Создание устойчивых и поддерживаемых приложений - одна из самых сложных задач в веб-разработке. Код постоянно копируется из одной части приложения в другую, по сути, создавая новые версии, которые приходится поддерживать бесконечно, что приводит к адским проблемам с обслуживанием.
Веб-компоненты могут поддерживаться одним разработчиком (или командой) и предоставляться другим. Разработчики заботятся о компонентах, а пользователи могут автоматически получать обновления (например, с помощью npm) и продолжать свою работу, не опасаясь окунуться в ад сопровождения.
Многоразовость
Будьте проще, глупее и не повторяйтесь (Keep It Simple Stupid, и Don't Repeat Yourself) - это мантры, которые мы постоянно повторяем, и которые являются ключевой частью создания понятных, поддерживаемых и многократно используемых приложений. Это одна из самых сложных задач в веб-разработке. С помощью веб-компонентов мы решаем эту проблему, определяя разметку на JavaScript. В дальнейшем разработчик может свободно изменять HTML, CSS и JavaScript, а пользователь может воспользоваться изменениями автоматически, без необходимости обновлять код вручную.
Операционная совместимость
JavaScript-фреймворки, такие как Angular, React и VueJs - это потрясающе! В них собраны лучшие практики, инструменты для создания конструкторов, парадигмы и промышленные стандарты, которые позволяют нам создавать и публиковать приложения в кратчайшие сроки, но они не очень совместимы - они не очень хорошо взаимодействуют друг с другом. Это происходит потому, что все они имеют различные, не взаимозаменяемые модели компонентов. Конечно есть так называемые микрофронтенды, однако есть более "правильный" подход.
Веб-компоненты полностью основаны на веб-стандартах и совместимы с любой библиотекой JavaScript или фреймворком (или без них). Это означает, что они полностью совместимы между фреймворками и приложениями. Теперь становится возможным поддерживать несколько приложений с компонентами пользовательского интерфейса из одной базы данных.
Читабельность
Самая важная аудитория для нашего кода - это люди (мы сами и другие разработчики и пользователи), поскольку именно мы будем делать или разбирать программу в будущем. К сожалению, код не всегда хорош и многие HTML-страницы оказываются в невыразительном и нечитаемом виде из <div/>, как, например, страница Gmail от Google:
Веб-компоненты позволяют нам организовать весь этот суп из <div/> в понятный, читабельный, семантически дружественный код, создавая пользовательские элементы там, где мы считаем нужным. Вот пример того, как это будет выглядеть:
<google-mail>
<mail-list>
<mail-item from="[email protected]">
<h2>Hello World</h2>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</mail-item>
</mail-list>
</google-mail>Полная инкапсуляция
Теневой DOM позволяет веб-браузерам изолировать фрагменты DOM. Это означает, что нам не нужно беспокоиться об утечке стилей и логики в наши веб-компоненты и из них. Другими словами: Они полностью инкапсулированы.
Веб-компоненты прекрасно совместимы с любыми библиотеками JavaScript.
Как уже упоминалось в первой статье, поддержка веб-компонентов со стороны фреймворков и библиотек JavaScript превосходна и постоянно растет! Веб-компоненты можно использовать с:
Развенчание мифов о веб-компонентах
Почему не стоит использовать веб-компоненты? Существует множество мифов о том, почему не стоит использовать веб-компоненты. Основная причина заключается в том, что они построены на развивающихся веб-стандартах, которые имеют свои недостатки и ограничения. Я знаю несколько мифов, и теперь пришло время развеять их!
МИФ №1. Веб-компоненты не могут быть отрендерены на стороне сервера (SRR)
Неправда! Поскольку веб-компоненты основаны на веб-стандартах, их можно прекрасно рендерить на стороне сервера. Это может быть трудно сделать, если вы создаете решение с нуля, но такие библиотеки, как SkateJs и Stencil, сделают всю тяжелую работу за вас.
МИФ №2. Веб-компоненты недоступны (a11y)
Неправда! Основная причина, по которой люди думают, что веб-компоненты недоступны, заключается в том, что содержимое HTML включено в теневой DOM, а не в основной DOM, но на самом деле это совершенно не влияет на доступность! Информация a11y корректно отображается через API доступности, и экранные считыватели могут получить доступ к содержимому в теневом DOM без каких-либо трудностей.
МИФ №3. Веб-компоненты не готовы к использованию в коммерческих целях
Неправда! Люди считают, что поскольку веб-компоненты построены на развивающихся веб-стандартах, они не готовы к производству, но это неправда! Все стандарты W3 постоянно развиваются, а это значит, что ни одна технология никогда не будет готова к производству, что является бессмыслицей.
Кроме того, Apple, Salesforce и GitHub используют веб-компоненты в производстве. Вам нужны еще доказательства?
Заключение
Хотя фреймворки и библиотеки JavaScript предлагают разработчикам множество преимуществ, у них есть и свои недостатки, и именно здесь веб-компоненты могут отлично заполнить пробел. Основанные на веб-стандартах, веб-компоненты идеально подходят для обеспечения согласованности, являются обслуживаемыми, многократно используемыми, совместимыми и читаемыми. Они также полностью совместимы с (или без) любым фреймворком/библиотекой JavaScript и обеспечивают полную инкапсуляцию.
Многие мифы создают негативное представление о веб-компонентах и о том, почему люди не используют их, но большинство из них развеяны, и ничто не мешает вам использовать их в полную силу!
Источник: https://dev.to/stefannieuwenhuis/web-components-101-why-use-web-components-3me5