Ini bukan tutorial atau ulasan lengkap - catatan berdarah panas setelah mengkompilasi pustaka komponen. Semuanya dimulai dengan kisah sehari-hari yang biasa: ada kode warisan, Anda harus mengencangkan pipmochek dan tongkat kecil ke warisan, Anda tidak dapat menulis ulang apa pun, sekali, dan tidak menyentuh apa pun di sini dengan tangan Anda; jangan menyentuh paket besar dan menakutkan untuk berjaga-jaga, dan memang, mengapa Anda tidak mengambil kerangka kerja
Vanilla JS terbaik dan mulai menulis di atasnya, karena kakek Anda diwariskan?
Tetapi karena volume pekerjaan diramalkan akan sangat terlihat, untuk beberapa alasan tidak ada yang mengalami dorongan kreatif dari ide menulis segala sesuatu dalam JS kosong. Kami pergi untuk melihat alat-alat dan memilih dari mereka yang tidak akan menakuti konsumen dari komponen kami untuk berlutut.
Alat-alatnya
Meskipun saya sudah merusak seluruh bagian ini, ada sesuatu yang perlu dikatakan di sini. Pertama, komponen web segera menjadi benar-benar tidak terbantahkan: ketika hasil kreativitas adalah pustaka komponen, dan Anda tidak dapat menyeret monster besar ala Angular, yang akan sepenuhnya benar-benar memodulasi sendiri, maka yang tersisa adalah Anda tidak perlu menyeret kode perpustakaan sama sekali, dan bekerja "begitu saja" di browser modern. Komponen web itu sendiri masih sama menakjubkan dengan kerangka kerja Vanilla JS, dengan hanya sedikit modularitas yang terselesaikan. Masih ada terlalu banyak yang tersisa untuk ditulis dengan tangan Anda sendiri - Anda memerlukan pembungkus dengan standardisasi, dan juga diinginkan bahwa ada minimum pelat untuk setiap komponen.
Tidak ada banyak pembungkus seperti itu, dan bahkan cukup matang untuk digunakan dalam
produk serius:
Hibrida, LitElement, Stensil. Dan mereka semua melakukan hal yang sama dengan cara yang sama, perbedaannya ada pada hal-hal kecil. Hibrida berusaha menjadi trendi dan tidak berkelas, Stensil trendi dan seperti reaksi, LitElement bahkan tidak berusaha keras. Dan menurut hasil memilih dari hal-hal sepele, LitElement tetap pada output - OOPshniki mengubah hidung mereka dari Hibrida, dan non-amatir reaksi - dari Stencil, di mana BEJ umumnya merasakan pengulangan bukan ide reaksi yang paling tak terbantahkan dari reaksi.
Untuk berperang?
Tidak begitu menarik untuk berbicara tentang apa yang Anda bisa, itu semua ada dalam dokumentasi, jadi saya akan terus berbicara terutama tentang apa yang tidak dapat Anda lakukan: mereka biasanya tidak menulis tentang hal ini dalam dokumentasi.
Pola
Dalam hal templating, LitElement menggunakan lit-html, yang sangat minimalis:
const template = html` <div attr=${a} .property=${b} ?booleanAttr=${c} @click=${handleClick} ></div> `;
Ini bukan html, tetapi Anda harus mengingat tepat tiga konstruksi dalam satu simbol di sini - ".", "?", Dan "@". Yang lainnya adalah html. Mengenai JSX, dengan className dan yang lainnya, ini sedikit lebih bagus dan terpisah secara hukum dari kode JS / TS. Tapi, omong-omong, "mustahil" pertama mengikuti dari sini - untuk mengikat sesuatu yang buruk tidak berfungsi, Anda hanya dapat mengikat dalam nilai atribut dan properti, dan dalam konten teks. Tentu saja, tidak ada keajaiban dalam literal templat yang ditandai, dan dengan biaya sejumlah penyimpangan, Anda dapat mengkompilasi string dalam runtime dan melampirkan binder yang menyala-html ke dalamnya, tetapi ini sebenarnya masuk ke render dengan tangan Anda, dan dengan keberhasilan yang sama Anda dapat mengumpulkan baris dan mengirimkannya di innerHTML. Secara normal, ini semua dilakukan melalui komposisi templat dan penguraian komponen kompleks menjadi komponen yang lebih sederhana. Platplate cukup kecil - binding template hampir tidak ada, karena itu hanya variabel, dan untuk membuat komponen, Anda memerlukan lima baris "ekstra".
Komponen
Satu-satunya masalah (tetapi signifikan) dari komponen adalah bahwa untuk sepenuhnya "mencampur" komponen dengan render anak-anak, di suatu tempat di dalam templat induk Anda memerlukan Shadow DOM. Yang, tentu saja, termasuk dalam LitElement secara default, dan secara umum tampaknya tidak buruk. Tapi bayangan DOM saat ini memiliki satu masalah besar dengan gaya, mirip dengan modul css: untuk mengisolasi gaya itu dengan sempurna mengisolasi, tetapi sepanjang jalan ini memotong seluruh kaskade. Sangat tidak mungkin untuk masuk ke gaya yang terisolasi dari luar. Umumnya (hampir) tidak ada.
Ini sangat mengganggu, misalnya, dengan kemampuan untuk memutar komponen dari berbagai topik. Semua yang dapat dilakukan dengan DOM bayangan adalah untuk mengemas semua opsi styling di dalam komponen, atau untuk mencoba membuat tema sepenuhnya tergantung pada variabel css - ini adalah "hampir" dengan mana Anda dapat mengejang gaya terisolasi. Tetapi dengan itu diperlukan untuk memberikan variabel secara harfiah untuk setiap gaya yang masuk akal, dan, dengan probabilitas tinggi, masih kemudian ditambahkan lagi.
Untungnya, Shadow DOM di LitElement dapat dengan mudah dinonaktifkan pada komponen. Sayangnya, ini juga akan menonaktifkan kemampuan untuk menargetkan anak-anak elemen di tempat yang tepat dari template melalui <slot>. Untungnya, setelah memutarbalikkan sedikit, Anda bisa mendapatkan yang pertama dan yang kedua: untuk ini, Anda
hanya perlu meletakkan root shadow pada setiap slot yang diperlukan, dan tidak memiliki apa pun di dalamnya kecuali, pada kenyataannya, <slot>. Dengan demikian, stilisasi komponen akan terbuka, dan slot akan hadir. Saya ingin memberikan contoh singkat, tetapi sayangnya kode untuk memanipulasi slot tidak berhasil secara singkat - orang yang sangat tertarik dapat membaca
masalah ini di sini. Saya terinspirasi oleh ide-ide dari sana.
Yah, perlu juga disebutkan bahwa di masa yang akan datang dukungan browser dan polyfill
:: part and :: theme kemungkinan akan turun, dan dengan mereka bayangan DOM akhirnya akan menjadi solusi yang semua orang telah menunggu selama bertahun-tahun - sehingga itu terisolasi dan extensible / bisa berubah. Namun sejauh ini masih belum ada.
Sebarkan
Pada titik ini, menulis tentang "apa yang tidak mungkin" tidak lagi keluar, karena semuanya bisa lebih lanjut - perpustakaan menyala ada dalam bentuk modul ES, dan karenanya tanpa masalah mereka diambil oleh apa saja dan dengan cara apa pun (bahkan dengan browser telanjang yang dapat menangani modul itu sendiri) ) Untuk IE dan Edge saat ini, Anda perlu menghubungkan polyfill komponen web, untuk modul, jika Anda ingin mengangkatnya langsung dari browser, Anda memerlukan sesuatu yang mengurangi rasa sakit impor browser, misalnya
es-module-shims. Ya, atau bundler.
Komponen web yang terhubung ke dalam aplikasi sederhana dan mudah digunakan, Anda dapat mulai menggunakannya dalam html dan menarik metode dan properti mereka dalam kode. Anda dapat melihat seberapa baik semua ini dapat dilampirkan ke perpustakaan atau kerangka kerja lain di
sini (reaksi telah unggul, tetapi rata-rata semuanya sangat baik). Kami berpegang teguh pada AngularJS, dan semuanya basi: ng-prop memungkinkan Anda untuk mentransfer sesuatu ke komponen, dan ng-on memungkinkan Anda untuk mendengarkan acara.
Ringkasan
Jika Anda perlu membangun UI komponen dan kencangkan ke sesuatu yang Anda benar-benar tidak ingin masuki (kode warisan, kerangka menakutkan yang tidak modis, dan tempat-tempat buruk lainnya) - komponen web membantu dengan baik. Pustaka "dewasa" utama yang dikelola dengan mereka berukuran kecil, tidak ada masalah teknis yang serius tentang modularitas dan tata letak, dan Anda bisa mengambil dan melakukannya. Perpustakaan macam apa yang Anda ambil - walaupun tidak begitu penting, ada sangat sedikit perbedaan di antara mereka saat ini; Secara khusus, LitElement yang kami ambil tidak menciptakan masalah tambahan bagi kami, dan bekerja dengan cara yang diharapkan dalam semua kasus.