Просто и понятно о Polymer

Сам по себе 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 и увидим нечто подобное: