Введение в веб-компоненты и компонентную архитектуру

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

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

Веб-компоненты работают как Lego для HTML. Это набор технологий, которые помогают сделать HTML более полезным и многоразовым. Дополнительные сведения см. В спецификации веб-компонентов W3 и на странице сети разработчиков Mozilla, посвященной веб-компонентам.

Эти технологии:

  • Пользовательские элементы
  • HTML-шаблоны
  • Shadow DOM
  • ES-модули

Давайте рассмотрим их по очереди.

Пользовательские элементы

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

Шаблоны HTML

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

Теневой DOM

DOM — это клей, который связывает то, что вы видите в браузере, с HTML-кодом. Shadow DOM — это часть DOM, которая позволяет вам разделяйте разметку, стиль и функциональность.

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

Модули ES

Это специальные библиотеки JavaScript, которые заставляют веб-компоненты работать.

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

Веб-компоненты с фреймворком

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

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

Vue

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

По теме: что такое Vue.js?

React

React это интерфейсный фреймворк, который получил широкое коммерческое применение. Этот фреймворк также является фаворитом среди разработчиков. React известен тем, что упрощает веб-разработку, объединяя HTML, CSS и JavaScript в один скрипт.

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

Веб-компоненты без фреймворка

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

Полимер

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

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

Slim

Другой вариант — Slim.js, универсальная библиотека, которая упрощает добавление на простой веб-сайт. Он упрощает процесс создания настраиваемых элементов и обеспечивает прямой доступ к теневой модели DOM.

Шаблон

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

Stencil также предварительно компилирует ваши компоненты, что делает их легче. Напротив, такие фреймворки, как React, загружают весь фреймворк в браузер и компилируют компоненты на лету.. К тому времени, когда компоненты Stencil попадают в браузер, они представляют собой обычный JavaScript и HTML без лишнего багажа.

Веб-компоненты и веб-дизайн

Одним из основных препятствий при использовании компонентов является потеря фреймворков дизайна, таких как Bootstrap. Технически вы можете использовать Bootstrap с веб-сайтом на основе компонентов. И есть порт Bootstrap для React. Но если вы хотите использовать что-то вроде Stencil или Vue, вы можете быть недовольны отсутствием совместимости между вашими компонентами и фреймворком.

Традиционные рамки веб-дизайна

Хорошая новость в том, что существует несколько структур дизайна. выбирать из. Ваадин предоставляет несколько красивых компонентов. Для корпоративного стиля есть OpenUI5. И, как уже упоминалось, Google Polymer также предлагает компоненты пользовательского интерфейса Material.

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

Что такое компонентно-ориентированный подход к структуре проектирования?

Другая технология, такая как веб-компоненты, заслуживает другого подхода. Тахионы — лучший подход. Его проще использовать для дизайнеров, но он может дать разработчикам прочную и чистую основу. Tachyons ориентирован в первую очередь на мобильные устройства и обеспечивает единообразный дизайн, тонкий, но обеспечивающий прекрасные результаты.

Тахионы разбивают классы CSS на минимально возможное использование. Например, с ее помощью вы создаете кнопку:

   Текст кнопки   

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

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

Компонентное мышление

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

Атомарный подход

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

Кнопки, заголовки и кавычки подобны атомам. Атомы — это наименьшая возможная часть. Когда нет смысла разбирать компонент дальше, это атом. Обычно это компоненты, которые вы будете использовать снова и снова на протяжении всего проекта и, возможно, между проектами.

СУХОЙ подход

Или вы можете просто забыть всю эту чушь об организмах, клетках и атомах и оставить их СУХИМИ. DRY означает «Не повторяйся».

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

Следует ли использовать веб-компоненты в своем следующем проекте?

Основные моменты, которые следует учитывать, — это ваша команда и веб-стандарты.

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

Если у вас есть команда, не имеющая опыта работы с фреймворками или JavaScript, им может быть сложно принять эту новую технологию. Но, если бы это было так, им, вероятно, было бы сложно принять любую новую технологию. И если вы один, дерзайте! Всегда полезно развивать свои навыки.

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

Оцените статью
oilgasindustry.ru
Добавить комментарий