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 telah menggunakan web hari 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 yang paling berhasil 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 penerbitan yang dibuat dengan AMP—komponen AMP juga merupakan komponen web. Banyak perusahaan juga mengadopsi komponen web.
Apa itu komponen web?
Jadi, apa itu komponen web? Spesifikasi komponen web menyediakan serangkaian API tingkat rendah yang memungkinkan Anda memperluas serangkaian 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 mengatakan apa pun tentang cara komponen diimplementasikan:
- Mesin rendering apa 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 memberi tahu cara membuatnya.
Penulis dapat memilih pola rendering fungsional seperti React untuk membangun 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 Anda gunakan 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 asli, komponen ini dapat dirender oleh semua framework populer. Dengan demikian, komponen Anda dapat digunakan secara lebih luas, dalam berbagai aplikasi, tanpa mengunci pengguna ke satu framework.
Karena antarmuka komponennya standar, komponen web yang diimplementasikan menggunakan library yang berbeda dapat digabungkan di halaman yang sama. Fakta ini membantu aplikasi Anda tetap relevan di masa mendatang saat Anda memperbarui stack teknologi. Daripada melakukan perubahan besar antara satu framework dan framework lainnya, dengan mengganti semua komponen, Anda dapat mengupdate komponen satu per satu.
Siapa yang menggunakan komponen web?
Jadi, karena semua alasan ini, Komponen Web sebenarnya sangat sukses dalam berbagai kasus penggunaan yang berbeda. Tiga kasus penggunaan yang sangat populer adalah: situs konten, sistem desain, dan aplikasi perusahaan.
Situs konten
Komponen web adalah teknologi yang sempurna untuk meningkatkan kualitas konten secara progresif, karena sudah dapat ditampilkan sebagai HTML standar oleh banyak sistem CMS.
AMP adalah contoh yang bagus tentang seberapa cepat dan mudah Komponen Web dimasukkan ke dalam 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 berurusan dengan banyak tim yang membuat 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 tulis sekali, jalankan di mana saja yang sebenarnya masih memberikan kebebasan kepada tim aplikasi 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 mencapai kemajuan yang luar biasa di dalam perusahaan sebagai teknologi yang aman dan siap untuk masa depan yang akan distandardisasi. Caridy Patiño, arsitek untuk platform UI Salesforce, menjelaskan alasan mereka membangun platform UI menggunakan komponen web.
Salesforce adalah kumpulan aplikasi—banyak di antaranya berasal dari akuisisi. Setiap aplikasi ini dapat berjalan di tumpukan teknologinya sendiri. Karena dibangun di stack yang berbeda, sulit untuk memberikan tampilan dan nuansa yang sama pada semuanya. Selain itu, Salesforce memungkinkan pelanggan membuat aplikasi kustom mereka sendiri menggunakan platform Salesforce. Jadi, idealnya komponen juga harus dapat digunakan oleh developer eksternal.
Salesforce mengidentifikasi serangkaian kebutuhan dari pelanggan platform mereka:
- Solusi standar, bukan eksklusif—sehingga lebih mudah menemukan developer berpengalaman, dan lebih cepat melatih 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 gangguan pada komponen dan aplikasi mereka. Dengan kata lain, kompatibilitas mundur adalah hal yang wajib.
- Terjebak dengan teknologi lama, dan tidak dapat berkembang.
- Terjebak dalam ekosistem yang membatasi.
Penggunaan komponen web sebagai dasar 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 komponen web standar yang tersedia. Berikut ini beberapa contoh:
- Google menyediakan sistem Desain Materialnya sendiri sebagai komponen web: Komponen Web Material.
- Wired Elements adalah sekumpulan komponen web keren yang menampilkan tampilan sketsa yang digambar tangan.
- Ada Komponen Web khusus yang sangat bagus seperti
<model-viewer>, yang dapat Anda masukkan ke aplikasi mana 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 ini cukup tingkat rendah, sehingga ada sejumlah library yang tersedia untuk mempermudah prosesnya.
Untuk mulai membuat 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. Framework ini mencakup beberapa fitur framework populer, seperti JSX dan TypeScript
- Elemen Angular menyediakan cara untuk membungkus 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 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.