Полимер 101

Сначала гиперссылка:

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

Polymer — это легкая библиотека, которая помогает вам в полной мере использовать веб-компоненты.

Это просто еще одна библиотека/фреймворк для создания веб-приложений, таких как Angular, React, Angular 2, Aurelia, Cycle и т. д.

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

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

Вы можете думать о веб-компонентах как о многократно используемых виджетах пользовательского интерфейса, созданных с использованием открытой веб-технологии.

Вот и все.

Давайте построим что-нибудь и, может быть, вы поймете лучше.

Почему Полимер?

Я думаю, что выбор фреймворков дело личное, оно должно соответствовать вашей задаче. Идеальных фреймворков не бывает, у всех есть недостатки. Вам не нужно выбирать, вам нужно решить проблему. Может быть, Polymer решит ее, может быть, React, может быть, Angular 2 или Cycle, изучите свою проблему и попытайтесь найти то, что ее решит.

Для меня Polymer отлично решает одну проблему: улучшить унаследованные проекты. Я могу быстро создать простой компонент и импортировать его в любой проект, закодированный на любой технологии, от JQuery 1x до React или проект Vanilla JS, сделанный в AspNet.

Я могу легко улучшить старый проект и постепенно развивать его, заменяя часть этой логики и пользовательского интерфейса веб-компонентами. Без особого вмешательства и без необходимости переписывать весь проект или менять его рабочий процесс. Просто импортируйте компонент и используйте его как нативный HTML-тег.

Установка

Чтобы сделать компонент с помощью Polymer, вам нужно:

1. LTS-версия (4.x) Node.js.
2. Git.
3. Последняя версия bower.

npm install -g bower

4. Установите полимерный зажим

npm install -g polymer-cli

Создание компонента

Мы собираемся создать простой компонент кнопки, да, это глупый компонент, но он поможет вам понять основы Polymer.

Начальная загрузка:

1. Вам нужна папка для создания компонента. Чтобы упростить это, имя нашей папки также будет именем вашего компонента. Я буду использовать «кнопку акра».

$ mkdir acre-button
$ cd acre-button

Боковое примечание 1. Каждый компонент должен иметь имя с префиксом, в данном случае «акр», это помогает уменьшить вероятность конфликтов имен в случае, если есть другой элемент с таким же именем. В этом случае конфликт будет неизбежен, поскольку в браузере уже есть «компонент» с именем «кнопка».

2. Создание компонента

$ polymer init element

Сделанный. Теперь у вас есть немой компонент, чтобы увидеть его в действии:

$ polymer serve -o

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

Когда вы создаете компонент с помощью полимера-cli, он всегда создает для вас следующую структуру:

1. Страница документации, где вы можете увидеть всю конфигурацию вашего компонента
2. Демонстрационная страница с образцом вашего компонента с примером его использования.

Погружение в компонент

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

Структура компонента:

Перейдите к acre-button и откройте файл acre-button.html. Вы увидите определение вашего компонента. Это должно выглядеть так:

В строке 1 вы видите импорт Polymer, каждый компонент должен иметь этот импорт.

В строке 10 вы можете увидеть начало определения компонента с его идентификатором. Внутри этого тега находится шаблон вашего компонента, где определяется, как он будет представлен, и скрипт для определения его поведения.

Внутри тега template у нас есть тег style. В Polymer, когда мы определяем компонент, мы сохраняем его стиль внутри. Все определенное относится к компоненту.

Давайте начнем.

Во-первых, мы изменим тег ‹h2› на тег кнопки и изменим свойство prop1 на label.

Теперь наш компонент выглядит так:

<dom-module id="acre-button">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <button class="acre-button" type="button">[[label]]</button>
  </template>
  <script>
    Polymer({
      is: 'acre-button',
      properties: {
        label: {
          type: String,
          value: 'Button'
        },
      },
    });
  </script>
</dom-module>

Боковое примечание 2: Свойства

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

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

Теперь, когда у нашего компонента есть какое-то свойство, давайте воспользуемся им. Перейдите к acre-button/demo и откройте файл index.html. Этот файл определяет, как будет представлена ​​демонстрация компонента. Измените тег acre-button, используя свойство content, это изменит представление нашего компонента.

<div class="vertical-section-container centered">
  <h3>Basic acre-button Demo</h3>
  <demo-snippet>
    <template>
      <acre-button label="Click me!"></acre-button>
    </template>
  </demo-snippet>
</div>

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

Пример страницы должен выглядеть так.

Я знаю, это просто уродливая кнопка, но это компонент, и это здорово. Но давайте изменим его на красивую кнопку.

Теперь наша кнопка выглядит хорошо, но теперь возникает вопрос: как ее настроить в Интернете? Это просто.

Мы можем настроить вашу кнопку так же, как вы настраиваете любой другой HTML-элемент, используя стиль и класс, например:

<acre-button label=”Click me!” style=”background-color: green”></acre-button>

Теперь кнопка зеленая. Мы меняем кнопку, как если бы это был простой div, мы можем установить ширину,высоту,число с плавающей запятой. ,мы можем установить все, как будто это обычный HTML-тег, мы можем даже прикреплять события, такие как onClick,браузер будет угрожать нашему элементу, как нативный html тег.

Пока достаточно.

Вы узнали, как создать элемент, как связать с ним данные и как изменить его стиль. Есть еще много вещей, на которые стоит обратить внимание, привязка может быть более мощной и сложной, css может быть инкапсулирован с помощью shadow dom (это будет по умолчанию в веб-компоненты). В следующей части этой статьи я расскажу об этом.

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

И взгляните на потрясающий каталог компонентов, созданный командой разработчиков полимеров и сообществом.