Setiap kali, ketika sekelompok standar Komponen Web disebutkan dalam artikel atau komentar, hal yang hampir sama terjadi: orang yang, seringkali, memiliki sedikit sekali gagasan tentang apa yang dipertaruhkan, mulai berbagi pendapat "ahli". Setiap kali, diskusi meluncur ke dalam satu skenario yang sama, nama yang berirama dengan kata "benteng". Dan saya sangat menginginkan yang positif, konstruktif dan transisi ke pertanyaan penerapan praktis. Dalam artikel ini, saya akan mencoba menjawab sekaligus sebagian besar pertanyaan umum dan membantah maksimal kesalahpahaman umum. Selanjutnya, dalam situasi yang sulit, akan mungkin untuk mengalahkan dengan satu tautan. Jadi ayo pergi.
Dasar-dasarnya
Komponen web adalah sekumpulan spesifikasi modern yang terdiri dari elemen-elemen dasar berikut:
Elemen Khusus - kemampuan asli untuk membuat tag HTML Anda sendiri, dengan perilaku, penampilan, dan markup internal Anda yang ditentukan.
Shadow DOM - pemisahan struktur internal komponen dengan enkapsulasi gaya internal dan seluruh isi dokumen.
Templat - tag khusus yang memungkinkan Anda menyimpan potongan markup, menerapkannya, dan menggunakannya kembali jika perlu.
Impor HTML - kemampuan untuk mengimpor blok HTML yang disimpan dalam file HTML lainnya
Hidangan dari semua hal di atas dapat dibumbui dengan variabel CSS asli, modul ES asli dan server HTTP / 2. Ada juga slot, atribut khusus, acara khusus, dan detail lainnya. Tentang mereka beberapa saat kemudian, ketika kita melanjutkan untuk berlatih.
Ya, komponen web Anda ini hampir tidak didukung di mana pun.
Nomor kering adalah teman terbaik seorang insinyur. Mari kita lihat "hampir tidak ada" dari sudut ini:
Elemen Khusus - 78.71%
Shadow DOM - 79,12%
Templat - 89,61%
Impor HTML - 69,16%
Seperti yang bisa kita lihat, teknologi di atas bekerja di browser untuk sebagian besar pengguna. Impor HTML sedikit merusak gambar, tetapi kami tidak diwajibkan untuk menggunakan set lengkap (saya lebih suka ES-modul asli untuk memecah semuanya menjadi blok yang nyaman), bahkan secara individual, Anda dapat menemukan banyak yang “enak” di daftar ini.
Saya sangat merekomendasikan untuk tidak mempercayai saya secara membabi buta, tetapi untuk mengikuti tautan yang disediakan. Di sana, misalnya, Anda dapat melihat status saat ini untuk spesifikasi ini dan fakta bahwa Custom Elements dan Shadow DOM
telah menerima dukungan penuh di Firefox, dimulai dengan versi 63 . Ketika sebagian besar pengguna rubah akan meng-upgrade ke versi ini, dan saat ini sudah dekat, angka keseluruhan akan menjadi lebih menarik. Juga, Anda mungkin telah memperhatikan "dukungan tidak lengkap" Elemen Kustom dan Shadow DOM di Safari. Peramban apel tidak akan membiarkan Anda mewarisi komponen Anda dari elemen peramban bawaan bawaan, seperti tombol, pilih, dan sejenisnya. Safari juga memiliki beberapa nuansa dalam pemilih CSS saat menggunakan Shadow DOM. Dalam praktiknya, sangat mungkin untuk hidup dengannya dan tidak berduka. Rupanya, secara tradisional, Microsoft Edge adalah orang luar di antara browser modern. Pengembang mengklaim bahwa dukungan sedang dilaksanakan. Kami sedang menunggu.
Nah, apa yang harus dilakukan dengan sisanya ~ 20% pengguna?
Polyfiles dapat digunakan untuk mendukung orang-orang ini. Ya, ini akan bekerja sedikit lebih lambat dengan polyphiles, tetapi ini tidak terlihat dengan mata telanjang. Tetapi untuk orang lain - itu akan lebih cepat.
Kami mencoba lima tahun lalu untuk melakukan proyek pada Polymer. Semuanya sangat lambat.
Di masa "jauh" itu, rancangan standar (v0) mengamuk, yang dukungannya hanya diterapkan di Chrome. Sejak itu, banyak yang telah berubah: versi baru dari standar, v1, diadopsi, dukungan asli diimplementasikan di berbagai browser, polyphiles ditulis ulang, dan praktik yang baik berlanjut hingga penyelesaian. Polymer sendiri telah berevolusi dari pratinjau teknologi menjadi solusi yang benar-benar berfungsi, yang bagus untuk digunakan.
Beberapa polimer ... Tentang apa semua ini?
Polymer adalah pustaka untuk membuat komponen web. Ini mengimplementasikan dukungan untuk semua "gula" yang biasa kita gunakan ketika bekerja dengan kerangka kerja front-end yang populer: binding data dinamis, repeater untuk bekerja dengan array, dll. Saat ini, versi stabil ke-3 telah dirilis perpustakaan ini. Pengembangan dilakukan dengan partisipasi aktif dari pengembang Chrome. Ekosistem dikelola oleh Google.
Panjang total janggut pengembang adalah ...Kapan menggunakan komponen web?
Jika Anda memerlukan pustaka bersama universal untuk komponen UI. Sebuah kasus dalam hidup: sebuah proyek di mana aplikasi utama ditulis dalam Bereaksi dan kantor belakang di Angular. Dan saya ingin kesamaan dan semua jenis penggunaan kembali basis kode. Dan komponen web terasa hebat
di ekosistem yang berbeda .
Jika Anda dekat dengan desain dalam pendekatan browser . Anda dapat membuat tanpa terus membangun kembali aplikasi dan tanpa ketergantungan yang tidak perlu. Ini membuat prototipe pengalaman yang sangat menyenangkan dan memungkinkan aplikasi Anda berkembang dengan lancar dari kondisi prototipe ke kondisi versi produksi. Saya suka itu.
Jika Anda menyukai OOP lama yang baik : buat kelas dengan mewarisi dari elemen HTML, mengimplementasikan fitur dan roti yang diinginkan di dalamnya, dan kemudian mewarisi kelas dari itu untuk komponen khusus. Dan sekarang Anda memiliki struktur mikro sendiri. Cantik!
Jika Anda membenci BEM : Shadow DOM mengisolasi gaya komponen. Tidak perlu penamaan mengerikan bertingkat, atau menyediakan navigasi untuk deklarasi di tumpukan CSS umum. Semuanya dikemas dalam komponen: gaya, tata letak, logika.
Jika Anda mengembangkan aplikasi berdasarkan Elektron. Versi Chromium di Electron saat ini sudah mendukung semua yang Anda butuhkan. Meskipun ada kelambatan umum dalam versi.
Jika Anda ingin menulis kerangka / pustaka Anda. Komponen web merupakan dasar komposisi yang sangat baik untuk eksperimen semacam itu.
Jika Anda memerlukan pendekatan hibrid: Anda menerapkan halaman web klasik dengan elemen SPA : tag khusus dapat digunakan dengan mesin templat server apa pun, mereka dapat menjadi bagian dari markup umum dan menentukan tujuan Anda pada waktu yang tepat. Anda dapat menjaga keseimbangan halus dari apa yang diberikan di server dan apa yang berfungsi pada klien.
Jika pengguna Anda menggunakan browser modern. Dengan sendirinya.
Jika Anda mengembangkan PWA : platform seluler utama mendukung semuanya di luar kotak. Untuk memulai cepat, ada
pwa-starter-kit .
Jika Anda tertarik pada peningkatan keamanan aplikasi dan audit dependensi terperinci tidak memungkinkan bagi Anda. Semuanya sederhana di sini: lebih sedikit ketergantungan - lebih sedikit lubang yang tidak terkontrol.
Jika Anda seorang maniak optimizer dan suka bekerja dengan DOM API : komponen web adalah bagian dari DOM API, dengan semua fitur standar elemen DOM biasa.
Jika Anda ingin melanggar kompatibilitas mundur versi perpustakaan : ketika semuanya didasarkan pada standar hardcore, entah bagaimana itu lebih dapat diandalkan.
Kapan Anda TIDAK boleh menggunakan komponen web
Ketika persyaratan untuk proyek Anda ada kebutuhan untuk mendukung browser lama dan eksotis. Dalam hal ini, Anda tidak akan iri pada umumnya. Belasungkawa saya.
Ketika Anda mengembangkan produk sederhana dengan siklus hidup yang pendek dan Anda tidak perlu mengembangkan basis kode tunggal.Saat Anda berurusan terutama dengan kode lawas.Ketika Anda dan kolega Anda hanya menggunakan sesuatu yang modis dan tidak ingin tahu apa-apa lagi.Mengapa saya membutuhkan semua ini? Saya punya React / Vue / Angular / etc, cukup untuk saya ...
Kemudian, bagian penting dari apa yang dilakukan JavaScript di perpustakaan dan kerangka kerja populer dapat digeser ke implementasi browser tingkat rendah. Demi kecepatan, mengurangi jumlah ketergantungan yang terlalu tinggi, mengurangi ketergantungan pada ketergantungan. Demi kebaikan.