Поскольку я работаю с веб-компонентами и пытаюсь способствовать распространению технологий внутри своей компании и в сообществе разработчиков, вопрос взаимодействия с фреймворками и библиотеками очаровал меня 😍. Чтобы попытаться объяснить это, я создал небольшую лабораторию, где на примерах я пытаюсь продемонстрировать, как веб-компоненты могут работать где угодно. В конце поста у вас есть ссылка на примеры в Glitch и исходный код, но перед этим небольшое введение ...
Веб-компоненты дают разработчикам возможность определять свои собственные HTML-элементы. В сочетании с Теневой DOM, Пользовательскими элементами и Спецификацией модулей ES позволяет вам определять включение и повторное использование JS-документов на основе стандартов, модульности и производительности.
Веб-компоненты основаны на веб-стандартах, и по этой причине эти элементы должны работать на любой HTML-странице.
Использование веб-компонентов в качестве модели компонентов платформы
Внедрение веб-компонентов позволяет экосистеме интерфейсной разработки развиваться в направлении, близком к стандарту, и со временем попытаться стандартизировать сообщество.
Выбор использования определенной платформы может удовлетворить все ваши потребности, но для крупных и средних организаций с несколькими командами и разрозненными стеками, возможностью повторного использования и взаимодействия новых разработок в существующих приложениях или попыток стандартизировать использование нескольких структур и библиотек выберите Web Компоненты - это огромная победа.
Это делает их идеальными для совместного использования элементов пользовательского интерфейса в большой организации, публикации компонентов для использования в любом месте в Интернете или создания систем дизайна пользовательского интерфейса, таких как Material Design.
До объединения веб-компонентов в состоянии объединения всех основных браузеров решение заключалось в использовании фреймворков и библиотек в рамках их собственной компонентной модели.
- Угловой: https://angular.io/guide/architecture-components
- Vue.js: https://vuejs.org/v2/guide/#Composing-with-Components
- Реакция: https://reactjs.org/docs/react-component.html
- Ember: https://guides.emberjs.com/release/components/defining-a-component/
На данный момент у меня вопрос: насколько легко использовать компоненты в этих моделях, определенных фреймворками и библиотеками, в приложениях, созданных в разных моделях? 🤔
Angular (Angular Elements) или Vue.js, например, позволяют упаковывать свои компоненты как пользовательские элементы без привязки к фреймворку,
но этот подход к стандарту, на мой взгляд, не является чистым вообще, и конечный результат экспортированного компонента из Angular или Vue.js включает больше, чем нужно.
Использование LitElement в моей лаборатории взаимодействия веб-компонентов.
LitElement - это простой базовый класс для создания быстрых и легких веб-компонентов. Это часть непрерывной работы команды Полимерный проект - следовать отстаиванию стандартов.
LitElement следует стандартам веб-компонентов, поэтому ваши компоненты будут работать с любым фреймворком.
LitElement упрощает определение веб-компонентов - идеально подходит для совместного использования элементов в вашей организации или создания системы дизайна пользовательского интерфейса.
LitElement использует пользовательские элементы для легкого включения в веб-страницы и Shadow DOM для инкапсуляции. На вершине веб-платформы нет новой абстракции.
Используйте свои компоненты везде, где вы используете HTML: в своем основном документе, в CMS, Markdown или в таких фреймворках, как React или Vue.
Вы также можете смешивать компоненты LitElement с другими веб-компонентами, независимо от того, были ли они написаны с использованием обычных веб-технологий или созданы с помощью других инструментов, таких как Stencil, SkateJS или Библиотека полимеров.
Первое, что нужно сделать для моих тестов, - это создать простой веб-компонент с LitElement. Компонент позволяет получать данные кредитной карты, и если вы нажмете на изображение «Visa», отправьте настраиваемое событие со всей информацией о карте.
Вы можете показать код здесь: https://github.com/sergicontre/my-credit-card
Следуя схеме взаимодействия, когда веб-компоненты получают информацию через свои свойства и / или атрибуты и запускают события для отправки информации или сообщения об изменении состояния другим компонентам, тесты проверяют, что библиотека / фреймворк позволит вам делать такие вещи, как отображение вашего Веб-компоненты внутри фреймворка или библиотеки, привязывают к ним данные и отслеживают события.
Вы можете увидеть, как использовать мой веб-компонент с LitElement и основными фреймворками или библиотеками, по следующей ссылке, которую я создал в Glitch:
Https://glitch.com/@sergicontre/web-components-interoperability-lab
если у вас есть проблемы с запуском примеров в Glitch, вы можете клонировать репозитории из моего Github:
