Web Components akan mengubah semua hal yang Anda pikir Anda ketahui tentang mem-build untuk web. Untuk pertama kalinya, web akan memiliki API tingkat rendah yang memungkinkan kita tidak hanya membuat tag HTML sendiri, tetapi juga mengenkapsulasi logika dan CSS. Tidak ada lagi kode boilerplate atau stylesheet global yang berantakan. Ini adalah dunia baru yang menantang, tempat segala sesuatu adalah elemen.
Dalam presentasi saya dari DotJS, saya menjelaskan apa yang ditawarkan Web Components dan cara mem-build-nya menggunakan alat modern. Saya akan menunjukkan Yeoman, alur kerja alat untuk menyederhanakan pembuatan aplikasi web menggunakan Polymer, library polyfill dan sugar untuk mengembangkan aplikasi menggunakan Komponen Web di browser modern saat ini.
Membuat elemen kustom & menginstal elemen yang dibuat oleh orang lain
Dalam presentasi ini, Anda akan mempelajari:
- Tentang empat spesifikasi berbeda yang menyusun Komponen Web: Elemen Khusus, Template, Shadow DOM, dan Impor HTML.
- Cara menentukan elemen kustom Anda sendiri dan menginstal elemen yang dibuat oleh orang lain menggunakan Bower
- Menghabiskan lebih sedikit waktu untuk menulis JavaScript dan lebih banyak waktu untuk membuat halaman
- Menggunakan alat frontend modern (Yeoman) untuk membuat scaffold aplikasi menggunakan Polymer dengan generator-polymer
- Cara Polymer super mengubah pembuatan komponen web.
Misalnya, untuk menginstal polyfill Komponen Web Polymer dan library itu sendiri, Anda dapat menjalankan satu baris ini:
bower install --save Polymer/platform Polymer/polymer
Tindakan ini akan menambahkan folder bower_components dan menambahkan paket di atas. --save akan menambahkannya ke file bower.json aplikasi Anda.
Kemudian, jika ingin menginstal elemen akordeon Polymer, Anda dapat menjalankan:
bower install --save Polymer/polymer-ui-accordion
lalu impor ke aplikasi Anda:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
Untuk menghemat waktu, membuat scaffolding aplikasi Polymer baru dengan semua dependensi yang Anda perlukan, kode boilerplate, dan alat untuk mengoptimalkan aplikasi dapat dilakukan dengan Yeoman dengan satu baris perintah lainnya ini:
yo polymer
Panduan bonus
Saya juga merekam panduan bonus berdurasi 30 menit tentang aplikasi Polymer Jukebox yang saya tampilkan dalam presentasi.
Dibahas dalam video bonus:
- Arti mantra “semuanya adalah elemen”
- Cara menggunakan Bower untuk menginstal elemen dan polyfill Platform Polymer
- Membuat scaffold aplikasi Jukebox dengan generator dan sub-generator Yeoman
- Memahami fitur platform yang dibuat scaffold melalui boilerplate
- Cara saya mem-porting aplikasi Angular secara fungsional ke Polymer.
Kita juga menggunakan sub-generator Yeoman untuk membuat scaffolding elemen Polymer baru. Misalnya, untuk membuat boilerplate untuk elemen foo, kita menjalankan:
yo polymer:element foo
yang akan meminta kita apakah kita ingin elemen diimpor secara otomatis, apakah konstruktor diperlukan, dan untuk beberapa preferensi lainnya.
Sumber terbaru untuk aplikasi yang ditampilkan dalam kedua presentasi kini tersedia di GitHub. Saya telah memfaktorkan ulang kode tersebut lebih lanjut agar lebih teratur dan sedikit lebih mudah dibaca.
Pratinjau aplikasi:
Bacaan lebih lanjut
Singkatnya, Polymer adalah library JavaScript yang memungkinkan Komponen Web sekarang di browser web modern saat kita menunggunya diterapkan secara native. Alat modern dapat membantu meningkatkan alur kerja Anda dengan menggunakannya dan Anda mungkin ingin mencoba Yeoman dan Bower saat mengembangkan tag Anda sendiri.
Beberapa artikel lain yang perlu dibaca tentang subjek ini: