Что такое компонентная архитектура и почему она важна?

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

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

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

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

• Пользовательские элементы
• HTML шаблоны
• Тень 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 известен тем, что упрощает веб-разработку, объединяя HTML, CSS и JavaScript в один скрипт.

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

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

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

Полимер

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

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

Тонкий

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

Трафарет

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

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

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

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

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

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

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

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

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

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

 <a class="f6 link dim br3 ph3 pv2 mb2 dib white bg-black" href="#0">Button Text</a>

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

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

Мышление компонентами

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

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

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

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

СУХОЙ подход

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

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

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

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

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

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

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