Який робочий процес інтегрувати Polymer з Angular?


полімерний. Його обіцянки дозволять розробляти бібліотеки компонентів інтерфейсу користувача, не будучи замкненими в технічний стек, покладаючись на (майбутні) можливості браузера. Просто напишіть його компоненти та повторно використовуйте їх у будь-якому місці з гарантією, що вони не призведуть до побічних ефектів. Бажано, чи не так? Якщо ви працюєте з кількома веб-технологіями і хочете розробити каталог загальних компонентів інтерфейсу користувача, Polymer може здатися хорошим рішенням.
Ми разом побачимо, як інтегрувати компонент, написаний за допомогою Polymer 2.0, у програму Angular.

Преамбула: полімерні та веб-компоненти

Якби треба було пам’ятати лише одну річ:
Полімер != Веб-компоненти
Веб-компоненти, які вперше з'явилися в 2011 році, являють собою набір з 4 технологій для створення та використання елементів, стиль і код яких інкапсульовані з решти програми. Ці 4 технології базуються на специфікаціях W3C, деякі з яких уже мають статус Living Standard.
У 2013 році інженери Google хотіли зробити веб-компоненти доступними, створивши накладення на ці технології. Їхня мета полягає в тому, щоб мати можливість почати писати та використовувати веб-компоненти, не чекаючи, поки специфікації будуть повні та реалізовані в достатньому обсязі браузерів. Цьому накладенню, солодко названому Polymer, судилося стати світлішим – або навіть зникнути – пропорційно до покриття браузера.
Це 4 технології:

Користувацькі елементи

Це API JS для визначення ваших елементів HTML та пов’язаної з ними поведінки. Після дзвінка до CustomElementRegistry.define(), ви можете використовувати відповідний тег у своєму HTML.
Вони також визначають зворотні виклики життєвого циклу елемента, який підбирає Полімер.

Тіньовий DOM

Саме це дозволить інкапсулювати структуру HTML і стиль елемента, не маючи можливості неконтрольованого втручання зовнішнього світу.
Polymer керує Shadow DOM за нас, дозволяючи нам маніпулювати нею

HTML шаблони

Цей техно визначає два елементи. <template>, що дозволяє писати невідтворений HTML, який буде скопійовано до елементів, які їх використовують. в <slot> дозволяє нам записати пробіл у нашій структурі HTML, куди будуть вставлені дочірні елементи нашого елемента.

Імпорт HTML

Якщо ви написали свій веб-компонент у спеціальному файлі .html, один із способів використання його у вашій програмі — імпортувати його за допомогою імпорту HTML:

<link rel="import" href="myfile.html">

Цей техно є суперечливим і в кінцевому підсумку не буде прийнятий стандартом. Згідно з Firefox, теперішніх і майбутніх інструментів (модуль ES6) достатньо і пропонують більше контролю, ніж імпорт HTML.

Полімерні добавки

Окрім того, щоб ці 4 технології працювали у всіх браузерах, ви знайдете в наборі інструментів Polymer дещо, що полегшить розробку веб-компонентів:
– Помічник для оголошення властивостей нашого компонента (значення за замовчуванням, тільки для читання, обчислення, функція спостерігача, автоматична десеріалізація)
– Керування подіями (автоматична підписка та скасування підписки, події жестів для користувачів мобільних пристроїв)
– Керування даними з двостороннім зв’язуванням даних
– Користувацькі елементи, еквівалентні ngIf і ngFor для Angular
– і різні утиліти, такі як debouncer, щоб уникнути виклику зворотного виклику через занадто короткий інтервал
На додаток до цих основних функціональних можливостей, Polymer надає рішення для розробки повних додатків (керування маршрутами, інтернаціоналізація, автономне керування), не дуже корисні, оскільки ним уже керує Angular.

і кутовий?

Angular розпочався після Polymer у вересні 2014 року. Але на відміну від Polymer, компоненти Angular не є веб-компонентами. Для інкапсуляції стилю вони використовують специфічні для них методи, такі як емуляція тіньового домену (яку також можна активувати нативно) для інкапсуляції стилю, але ви не можете використовувати компонент Angular в середовищі, відмінному від Angular.

Кутова і полімерна інтеграція

Щоб проілюструвати цю інтеграцію, ми побачимо два способи: один простий і швидкий, зручний для тестування, а інший, більш придатний для виробничого середовища.
У будь-якому випадку, вам знадобиться беседка.

Легкий шлях

У цьому випадку митні елементи будуть розроблені локально, пов’язані з проектом Angular. Елементи імпортуються в index.html.

  1. У корені вашого проекту ініціалізуйте bower за допомогою
$ bower init

Співвідношення не цікаві, тому що ми не будемо публікувати через bower. Наше використання буде обмежено керуванням залежностями Polymer.

  1. Все ще в корені, створіть файл .bowerrc з таким змістом:
{
  "directory": "src/assets/bower_components/"
}

де assets відповідає вашому каталогу активів Angular.

  1. У .gitignore, додайте той самий шлях, що й для directory du .bowerrc.

Для прикладу ми будемо використовувати елементи, розроблені командою Polymer.

  1. Встановіть елементи paper-slider et paper-card
$ bower install --save PolymerElements/paper-slider PolymerElements/paper-card
  1. Додайте свої залежності в index.html.
<head>
  <link rel="import" href="assets/bower_components/paper-card/paper-card.html">
  <link rel="import" href="assets/bower_components/paper-slider/paper-slider.html">
</head>
<body>
  <app-root></app-root>
</body>
  1. Щоб мати можливість використовувати свої нові елементи, ви повинні авторизувати теги, невідомі Angular. У кожному модулі, що оголошує компоненти за допомогою користувацьких елементів, ви повинні застосувати значення CUSTOM_ELEMENTS_SCHEMA до власності schemas :
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

І ось так! Якщо ви хочете розробляти свої WebComponents локально, помістіть їх у папкуassets. Не використовуйте polymer-cli, який генеруватиме все, що вам потрібно для публікації, і конфліктуватиме з матеріалами bower_components.
У вашому HTML, який визначає ваш WebComponent, ви зможете імпортувати полімер, отриманий після встановлення елементів із bower:

<link rel="import" href="../bower_components/polymer/polymer.html">

Правильний спосіб виробництва

Замість того, щоб завантажувати всі свої компоненти в точку входу програми, ви імпортуєте їх у компоненти Angular на стороні TypeScript. Вони будуть вбудовані в фрагмент, що відповідає модулю вашого компонента, що цікаво, коли ви відкладаєте свої модулі. Таким чином, ви значно зменшуєте початковий заряд.
Це стало можливим завдяки проекту Полімерний завантажувач Webpack який перетворить визначення ваших елементів HTML у пакет JS.
Операція PolymerWebackLoader
Це добре, Webpack вже присутній і налаштований через Angular CLI. Ви можете виправити згенеровану CLI конфігурацію за допомогою Origami (Polymer + Angular) і побачити приклад використання з цим стартовий набір.
Але будьте обережні, якщо ваші елементи містять зображення, вам доведеться змінити спосіб їх використання. Або перемістивши зображення в папку ресурсів Angular, щоб importPath Polymer відповідає, або посилаючись на нього через змінну:

const img = require('./checked.png');

щоб зображення було включено в пакет.

Інтеграція з кутовими формами

Щоб інтегрувати елемент Polymer у форму Angular, ви повинні переконатися, що вони говорять однією мовою!
Використання директиви ngDefaultControl на вашому компоненті, ви переконаєтеся, що Angular буде враховувати події input випромінюється вашим компонентом. Тобто, коли ви хочете значення FormControl Angular оновлюється елементом Polymer, вам потрібно буде випромінювати подію input. Наприклад, для текстового поля, input може видаватися після кожного натискання клавіші.

class DemoElem extends Polymer.Element {
  static get is() { return 'demo-elem'; }
  static get properties() {
    return {
      value: {
        type: String
      }
    };
  }
  notifyChange() {
    this.dispatchEvent(new CustomEvent('input'));
  }
}

Потім Angular отримає поточне значення через властивість value компонента.
Якщо ви використовуєте отриманий WebComponent, який не випромінює input, ви можете передати директиву, яка буде реалізована ControlValueAccessor. Команда Angular розробила їх велику кількість (ICI), яку ми можемо використовувати як модель, якщо не знайдемо те, що шукаємо. Тут ви можете прослухати подію компонента та інтерпретувати результат, перш ніж передати його у форму Angular, і навпаки, коли форма Angular хоче встановити значення для цього елемента керування.
Ви можете знайти приклад реалізації в репо демонстрація.
Зазвичай перевірка елемента керування завжди виконується на стороні Angular за допомогою Validators. Angular може повідомити WebComponent, що він недійсний за допомогою прив’язки даних. Він керується веб-компонентами, розробленими командою Polymer, яка надає властивість invalid et error-message. У деяких складних випадках ви можете керувати дійсністю компонента (наприклад, щоб мати кращий контроль над форматуванням). Щоб повідомити Angular про недійсність цього компонента, а не дублювати код перевірки, ви можете зловити подію, згенеровану компонентом, щоб вказати, що його стан дійсності змінився.

Висновок: майбутнє веб-компонентів з Angular

Ми бачили, що інтеграція Polymer 2.0 в Angular може ускладнити робочий процес (особливо якщо це контроль форми). З Polymer 3.0 ми перейдемо від Bower до NPM і від імпорту HTML до модулів ES6, що зробить крок збірки необхідним. В якості альтернативи Angular розробляє Angular Elements, який дозволить нам експортувати наші компоненти Angular у веб-компоненти, які можна використовувати де завгодно! У майбутньому, я думаю, буде менше інтересу до використання Polymer на додаток до Angular, якщо обидва дозволять якомога більше повторного використання… Це буде справа смаку!
Демо-проект Github
Тібо Шеврін, JS-Craftsman @JS-Republic