strokoff

Цикл статей про веб-компоненты

web-components

Эта запись будет начинать и содержать в себе цикл статей про устройство и работу с веб-компонентами в 2023 году, каким образом поддерживать последние практики в веб-разработке, список статей будет постоянно расти и пополняться, вы также можете принять участие в этом цикле и дополнить своими статьями и комментариями на сайте, и так поехали)

Что такое веб-компоненты?

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

Сама технология берет свое начало еще в 2013 году вот список ссылок для знакомства с веб компонентами

  1. learn.javascript.ru/web-components — Хорошая серия статей для знакомства с веб-компонентами
  2. 🇺🇸 developer.mozilla.org/en-US/docs/Web/Web_Components — Более подробная вводная статья, но на английском
  3. 🇺🇸 webcomponents.org — набор примеров реализованных компонентов веб сообществом
  4. список еще пополнится

Поддержка веб-компонентов

Web-компоненты замена современных фреймворков?
Однозначно нет — есть конечно представители фронтенда с перегибами в сторону нативных компонентов, как и есть армии фанатов react/vue/angular но у всех этих фреймворков уже есть поддержка web компонентов, b и интеграция с ними.Философия веб-компонентов гораздо глубже, чем просто любовь и хайп на год с каким-нибудь Nuxt1-2,Angular1-2 и тп в сухом остатке идеология разработки веб-компонентов уже пережила 4+ обновления nodejs, и 20+ версий современных фреймворков.
Для знакомства хорошо подойдет статья — полное погружение в веб-компоненты в 2023 году

  1. Vue и web компоненты 
  2. web компоненты вместе React
  3. angular guide elements руководство на 🇺🇸
  4. Статья про поддержку веб-компонентов в Safari на нашем сайте
  5. Поддержка associated-forms в Safari TP 
  6. Поддержка декларативного Shadow DOM в Safari TP162
  7. чеклист лучших практик по custom-elements от команды web.dev
  8. Еще один набор лучших практик по веб-компонентам переведен с medium.com

Разработка веб-компонентов

  1. Лайки для сайта
    1. Пишем переиспользуемый веб-компонент wc-likes
    2. Интегрируем wc-likes в WordPress
    3. Переиспользуем wc-likes как vue-likes компонент
  2. ElementInternals и ассоциированные с формой пользовательские элементы
  3. Создаем полноценный WYSIWYG компонент в двух частях
    1. Пишем собственный WISYWIG редактор на основе textarea и веб-компоненто. Часть 1 
  4. Расширяем возможности тега time с веб-компонентом wc-time
  5. Веб-компонент для svg иконок — svg-icon
  6. wc-editor
  7. и много чего еще..

Регистрируйтесь и оставляйте свои вопросы на тему веб-разработки, пререлизы и участие в ЗБТ новых функций ленты webislife и веб-компонентов доступно участникам телеграм канала webislife

Последняя редакция 4 сентября, 2024 в 12:09