Введение в веб-компоненты и полимеры (учебник)

Современные веб-приложения не только сложны в разработке, но и довольно сложны в разработке. Принимая во внимание диапазон используемых инструментов, объем необходимого тестирования и комбинацию используемых библиотек / сред, процесс разработки стал более сложным. По мере масштабирования приложения в течение определенного периода времени становится все труднее поддерживать код и вносить улучшения.

Например, взгляните на код внешнего интерфейса этих нескольких популярных веб-сайтов:

Инструменты разработчика могут не обязательно указывать на сложность реального исходного кода, но это, безусловно, дает вам представление о сложной структуре DOM современных веб-приложений. Во многом это связано с неразборчивым использованием div(s)span(s) Много было сказано о семантической ценности тегов HTML5, но они все еще не обеспечивают содержательную разметку, в основном по двум причинам:

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

Решение семантического безумия

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

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

Веб-компоненты состоят из четырех различных спецификаций:

1. Пользовательские элементы — они позволяют разработчикам создавать свои собственные элементы, которые имеют отношение к их дизайну, как часть структуры DOM, с возможностью стилизовать / писать их так же, как любой другой HTML-тег.
2. HTML-шаблоны — они позволяют определять фрагменты разметки, которые остаются согласованными на веб-страницах, с возможностью вставки динамического содержимого с помощью JavaScript.
3. Shadow DOM — предназначен для абстрагирования всех сложностей от разметки путем определения функциональных границ между деревом DOM и поддеревьями, скрытыми за теневым корнем.
4. Импорт HTML — Подобно импорту одного файла CSS в другой, они позволяют включать и повторно использовать документы HTML в других документах HTML.

Что такое полимер?

Представленные выше спецификации являются довольно новыми, и неудивительно, что поддержка браузера не очень хорошая . Но благодаря библиотеке Polymer , созданной замечательными людьми в Google, мы можем использовать все эти функции в современных браузерах сегодня. Polymer предоставляет набор polyfill, который позволяет нам использовать веб-компоненты в несовместимых браузерах с простой в использовании структурой. Полимер делает это путем:

1. Позволяет нам создавать пользовательские элементы с заданными пользователем схемами именования. Эти пользовательские элементы могут затем распространяться по сети и использоваться другими пользователями с импортом HTML .
2. Разрешение каждому пользовательскому элементу иметь собственный шаблон, сопровождаемый стилями и поведением, необходимыми для использования этого элемента.
3. Предоставление набора готовых элементов UI и не-UI для использования и расширения в вашем проекте.

Примечание: X-Tag — это аналогичный проект Mozilla, который обещает использование пользовательских элементов во всех современных браузерах.

В этой статье основное внимание уделяется использованию визуальных элементов, которые являются частью библиотеки Polymer. Коллекция элементов разделена на два раздела:

1. Основные элементы — это набор визуальных и невизуальных элементов, предназначенных для работы с приложениями макета, взаимодействия с пользователем, выбора и создания лесов.
2. Бумажные элементы — реализует философию дизайна материалов, недавно представленную Google на Google I / O 2014 , и включает в себя все — от простой кнопки до диалогового окна с аккуратными визуальными эффектами.

Установка Полимера

Рекомендуемый способ установки Polymer (v0.3.4) — через Bower. Bower — менеджер пакетов, который управляет зависимостями вашего проекта. Если вы не знакомы с Bower, то я рекомендую вам прочитать инструкции на его веб-сайте, чтобы узнать, как установить его и начать работу с ним.

Предполагая, что у вас настроена папка проекта с файлом bower.json

 bower install --save Polymer/polymer

Это установит библиотеку Polymer и полифилы платформы внутри папки bower bower-components

 bower_components/
├── core-component-page
├── platform
└── polymer

Примечание: --savebower.json Это полезно, когда вы хотите обновить пакеты, используемые в вашем проекте.

 <script src="bower_components/platform/platform.js"></script>

 bower install --save Polymer/paper-input

 <link href="bower_components/paper-input/paper-input.html" rel="import">

 <paper-input></paper-input>

 <paper-input floatingLabel label="Floating Label"></paper-input>

 paper-input { 
    width: 400px;
    height: 15px;
}

 .first-name {
    width: 400px;
    height: 15px;
}

 $('#first-name').addClass('show');

 paper-input::shadow .focusedColor {
    color: white;
    background: red;
}

 paper-input /deep/ .focusedColor { 
    color: white;
    background: red;
}

 paper-input .focusedColor { 
    color: white;
    background: red;
}