Komponen web di I/O 2019
Dipublikasikan: 18 Juni 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 Anda menggunakan web saat ini, Anda mungkin telah menggunakan komponen web. Menurut perhitungan 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 paling sukses yang diluncurkan 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. Banyak perusahaan juga mengadopsi komponen web.
Apa yang dimaksud dengan komponen web?
Jadi, apa itu komponen web? Spesifikasi komponen web menyediakan serangkaian API tingkat rendah yang memungkinkan Anda memperluas kumpulan tag HTML bawaan browser. Komponen web menyediakan:
- Metode umum untuk membuat komponen (menggunakan API DOM standar).
- Cara umum untuk menerima dan mengirim data (menggunakan properti/peristiwa).
Di luar antarmuka standar tersebut, standar tidak menjelaskan apa pun tentang cara komponen benar-benar diimplementasikan:
- Mesin rendering yang digunakan untuk membuat DOM-nya.
- Cara memperbarui dirinya sendiri berdasarkan perubahan pada properti atau atributnya.
Dengan kata lain, komponen web memberi tahu browser kapan dan di mana harus membuat komponen, tetapi tidak cara membuatnya.
Penulis dapat memilih pola rendering fungsional seperti React untuk membangun komponen web, 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, sekaligus 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 akan menggunakan elemen bawaan seperti <input> atau <video>.
Karena dapat dinyatakan sebagai HTML asli, komponen web 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 saja.
Dan karena antarmuka komponennya standar, komponen web yang diimplementasikan menggunakan library yang berbeda dapat digabungkan di halaman yang sama. Fakta ini membantu memastikan aplikasi Anda siap menghadapi masa depan saat Anda mengupdate stack teknologi. Daripada melakukan perubahan besar-besaran antara satu framework dan 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 meraih kesuksesan besar dalam berbagai kasus penggunaan yang berbeda. Tiga kasus penggunaan yang sangat populer: situs konten, sistem desain, dan aplikasi perusahaan.
Situs konten
Komponen web adalah teknologi yang sempurna untuk meningkatkan konten secara progresif, karena komponen tersebut sudah dapat dihasilkan sebagai HTML standar oleh sistem CMS yang tak terhitung jumlahnya.
AMP adalah contoh bagus tentang seberapa cepat dan mudahnya Komponen Web masuk ke infrastruktur industri penerbitan untuk menyajikan konten.
Sistem desain
Makin banyak perusahaan yang menyatukan cara mereka menampilkan diri menggunakan sistem desain—sekumpulan 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 membangun versi komponen sistem desain mereka sendiri di atas React, Angular, dan semua framework lainnya, alih-alih memiliki satu set komponen kanonis.
Komponen web adalah jawabannya—sistem komponen yang benar-benar ditulis sekali, dijalankan di mana saja, yang tetap 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 luar biasa di dalam perusahaan sebagai teknologi yang aman dan siap menghadapi masa depan untuk distandardisasi. Caridy Patiño, arsitek untuk platform UI Salesforce, menjelaskan alasan mereka membangun platform UI menggunakan komponen web.
Salesforce adalah kumpulan aplikasi, yang banyak di antaranya berasal dari akuisisi. Masing-masing dapat berjalan di technology stack-nya sendiri. Karena dibuat di stack yang berbeda, sulit untuk memberikan tampilan dan nuansa yang sama untuk semuanya. Selain itu, Salesforce memungkinkan pelanggan membuat aplikasi kustom mereka sendiri menggunakan platform Salesforce. Jadi, idealnya komponen juga harus dapat digunakan oleh developer luar.
Salesforce mengidentifikasi serangkaian kebutuhan dari pelanggan platform mereka:
- Solusi standar, bukan eksklusif—sehingga lebih mudah untuk 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 dapat menyebabkan gangguan pada komponen dan aplikasi mereka. Dengan kata lain, kompatibilitas mundur adalah suatu keharusan.
- Terjebak dengan teknologi lama, dan tidak dapat berkembang.
- Terjebak dalam ekosistem yang membatasi.
Penggunaan 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 mulai menggunakan komponen web.
Jika Anda membangun aplikasi web, pertimbangkan untuk menggunakan beberapa dari banyak komponen web standar yang tersedia. Berikut ini beberapa contoh:
- Google menyediakan sistem Desain Material-nya sendiri sebagai komponen web: Komponen Web Material.
- Wired Elements adalah kumpulan komponen web keren yang menampilkan tampilan sketsa yang digambar tangan.
- Ada Komponen Web tujuan khusus 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 Anda menjual satu komponen atau library yang ingin dapat digunakan di lingkungan mana pun, pertimbangkan untuk membuat komponen menggunakan komponen web. Anda dapat menggunakan API komponen web bawaan, tetapi API tersebut cukup low-level, sehingga ada sejumlah library yang tersedia untuk mempermudah prosesnya.
Untuk mulai membangun komponen Anda sendiri, Anda dapat melihat LitElement, class dasar komponen web yang dikembangkan oleh Google yang memiliki pengalaman rendering fungsional yang bagus, mirip dengan React.
Alat dan library lain yang perlu dipertimbangkan:
- Stencil adalah framework yang mengutamakan komponen web. React 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 mengemas 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 menyediakan panduan tentang API komponen web dasar, dan praktik terbaik untuk mendesain komponen web.
- MDN menyediakan dokumen referensi untuk API komponen web, serta beberapa tutorial.