Сам по себе Polymer &mash; это набор полифилов и синтаксического сахара, которые делают работу с web-компонентами возможной уже сейчас (пока не все браузеры реализовали эту спецификацию) и более удобной, ведь вместе с этой библиотекой мы получаем:
- более простое создание web-компонентов;
- двухсторонний data-binding;
- динамические свойства;
- условные и повторяющиеся шаблоны;
- более удобную работу с событиями;
- библиотеку готовых компонентов, позволяющих избавиться от рутинных задач, а также набор material-design компонентов.
А теперь перейдём от слов к делу.
Начало работы
Для того чтобы поставить Polymer, рекомендуется использовать Bower – это менеджер пакетов, который используется на frontend’е.
npm install bower -g
Затем инициализируем bower в проекте с помощью следующей команды:
bower init
Перед вами появится ряд вопросов, после ответа на которые, в директории с проектом появится файл bower.json
с указанной вами информацией и конечно же зависимостями приложения. После всех этих нехитрых действий мы можем установить Polymer (ключ --save
добавит эту библиотеку в зависимости в bower.json
)
bower install polymer --save
Сам по себе polymer не имеет сторонних зависимостей, но вместе с ним мы получаем полифил для web-компонентов – webcomponentsjs
, который рекомендуется использовать, если браузер их не поддерживает.
Чтобы работать с polymer мы должны запустить какой-нибудь простой web-сервер, который будет раздавать статику. Для разработки подойдёт любой, например можно использовать polyserve
:
npm install polyserve -g
После чего в директории с проектом запускаем его:
polyserve
Теперь создадим index.html
следующего содержания:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polymer rule!</title>
</head>
<body>
<my-element></my-element>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
</body>
</html>
Затем создадим папку elements
, в которой будем хранить наши кастомные элементы, и в ней же пустой файл my-element.html
.
У нас должна получиться следующая структура:
├── bower_components
│ ├── polymer
│ └── webcomponentsjs
├── bower.json
├── elements
│ └── my-element.html
└── index.html
Создание элемента
Для создания нового кастомного элемента необходимо вызвать Polymer функцию, которая принимает как аргумент объект, определяющий свойства, методы и «колбэки жизненного цикла» (lifecycle callbacks). Создание элемента подразумевает регистрацию его прототипа в браузере, а также связь с html-тегом. Важное примечание: все имена кастомных элементов должны содержать символ «-», т.к. имена состоящие из одного слова заранее зарезервированы для нативных компонентов.
Добавим в my-element.html
следующий код:
<link rel="import" href="../bower_components/polymer/polymer.html">;
<script>
Polymer({
is: "my-element",
ready: function() {
this.textContent = "Hello from element's prototype!"
}
});
</script>
В окне браузера должны увидеть:
В этом примере у созданного компонента, нет заранее определённого контента, он добавляется с помощью колбэка жизненного цикла «ready», описанного в прототипе, который выполнится тогда, когда все свойства элемента и local DOM будут инициализированы. Кроме ready, существуют ещё 4 колбэка жизненного цикла элементов: created
(элемент создан, но свойства не инициализированы), attached
(элемент добавлен в документ), detached
(элемент удалён из документа), attributeChanged
(атрибут элемента изменился).
Local DOM
Элементы могут иметь local DOM для реализации полноценных элементов интерфейса, а также поведения самого элемента.
Изменим в my-element.html
код:
<link rel="import" href="../bower_components/polymer/polymer.html">;
<dom-module id="my-element">;
<template>;
<h1>Hello from my local DOM!</h1>;
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
Тем временем в браузере:
Polymer поддерживает различные реализации DOM. В браузерах, которые поддерживают Shadow DOM, Shadow DOM будет использоваться для создания local DOM элемента. В других браузерах, Polymer создаёт local DOM с помощью своей реализации, названной Shady DOM, которая по сути является полифилом для Shadow DOM.
Local DOM — инкапсулирован, для работы с ним Polymer предоставляет специальный API.
Light DOM
В Polymer есть ещё одно понятие — light DOM, это то, чем называют детей элемента.
Изменим my-element.html
:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-element">
<style>
div {
padding: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
</style>
<template>
<div>
<h1>Hello from local DOM!</h1>
<content></content>
</div>
</template>
<script>
Polymer({
is: "my-element"
});
</script>
</dom-module>
В этом примере мы видим тег content
— это то место, в которое и будут добавляться дети компонента, т.е. light DOM.
В index.html
добавим content внутрь элемента:
<my-element>Hello from light DOM!</my-element>
В браузере мы должны увидеть следующее:
Properties and data-bindings
Свойства (properties) это очень важная часть публичного API элемента. Добавление свойств элементу осуществляется путём добавления их в объект properties
прототипа элемента.
Если мы хотим, чтобы элемент не был статичным, то data-binding
это лучший вариант для динамического изменения состояния элемента. Для связи свойства элемента с темплейтом необходимо использовать «double-mustache» синтаксис ({{}})
.
И снова изменим my-element.html
:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="my-element">
<style>
div {
padding: 10px;
background-color: #fff;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
}
</style>
<template>
<div>
<h1>Hello {{user}}</h1>
<label>Hey! Enter your name here: <input type="text" value={{user::input}}></label>
</div>
</template>
<script>
Polymer({
is: "my-element",
properties: {
user: {
type: String
}
}
});
</script>
</dom-module>
У элемента input в атрибуте value мы видим {{user::input}}
— это значит, что свойство user и значение самого input’а
будут изменяться каждый раз, когда будет срабатывать событие input
.
Затем перейдём в браузер, добавим что-нибудь в input
и увидим нечто подобное:
Заключение
Теперь вы знаете все основы работы с Polymer!
Ссылка на документацию: https://www.polymer-project.org/1.0/docs/devguide/feature-overview