Polymer, год вместе

Polymer

Год вместе

arturparkhisenko

2016-11-26, Kyiv

Кросс браузерные Веб-Компоненты
уже здесь👍

Поддержка браузерами

webcomponents.js для: IE 11+, Safari 9+

Polymer утилиты

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

Кто использует Polymer?

Сравнение с конкурентами

Polymer v1 (53kb min+gzip) больше всех по размеру, v2 (10kb)

SkateJS
Incremental DOM (from Google), JS импорт вместо HTML импорта, живой проект (5kb), (есть SSR)

X-tag и Bosonic - Являются заброшенными :/

и т.д. не используют Web Components APIs,
но можно использовать компоненты в них и их внутри компонентов.

Жизненный цикл компонентов

• created / constructor (native)
• ready
• attached / connectedCallback (native)
• detached / disconnectedCallback (native)
• attributeChanged / attributeChangedCallback (native)
• adoptedCallback

Пример: простой Polymer v1 компонент

      <dom-module id="element-name">
        <template>
          <style>/* CSS rules for your element */</style>
          <!-- local DOM for your element -->
        </template>
        <script> Polymer({ is: "element-name" }); </script>
      </dom-module>
  	

Пример: простой Polymer v2 компонент

      <dom-module id="element-name">
        <template><style></style>/* same as v1 */</template>
        <script>
          class MyPolymerElement extends Polymer.Element {// ...}
          customElements.define('element-name', MyPolymerElement);
        </script>
      </dom-module>
  	

Пример: компонент <wsd-logo>

      <wsd-logo color="dark" width="128px"></wsd-logo>
      <wsd-logo color="light" width="128px"></wsd-logo>
      <wsd-logo color="mono" width="128px"></wsd-logo>
  	

Пример: связывание атрибутов и свойств

      <template>
        <!-- Атрибуты -->
        <my-element selected $= "[[value]]"></my-element>
        <!-- Свойства -->
        <my-element selected = "{{value}}"></my-element>
      </template>
  	

Пример: CSS Scoping, важные селекторы

      <style>
       :host {} /* Текущий элемент */
       :host() {} /* Текущий элемент, соответствие селектору */
       :host-context() {} /* Родитель, соответствие селектору */
       ::slotted() {} /* Вставленный контент, старый ::content */
       >>> {} /* Игнорирует границы Shadow Dom,
         старые /deep/ и ::shadow */
      </style>
  	

Пример: дополнительная изоляция с помощью CSS Containment

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

      contain: strict; /* === layout style paint size */
      contain: content; /* === layout style paint */
    

Эволюция Polymer

• Polymer v0.5 как эксперимент
• Polymer v1.0+ продакшн версия

Polymer v2.0 нативный веб

• ES6 (ES2015) наконец-то, ES5 и ES6 как билд таргеты
• Плавный переход на новую версию (гибридный режим для v1)
• Улучшенная совместимость с нативным вебом
• Маленький размер 10кб (Polymer.Element)

Принцип FIRST при разработке компонентов

При создании компонентов не забывайте про эти 5 пунктов:

1. Focused - легкое API, делает одну вещь и делает ее хорошо
2. Independent - не имеет зависимостей
3. Reusable - больше гибкости, меньше кода, композиция
4. Small - проще поддерживать и документировать, меньше ответственности
5. Testable - легче тестировать, более точное определение компонента, приводящего к ошибке

WebComponent bundle analyzer

Ссылки

• What's New in Shadow DOM v1 (by examples)
• Custom Elements articles: developers.google.com, webkit.org
• Google codelabs, from Polymer Summit 2016
• webcomponents/gold-standard
• Scram-engine server-side Web Components
• Server-side Web Components how and why
• learn.javascript.ru/webcomponents
• Useful GitHub Projects: PolymerTS, polymer-redux, ReactiveElements, WCBA