Komponen web di I/O 2019
Di Google I/O 2019, Kevin Schaaf dari Polymer Project dan Caridy Patiño dari Salesforce membahas status komponen web.
Seberapa populer komponen web?
Jika telah menggunakan web hari ini, Anda mungkin telah menggunakan komponen web. Menurut penghitungan kami, sekitar 5% hingga 8% dari semua pemuatan halaman saat ini menggunakan satu atau beberapa komponen web. Hal ini menjadikan komponen web sebagai salah satu fitur platform web baru yang paling sukses yang dikirimkan dalam lima tahun terakhir.
Anda dapat menemukan komponen web di situs yang mungkin Anda gunakan setiap hari, seperti YouTube dan GitHub. Komponen ini juga digunakan di banyak situs berita dan publikasi yang dibuat dengan AMP—komponen AMP juga merupakan komponen web. Selain itu, banyak perusahaan juga mengadopsi komponen web.
Apa yang dimaksud dengan komponen web?
Jadi, apa itu komponen web? Spesifikasi komponen web menyediakan kumpulan API tingkat rendah yang memungkinkan Anda memperluas kumpulan tag HTML bawaan browser. Komponen web menyediakan:
- Metode umum untuk membuat komponen (menggunakan DOM API standar).
- Cara umum untuk menerima dan mengirim data (menggunakan properti/peristiwa).
Di luar antarmuka standar tersebut, standar tidak menyebutkan apa pun tentang cara komponen benar-benar diterapkan:
- Mesin rendering yang digunakan untuk membuat DOM-nya.
- Cara pembaruan berdasarkan perubahan pada properti atau atributnya.
Dengan kata lain, komponen web memberi tahu browser kapan dan di mana untuk membuat komponen, tetapi tidak bagaimana.
Penulis dapat memilih pola rendering fungsional seperti React untuk mem-build komponen web mereka, atau mereka dapat menggunakan template deklaratif seperti yang mungkin Anda temukan di Angular atau Vue. Sebagai penulis, Anda memiliki kebebasan penuh untuk memilih teknologi yang digunakan di dalam komponen, sambil tetap mempertahankan interoperabilitas.
Apa kegunaan komponen web?
Perbedaan utama antara komponen web dan sistem komponen eksklusif adalah interoperabilitas. Karena antarmuka standarnya, Anda dapat menggunakan komponen web di mana pun Anda menggunakan elemen bawaan seperti <input> atau <video>.
Karena dapat dinyatakan sebagai HTML sungguhan, HTML ini dapat dirender oleh semua framework populer. Jadi, komponen Anda dapat digunakan secara lebih luas, dalam berbagai aplikasi yang lebih beragam, tanpa mengunci pengguna ke satu framework.
Selain itu, karena antarmuka komponen bersifat standar, komponen web yang diimplementasikan menggunakan library yang berbeda dapat dicampur di halaman yang sama. Fakta ini membantu aplikasi Anda tetap relevan di masa mendatang saat Anda mengupdate stack teknologi. Alih-alih perubahan besar antara satu framework dengan framework lainnya, yang mengharuskan Anda mengganti semua komponen, Anda dapat mengupdate komponen satu per satu.
Siapa yang menggunakan komponen web?
Jadi, karena semua alasan ini, Komponen Web sebenarnya menemukan kesuksesan besar dalam berbagai kasus penggunaan. Tiga kasus penggunaan sangat populer: situs konten, sistem desain, dan aplikasi perusahaan.
Situs konten
Komponen web adalah teknologi yang sempurna untuk meningkatkan kualitas konten secara bertahap, karena komponen web sudah dapat menghasilkan output sebagai HTML standar oleh sejumlah besar sistem CMS.
AMP adalah contoh yang bagus tentang seberapa cepat dan mudah Komponen Web dimasukkan ke dalam infrastruktur industri penerbitan untuk menayangkan konten.
Sistem desain
Semakin banyak perusahaan yang menyatukan cara mereka menampilkan diri menggunakan sistem desain—serangkaian komponen dan pedoman yang menentukan tampilan dan nuansa umum untuk situs dan aplikasi organisasi. Komponen web juga sangat cocok di sini.
Sering kali, desainer harus bersaing dengan banyak tim yang membuat versi komponen sistem desain mereka sendiri di atas React, Angular, dan semua framework lainnya, bukan memiliki satu kumpulan komponen kanonis.
Komponen web adalah jawabannya—sistem komponen yang benar-benar ditulis sekali, berjalan di mana saja, yang masih memberi tim aplikasi kebebasan untuk menggunakan framework pilihan mereka
Perusahaan seperti ING, EA, dan Google menerapkan bahasa desain perusahaan mereka dalam komponen web.
Enterprise: Komponen web di Salesforce
Komponen web juga mengalami kemajuan yang luar biasa di dalam perusahaan sebagai teknologi yang aman dan tahan lama untuk distandarisasi. Caridy Patiño, arsitek untuk platform UI Salesforce, menjelaskan alasan mereka membuat platform UI menggunakan komponen web.
Salesforce adalah kumpulan aplikasi—banyak di antaranya berasal dari akuisisi. Masing-masing dapat berjalan di stack teknologinya sendiri. Karena dibuat di stack yang berbeda, sulit untuk memberikan tampilan dan nuansa yang sama. Selain itu, Salesforce memungkinkan pelanggan membuat aplikasi kustom mereka sendiri menggunakan platform Salesforce. Jadi, idealnya komponen juga dapat digunakan oleh developer di luar.
Salesforce mengidentifikasi serangkaian kebutuhan dari pelanggan platform mereka:
- Solusi standar, bukan solusi eksklusif—sehingga lebih mudah menemukan developer berpengalaman, dan lebih cepat untuk meningkatkan kemampuan developer baru.
- Model komponen umum—sehingga penyesuaian aplikasi Salesforce apa pun berfungsi dengan cara yang sama.
Mereka juga mengidentifikasi beberapa hal yang tidak diinginkan pelanggan:
- Perubahan yang menyebabkan error pada komponen dan aplikasinya. Dengan kata lain, kompatibilitas mundur adalah suatu keharusan.
- Terpaku pada teknologi lama, dan tidak dapat berkembang.
- Terjebak di dalam taman berdinding.
Menggunakan komponen web sebagai dasar untuk platform UI baru memenuhi semua kebutuhan ini, dan hasilnya adalah Lightning Web Components baru.
Mulai menggunakan komponen web
Ada banyak cara bagus untuk memulai komponen web.
Jika Anda membuat aplikasi web, pertimbangkan untuk menggunakan beberapa dari banyak komponen web siap pakai yang tersedia. Berikut ini beberapa contoh:
- Google menjual sistem desain Material-nya sendiri sebagai komponen web: Komponen Web Material.
- Elemen Berkabel adalah serangkaian komponen web keren yang menampilkan tampilan sketsa yang digambar tangan.
- Ada Komponen Web khusus tujuan yang bagus seperti
<model-viewer>, yang dapat Anda masukkan ke aplikasi apa pun untuk menambahkan konten 3D.
Jika Anda mengembangkan sistem desain untuk perusahaan, atau menjual satu komponen atau library yang ingin digunakan di lingkungan mana pun, pertimbangkan untuk menulis komponen menggunakan komponen web. Anda dapat menggunakan API komponen web bawaan, tetapi API ini cukup tingkat rendah, sehingga ada sejumlah library yang tersedia untuk mempermudah prosesnya.
Untuk mulai mem-build komponen Anda sendiri, Anda dapat melihat LitElement, class dasar komponen web yang dikembangkan oleh Google yang memiliki pengalaman rendering fungsional yang hebat dan mirip dengan React.
Alat dan library lain yang perlu dipertimbangkan:
- Stencil adalah framework yang mengutamakan komponen web. Library ini mencakup beberapa fitur framework populer, seperti JSX dan TypeScript
- Elemen Angular menyediakan cara untuk menggabungkan komponen Angular sebagai komponen web.
- Wrapper komponen web Vue.js menyediakan cara untuk memaketkan komponen Vue sebagai komponen web.
Referensi lainnya:
- open-wc.org menampilkan informasi memulai yang bagus, serta tips dan konfigurasi default untuk alat build dan pengembangan.
- Dasar-Dasar Web memberikan pengantar tentang API komponen web dasar, dan praktik terbaik untuk mendesain komponen web.
- MDN menyediakan dokumen referensi untuk API komponen web, serta beberapa tutorial. \
Gambar hero oleh Jason Tuinstra di Unsplash.
Catatan editor: Diagram penggunaan elemen kustom telah diperbarui untuk menampilkan data penggunaan bulanan lengkap, seperti yang dilaporkan di chromestatus.com. Versi sebelumnya dari postingan ini menyertakan grafik dengan tingkat perincian 6 bulan, tanpa bulan terbaru. Deret V0 & V1 dalam diagram asli ditumpuk; sekarang ditampilkan tanpa ditumpuk dengan garis total untuk menghilangkan ambiguitas. Lonjakan mendadak pada akhir tahun 2017 disebabkan oleh perubahan pada sistem pengumpulan data untuk chromestatus.com. Perubahan ini memengaruhi statistik untuk semua fitur platform web dan menghasilkan pengukuran yang lebih akurat ke depannya.