В наши дни веб-компоненты - это естественный способ создания пользовательских интерфейсов в Интернете. Три самых популярных фреймворка (Angular, React и Vue.js) используют его как архитектурный элемент. Знаете ли вы, что мы можем использовать этот шаблон, используя только API веб-платформы, и в результате мы можем повторно использовать его во всех наших проектах Frontend? Эта статья покажет вам, как создать свой первый нативный веб-компонент и как использовать его с Angular, React и Vue.
Что такое веб-компоненты?
Веб-компоненты на высоком уровне представляют собой изолированные части (разновидности блоков) для пользовательского интерфейса (UI), которые могут взаимодействовать с другими элементами через свойства и события (входы и выходы из этих блоков). Возьмем, к примеру, элемент ‹video›. Мы можем использовать этот элемент с любыми технологиями браузера, и мы можем передавать такие свойства, как ширина и высота, и прослушивать события, такие как onclick. Говоря более строго, мы можем сказать, что веб-компоненты представляют собой набор API веб-платформы, которые позволяют нам создавать HTML-теги, которые будут работать в современных веб-браузерах и могут использоваться с любой технологией JavaScript (React, Angular, Vue.js и т. Д.) .).
У веб-компонентов четыре основных спецификации:
Зачем использовать веб-компоненты?
Зачем использовать веб-компоненты В настоящее время все фронтенд-разработчики сталкиваются с двумя большими проблемами, и это может стать источником энергии, времени и денег для компаний. Эти:
Устаревшие
Наследие - хорошо известная проблема в разработке программного обеспечения. Наследие означает старую кодовую базу, которую нам нужно обновить для взаимодействия с современными проектами и инструментами JavaScript.
Отток фреймворка
Экосистема инструментов и фреймворков JavaScript быстро меняется. Выбор правильной структуры для нашего нового проекта обычно вызывает стресс и утомляет, потому что мы не можем предположить, сколько времени она будет актуальной. Мы будем рассчитывать на поддержку всего сообщества и инструментов, стоящих за этой актуальностью; тогда отток Framework означает проблему актуальности и того, как повлияет на наши инвестиции в обучение и разработку набора инструментов, которые могут быстро превратиться в устаревшую кодовую базу. Помните, что веб-компоненты - это набор спецификаций веб-платформы. Мы используем то, что, вероятно, надолго будет использоваться в веб-браузерах и дает нам следующие преимущества:
- Веб-компоненты могут использоваться повторно и работают между фреймворками.
- Веб-компоненты могут работать во всех основных веб-браузерах.
- Веб-компоненты легко обслуживаются и подготовлены к будущему, главным образом потому, что они основаны на спецификациях веб-платформы.
Как создать веб-компонент?
Чтобы узнать о веб-компонентах, мы создадим компонент, который упрощает отображение сообщений об ошибках / предупреждениях. Этот компонент будет называться error-component и получит сообщение в содержимом и тип ошибки в качестве атрибута.
Сначала мы собираемся создать файл index.html и добавить базовую структуру HTML.
Теперь мы создадим класс ErrorComponent, который расширяется от HTMLElement, используя объект customElements, и мы собираемся определить элемент ‹error-component›.
Благодаря этому веб-браузер знает, что существует новый элемент и что класс ErrorComponent описывает его поведение. Затем мы можем использовать этот новый элемент в нашем HTML.
Теперь в нашем конструкторе () мы добавим Shadow DOM с помощью this.attachShadow (), и мы собираемся добавить шаблоны элементов и контейнер к нашему компоненту. Кроме того, мы используем статический метод template () для получения разметки и стилей. Если вы помните, наш компонент получает атрибут 'kind', который может быть 'error' или 'warning', мы получаем это значение с помощью this.getAttribute () и используем его для активации HTML-шаблона, который мы хотим показать, используя a this.templates.querySelector () и метод template.content.cloneNode (true).
‹Template› позволяет нам определять заполнители, которые мы не будем обрабатывать, пока не активируем его. Затем мы собираемся определить здесь метод template (); мы определяем три ‹template› с их стилями и элементом ‹slot›. Этот элемент является заполнителем, который будет показывать содержимое, которое мы отправляем между содержимым ‹error-component› ‹/error-component›.
Если мы откроем файл index.html, мы увидим наши сообщения разного цвета, в зависимости от того, сообщение об ошибке или предупреждение.
Как опубликовать веб-компонент?
‹Error-component› работает, но что, если я захочу использовать этот веб-компонент в другом проекте JS? Что ж, для этого нам нужно приложить дополнительные усилия, чтобы опубликовать компонент как пакет npm, и таким образом, когда я захочу повторно использовать компонент, просто запустите
$ npm установить компонент простой ошибки
Звучит здорово, правда?
Хорошо, тогда сначала нам нужно лучше организовать наш код. В корне моего проекта я создам папки src / и example / и создам файл package.json и следующее описание.
И после этого собираюсь запустить:
$ npm install
На этом шаге будут установлены все зависимости, необходимые для распространения нашего компонента.
В папке src / я создам файл index.js и добавлю следующий код.
При этом я использую модули ES, чтобы сделать наш компонент модульным. И если вы видите в index.js, мы используем './error-component', что означает, что нам нужно создать файл src / error-component.js, и туда мы собираемся добавить код для нашего компонента. .
В примере папки / мы создадим файл index.html и добавим следующее:
В этом файле мы собираемся тестировать наш код каждый раз, когда вносим какие-то изменения и запускаем команду:
$ npm запускать
Мы собираемся загрузить этот файл, полифил веб-компонентов, чтобы он работал в старых веб-браузерах, и наш пакет кода компонентов, который находится в ./dist/index.js
Теперь мы собираемся создать файл webpack.config.js
При этом мы используем webpack для создания пакета в папке dist /.
Хорошо, теперь нам нужно запустить:
$ npm запустить сборку
и опубликуйте наш пакет с помощью:
$ npm опубликовать
И мы опубликовали этот пакет на npmjs.org
и мы можем добавить этот компонент в наш проект с помощью:
$ npm i компонент простой ошибки
Затем я собираюсь повторно использовать этот компонент в приложении с Angular, React и Vuejs.
Угловой
В Angular я создал новое приложение Angular с Angular CLI.
$ ng новое приложение angular
Установите мой веб-компонент с помощью:
$ npm i компонент простой ошибки
И добавляем компонент в app.module.ts.
и CUSTOM_ELEMENTS_SCHEMA в app.module.ts. Таким образом, Angular поймет, что мы используем собственные веб-компоненты.
Теперь я могу использовать свой компонент в приложении Angular, как вы видите в коде:
Затем я могу увидеть результат:
$ нг подавать
Реагировать
В reactjs я создал новое приложение с помощью Create App.
$ создать-реагировать-приложение реагировать-приложение
Установите мой веб-компонент с помощью:
$ npm i компонент простой ошибки
И добавляю свой компонент в App.js
Затем я могу увидеть результат:
$ npm запускать
Vue
В Vuejs я создал новое приложение, используя Vue CLI.
$ vue создать vue-приложение
Установите мой веб-компонент с помощью:
$ npm i компонент простой ошибки
И добавляем мой компонент в src / App.vue
Затем я могу увидеть результат:
$ npm run serve
Вы можете проверить код в https://github.com/carlosrojaso/demo-native-web-components
Я надеюсь, что этот пост может быть полезным, и не забываю комментировать, если у вас есть вопросы, или писать мне в Twitter. Пока :)
