Статьи

Руководство по обновлению до полимера 1.0

Сентябрь 2, 2018

На недавно завершенном Google IO 2015 Google выпустил долгожданную версию Polymer 1.0 и объявил ее готовой к работе . Для тех из вас, кто использовал библиотеку Polymer, пока она еще находилась в предварительном просмотре для разработчиков, эта статья послужит руководством по переносу существующего приложения на последнюю версию Polymer.

Несколько важных вещей, которые стоит отметить в v1.0 :

  1. Это несовместимо с версией 0.5 , предыдущей версией и самой длинной из сохранившихся на данный момент.
  2. Новая версия ориентирована на производительность и эффективность при значительном сокращении общего размера библиотеки.
  3. Он был полностью перестроен с нуля, чтобы разработчикам было проще и быстрее создавать пользовательские элементы, которые больше похожи на стандартные элементы DOM.
  4. Внутренние тесты показали, что v1.0 примерно в 3 раза быстрее в Chrome и в 4 раза быстрее в Safari по сравнению с предыдущей версией.

Действия по установке последней версии Polymer остаются точно такими же, как описано в этой статье . Чтобы обновить существующую установку Polymer, перейдите в каталог приложения и выполните следующую команду в своем терминале: 

$ bower update

Важно знать, что это непременно сломает ваше существующее приложение, поскольку, как уже упоминалось, две версии несовместимы. Следовательно, рекомендуется установить свежую копию в отдельную папку. Чтобы проиллюстрировать изменения, начиная с v0.5, мы будем использовать пользовательский элемент кредитной карты из одной из моих предыдущих статей о SitePoint в качестве справочного материала для сравнения двух версий.

Polyfilling не поддерживающие браузеры

Новая версия Polymer больше не нуждается в теневом DOM polyfill, включенном в библиотеку webcomponents.js Вместо этого используйте намного меньшую библиотеку webcomponents-lite.js

Версия 0.5: 

 <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

Версия 1.0: 

 <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

«Облегченная» версия предлагает увеличение размера примерно на 80kb

Определение пользовательских элементов

Тег <polymer-element><dom-module> Пользовательский элемент теперь идентифицируется атрибутом id<dom-module> Правила именования пользовательских элементов остаются прежними.

Версия 0.5: 

 <polymer-element name="credit-card">
  ...
</polymer-element>

Версия 1.0: 

 <dom-module id="credit-card">
  ...
</dom-module>

Зарегистрировать пользовательские элементы

Ранее мы могли зарегистрировать пользовательский элемент, просто вызвав конструктор Polymer() Указывать имя пользовательского элемента необязательно, если <script><polymer-element> В этом выпуске пользовательский элемент теперь зарегистрирован с использованием свойства is

Версия 0.5: 

 Polymer('credit-card', {});

Версия 1.0: 

 Polymer({
  is: 'credit-card'
});

Значение свойства isid<dom-module>не является обязательным .

Тег <script><dom-module>

Пользовательские атрибуты элемента

Любой атрибут, являющийся частью <polymer-element>properties

Версия 0.5: 

 <polymer-element name='credit-card' attributes='amount'>

Версия 1.0: 

 Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }

Пользовательские стили элементов

Стили элементов теперь определены вне <template>

Версия 0.5: 

 <polymer-element name="credit-card" attributes="amount">
  <template>
    <style>
      ...
    </style>
  </template>
</polymer-element>

Версия 1.0: 

 <dom-module id="credit-card">
  <style>
    ...
  </style>

  <template>
    ...
  </template>
</dom-module>

Внешние таблицы стилей поддерживаются с помощью импорта HTML .

Привязка данных

Polymer 1.0 предлагает два типа привязки данных:

  • Квадратные скобки [[]] Поток данных является нисходящим, от узла к ребенку, и привязка никогда не изменяет свойство хоста.
  • Вьющиеся скобки {{}} Поток данных является односторонним или двусторонним, в зависимости от того, настроено ли целевое свойство для двусторонней привязки или нет.

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

Версия 0.5: 

 <input type="submit" value="Donate {{amount}}">

Версия 1.0: 

 <template>
  <input type="submit" value="[[computeValue(amount)]]">
</template>
 Polymer({
  is: "inline-compute",
  computeValue: function(amount) {
    return 'Donate ' + amount;
  }
});

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

Новый тенистый DOM

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

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

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

Вывод

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

Кроме того, Чак Хортон создал репозиторий Github под названием Road to Polymer 1.0, который предлагает инструмент преобразования кода для обновления вашего кода до v1.0 с v0.5. Это может послужить отправной точкой для вашей миграции, если вы не собираетесь вносить некоторые косметические изменения вручную.

33
Share: