Aliran kerja yang manakah untuk mengintegrasikan Polimer dengan Sudut?

Polimer. Janjinya untuk membenarkan pembangunan perpustakaan komponen UI tanpa dikunci ke dalam timbunan teknikal, bergantung pada keupayaan (masa depan) penyemak imbas. Hanya tulis komponennya dan gunakan semula di mana-mana sahaja dengan jaminan tidak menghasilkan kesan sampingan. Ia adalah wajar, bukan? Jika anda bekerja dengan beberapa teknologi web dan ingin membangunkan katalog komponen UI generik, Polimer mungkin kelihatan seperti penyelesaian yang baik.
Kami akan melihat bersama-sama bagaimana untuk mengintegrasikan komponen yang ditulis dengan Polimer 2.0 dalam aplikasi Sudut.

Mukadimah: Polimer dan Komponen Web

Sekiranya terdapat hanya satu perkara yang perlu diingat:
Polimer != Komponen Web
Komponen Web, yang pertama kali muncul pada tahun 2011, ialah satu set 4 teknologi untuk mencipta dan menggunakan elemen yang gaya dan kodnya dirangkumkan daripada seluruh aplikasi. 4 teknologi ini adalah berdasarkan spesifikasi W3C, beberapa daripadanya sudah berada dalam status Standard Hidup.
Pada tahun 2013, jurutera di Google ingin menjadikan Komponen Web boleh diakses dengan membuat tindanan kepada teknologi ini. Matlamat mereka adalah untuk mula menulis dan menggunakan Komponen Web tanpa menunggu spesifikasi lengkap dan dilaksanakan dalam pelayar yang mencukupi. Tindanan ini, yang dinamakan Polimer, telah ditakdirkan untuk menjadi lebih ringan – atau bahkan hilang – berkadaran dengan liputan penyemak imbas.
4 teknologi ini ialah:

Elemen Tersuai

Ini ialah API JS untuk mentakrifkan elemen HTML anda dan tingkah laku yang berkaitan dengannya. Selepas panggilan ke CustomElementRegistry.define(), anda kemudian boleh menggunakan teg yang sepadan dalam HTML anda.
Mereka juga menentukan panggilan balik kitaran hayat bagi elemen yang diambil oleh Polimer.

Shadow DOM

Inilah yang akan memungkinkan untuk merangkum struktur HTML dan gaya elemen, tanpa dunia luar dapat campur tangan dengan cara yang tidak terkawal.
Polimer mengurus Shadow DOM untuk kami, sambil membenarkan kami memanipulasinya

Templat HTML

Teknologi ini mentakrifkan dua elemen. <template>, yang membolehkan anda menulis HTML yang tidak dipaparkan yang akan disalin ke elemen yang menggunakannya. yang <slot> benarkan kami menulis ruang dalam struktur HTML kami di mana elemen anak elemen kami akan disisipkan.

Import HTML

Jika anda menulis Komponen Web anda dalam fail .html khusus, satu cara untuk menggunakannya dalam aplikasi anda ialah mengimportnya melalui import HTML:

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

Teknologi ini adalah kontroversi dan akhirnya tidak akan diterima pakai oleh standard. Menurut Firefox, alat semasa dan akan datang (Modul ES6) adalah mencukupi dan menawarkan lebih kawalan daripada Import HTML.

Penambahan polimer

Selain menjadikan 4 teknologi ini berfungsi pada semua pelayar, anda akan dapati dalam kotak alat Polimer sesuatu untuk memudahkan pembangunan Komponen Web:
– Pembantu untuk mengisytiharkan sifat komponen kami (nilai lalai, baca sahaja, dikira, fungsi pemerhati, penyahserikatan automatik)
– Pengurusan acara (langganan automatik & nyahlangganan, acara gerak isyarat untuk pengguna mudah alih)
– Pengurusan data, dengan pengikatan data 2 hala
– Elemen tersuai bersamaan dengan ngIf dan ngFor of Angular
– dan pelbagai utiliti seperti debouncer untuk mengelakkan panggilan balik pada selang masa yang terlalu ketat
Sebagai tambahan kepada fungsi asas ini, Polimer menyediakan penyelesaian untuk membangunkan aplikasi lengkap (pengurusan laluan, pengantarabangsaan, pengurusan luar talian), tidak begitu berguna kerana ia sudah diuruskan oleh Angular.

dan Sudut?

Sudut bermula selepas Polimer, pada September 2014. Tetapi tidak seperti Polimer, komponen Sudut bukan Komponen Web. Mereka menggunakan teknik khusus untuk ini, seperti emulasi bayang bayang (yang juga boleh diaktifkan secara asli) untuk enkapsulasi gaya, tetapi anda tidak boleh menggunakan komponen Sudut dalam persekitaran selain Sudut.

Penyepaduan sudut & Polimer

Untuk menggambarkan penyepaduan ini, kita akan melihat dua cara: satu mudah dan pantas, mudah untuk ujian, dan satu lagi lebih sesuai untuk persekitaran pengeluaran.
Sama ada cara, anda memerlukan bower.

Cara yang mudah

Dalam kes ini, elemen kastam akan dibangunkan secara tempatan, berkaitan dengan projek Angular. Unsur-unsur diimport ke dalam index.html.

Pada akar projek anda, mulakan bower dengan

$ bower init

Permintaan segera tidak menarik kerana kami tidak akan menerbitkan melalui bower. Penggunaan kami akan terhad kepada menguruskan kebergantungan Polimer.

Masih di akar, buat fail .bowerrc dengan kandungan ini:

{
  "directory": "src/assets/bower_components/"
}

di mana assets sepadan dengan direktori aset sudut anda.

Dalam .gitignore, tambah laluan yang sama seperti directory du .bowerrc.

Sebagai contoh, kami akan menggunakan elemen yang dibangunkan oleh pasukan Polimer.

Pasang barang paper-slider et paper-card

$ bower install --save PolymerElements/paper-slider PolymerElements/paper-card

Tambahkan kebergantungan anda dalam 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>

Untuk dapat menggunakan elemen baharu anda, anda mesti membenarkan teg yang tidak diketahui oleh Angular. Dalam setiap modul yang mengisytiharkan komponen menggunakan elemen tersuai, anda mesti menggunakan nilai tersebut CUSTOM_ELEMENTS_SCHEMA kepada harta itu schemas :

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
@NgModule({
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

Dan di sana anda pergi! Jika anda ingin membangunkan WebComponent anda secara tempatan, letakkannya dalam folderassets. Jangan gunakan polimer-cli yang akan menjana semua yang anda perlukan untuk diterbitkan, dan akan bercanggah dengan bahan masuk bower_components.
Dalam HTML anda mentakrifkan WebComponent anda, anda akan dapat mengimport Polimer yang diambil selepas memasang elemen dari bower:

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

Cara yang betul untuk menghasilkan

Daripada memuatkan semua komponen anda ke dalam titik masuk aplikasi anda, anda akan mengimportnya ke dalam komponen Sudut anda di sebelah TypeScript. Ini akan dibenamkan dalam bahagian yang sepadan dengan modul komponen anda, yang menarik apabila anda malas memuatkan modul anda. Oleh itu, anda sangat mengurangkan beban awal.
Ini dimungkinkan berkat projek itu Pemuat Webpack Polimer yang akan mengubah takrifan elemen HTML anda menjadi satu berkas JS.

Itu bagus, Webpack sudah ada dan dikonfigurasikan melalui CLI Sudut. Anda boleh menampal konfigurasi yang dijana CLI menggunakan Origami (Polymer + Angular) dan lihat contoh penggunaan dengan ini Kit Permulaan.
Tetapi berhati-hati, jika elemen anda mengehoskan imej, anda perlu mengubah cara ia digunakan. Sama ada dengan mengalihkan imej ke dalam folder aset Angular supaya fail importPath Polimer sepadan, sama ada dengan merujuk kepadanya melalui pembolehubah:

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

supaya imej dimasukkan ke dalam berkas.

Integrasi dengan bentuk Sudut

Untuk mengintegrasikan unsur Polimer ke dalam bentuk Sudut, anda perlu memastikan bahawa mereka bercakap bahasa yang sama!
Menggunakan arahan ngDefaultControl pada komponen anda, anda memastikan bahawa Angular akan mengambil kira peristiwa input dipancarkan oleh komponen anda. Iaitu, apabila anda mahukan nilai FormControl Sudut disegarkan oleh unsur Polimer, anda perlu memancarkan peristiwa input. Contohnya untuk medan teks, input boleh dipancarkan selepas setiap ketukan kekunci.

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

Kemudian Angular akan mendapatkan semula nilai semasa melalui harta itu value daripada komponen tersebut.
Jika anda menggunakan WebComponent yang diambil yang tidak mengeluarkan input, anda boleh melalui arahan yang akan dilaksanakan ControlValueAccessor. Pasukan Angular telah membangunkan persembahan yang baik daripada mereka (ici) yang boleh kita jadikan sebagai model jika kita tidak menemui apa yang kita cari. Di sinilah anda boleh mendengar peristiwa komponen dan mentafsirkan hasilnya sebelum menghantarnya ke bentuk Sudut, dan sebaliknya apabila bentuk Sudut mahu menetapkan nilai untuk kawalan itu.
Anda boleh mencari contoh pelaksanaan dalam repo of demo.
Biasanya, pengesahan kawalan sentiasa dilakukan pada sisi Sudut, melalui Validators. Angular boleh memberitahu WebComponent bahawa ia tidak sah melalui pengikatan data. Ia diuruskan oleh WebComponent yang dibangunkan oleh pasukan Polimer yang menyediakan hartanah invalid et error-message. Dalam sesetengah kes yang rumit, anda mungkin mahu mengurus kesahihan dalam komponen (untuk mempunyai kawalan yang lebih baik ke atas pemformatan, contohnya). Untuk menyedarkan Angular tentang ketidaksahihan komponen ini, dan bukannya menduplikasi kod pengesahan, anda boleh menangkap peristiwa yang dijana oleh komponen untuk menunjukkan bahawa keadaan kesahihannya telah berubah.

Kesimpulan: Masa Depan Komponen Web dengan Sudut

Kami telah melihat bahawa penyepaduan Polimer 2.0 dalam Angular boleh merumitkan aliran kerja (terutamanya jika ia adalah kawalan bentuk). Dengan Polimer 3.0, kami akan beralih dari Bower ke NPM dan daripada Import HTML ke modul ES6, menjadikan langkah binaan perlu. Sebagai alternatif, Angular sedang membangunkan Elemen Sudut, yang akan membolehkan kami mengeksport komponen Sudut kami ke dalam Komponen Web yang boleh digunakan di mana-mana sahaja! Pada masa hadapan, saya rasa akan kurang minat untuk menggunakan Polimer sebagai tambahan kepada Angular, jika kedua-duanya membenarkan kebolehgunaan semula sebanyak mungkin… Ia akan menjadi masalah cita rasa!
Projek demo Github
Thibault Chevrin, JS-Craftsman @JS-Republic