Yo Polymer – Tur Whirlwind Alat Komponen Web

Addy Osmani
Addy Osmani

Komponen Web akan mengubah semua yang Anda pahami tentang cara membuat aplikasi untuk web. Untuk pertama kalinya, web akan memiliki API tingkat rendah yang memungkinkan kita untuk tidak hanya membuat tag HTML sendiri tetapi juga merangkum logika dan CSS. Tidak perlu lagi sup stylesheet atau kode boilerplate global. Ini adalah dunia baru yang menantang di mana semuanya bergantung pada elemen.

Dalam diskusi saya dari DotJS, saya membahas apa saja yang ditawarkan Komponen Web dan cara membuatnya 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 diskusi 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
  • Habiskan lebih sedikit waktu untuk menulis JavaScript dan lebih banyak waktu untuk menyusun halaman
  • Menggunakan alat front-end modern (Yeoman) untuk scaffolding aplikasi menggunakan Polimer dengan generator-polimer
  • Cara super Polymer mengubah pembuatan komponen web.

Misalnya, untuk menginstal polyfill Komponen Web Polymer dan library itu sendiri, Anda dapat menjalankan satu liner ini:

bower install --save Polymer/platform Polymer/polymer

Tindakan ini akan menambahkan folder bower_components dan menambahkan paket di atas. --save menambahkannya ke file bower.json aplikasi Anda.

Nanti, 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 butuhkan, kode boilerplate, dan alat untuk mengoptimalkan aplikasi Anda dapat dilakukan dengan Yeoman dengan satu liner ini:

yo polymer

Panduan bonus

Saya juga merekam bonus panduan selama 30 menit tentang aplikasi Polymer Jukebox yang saya tunjukkan dalam diskusi.

Dibahas dalam video bonus:

  • Apa arti mantra "semuanya adalah elemen"
  • Cara menggunakan Bower untuk menginstal polyfill dan elemen Platform Polymer
  • Menyusun struktur aplikasi Jukebox kami dengan generator dan sub-generator Yeoman
  • Memahami fitur platform yang disusun melalui boilerplate
  • Cara saya mentransfer secara fungsional melalui aplikasi Angular ke Polymer.

Kami juga memanfaatkan sub-generator Yeoman untuk merancang elemen Polymer yang baru, misalnya untuk membuat boilerplate untuk elemen foo yang kami jalankan:

yo polymer:element foo

yang akan menanyakan apakah kita ingin elemen diimpor secara otomatis, apakah konstruktor diperlukan, dan untuk beberapa preferensi lainnya.

Sumber terbaru untuk aplikasi yang ditampilkan dalam kedua diskusi kini tersedia di GitHub. Saya telah memfaktorkannya ulang sedikit lebih jauh agar lebih teratur dan lebih mudah dibaca.

Pratinjau aplikasi:

Pratinjau aplikasi Yo Polymer

Bacaan lebih lanjut

Singkatnya, Polymer adalah library JavaScript yang memungkinkan Komponen Web sekarang di browser web modern selagi kita menunggu untuk diimplementasikan secara native. Alat modern dapat membantu meningkatkan alur kerja Anda menggunakan alat tersebut dan Anda mungkin senang mencoba Yeoman dan Bower saat mengembangkan tag Anda sendiri.

Beberapa artikel lain yang layak untuk dibahas tentang topik ini: