Komponen web di I/O 2019
Di Google I/O 2019, Kevin Schaaf dari Project Polymer dan Caridy Patiño dari Salesforce berbicara tentang status komponen web.
Seberapa populer komponen web?
Jika Anda menggunakan web saat ini, Anda mungkin telah menggunakan komponen web. Menurut perhitungan kami, antara 5% dan 8% dari semua pemuatan halaman saat ini menggunakan satu atau beberapa komponen web. Hal tersebut menjadikan komponen web sebagai salah satu fitur platform web baru yang paling sukses yang diluncurkan dalam lima tahun terakhir.
Anda dapat menemukan komponen web pada situs yang mungkin Anda gunakan setiap hari, seperti YouTube dan GitHub. Model ini juga digunakan di banyak situs berita dan publikasi yang dibuat dengan AMP—komponen AMP juga merupakan komponen web. Dan banyak perusahaan juga mengadopsi komponen web.
Apa yang dimaksud dengan komponen web?
Jadi, apa yang dimaksud dengan 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 mengatakan apa pun tentang bagaimana komponen sebenarnya diterapkan:
- Mesin rendering apa yang digunakannya untuk membuat DOM-nya.
- Caranya 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 bukan 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 saja kegunaan komponen web?
Perbedaan utama antara komponen web dan sistem komponen eksklusif terletak pada interoperabilitas. Karena antarmukanya yang standar, Anda dapat menggunakan komponen web di mana pun Anda akan menggunakan elemen bawaan seperti <input> atau <video>.
Karena bisa dinyatakan sebagai HTML sungguhan, mereka bisa dirender oleh semua kerangka kerja populer. Agar komponen Anda dapat digunakan secara lebih luas, dalam rentang aplikasi yang lebih beragam, tanpa membatasi pengguna ke dalam satu framework.
Dan karena antarmuka komponen adalah standar, komponen web yang diimplementasikan menggunakan library yang berbeda dapat dicampur pada halaman yang sama. Fakta ini membantu aplikasi Anda siap menghadapi masa depan saat Anda mengupdate tech stack. Alih-alih perubahan langkah besar antara satu kerangka kerja ke kerangka kerja lainnya, saat Anda mengganti semua komponen, Anda bisa memperbarui komponen satu per satu.
Siapa yang menggunakan komponen web?
Jadi untuk semua alasan ini, Komponen Web sebenarnya meraih sukses besar dalam berbagai kasus penggunaan yang berbeda. Tiga kasus penggunaan telah menjadi sangat populer: situs konten, sistem desain, dan aplikasi perusahaan.
Situs konten
Komponen web merupakan teknologi sempurna untuk secara progresif meningkatkan konten, karena komponen web tersebut telah dapat menjadi HTML standar dengan jumlah sistem CMS yang tak terhitung jumlahnya.
AMP adalah contoh yang bagus tentang seberapa cepat dan mudah Komponen Web yang dimasukkan ke dalam infrastruktur industri publikasi untuk menayangkan konten.
Sistem desain
Semakin banyak perusahaan 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 berjuang 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 kanonik.
Komponen web adalah jawabannya—sistem komponen yang benar-benar menulis sekali, jalankan 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 mencapai langkah luar biasa di dalam perusahaan sebagai teknologi yang aman dan siap menghadapi masa depan 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 technology stack-nya sendiri. Karena dibuat di stack yang berbeda, sulit untuk memberi tampilan dan nuansa yang sama. Selain itu, Salesforce memungkinkan pelanggan membuat aplikasi kustom mereka sendiri menggunakan platform Salesforce. Jadi idealnya komponen tersebut juga dapat digunakan oleh developer luar.
Salesforce mengidentifikasi serangkaian kebutuhan dari pelanggan platform mereka:
- Solusi standar, bukan solusi eksklusif, sehingga lebih mudah untuk menemukan developer yang berpengalaman dan lebih cepat untuk meningkatkan jumlah developer baru.
- Model komponen yang umum—jadi, menyesuaikan aplikasi Salesforce akan berfungsi dengan cara yang sama.
Mereka juga mengidentifikasi beberapa hal yang tidak diinginkan pelanggan:
- Perubahan yang dapat menyebabkan gangguan pada komponen dan aplikasinya. Dengan kata lain, kompatibilitas mundur adalah suatu keharusan.
- Terhambat dengan teknologi lama dan tidak dapat berkembang.
- Terjebak di dalam taman bertembok.
Penggunaan komponen web sebagai dasar untuk platform UI baru dapat memenuhi semua kebutuhan ini, dan hasilnya adalah Komponen Web Lightning baru.
Mulai menggunakan komponen web
Ada banyak cara bagus untuk memulai komponen web.
Jika Anda membuat aplikasi web, pertimbangkan untuk menggunakan beberapa dari sekian banyak komponen web yang tersedia. Berikut ini beberapa contoh:
- Google menyediakan sistem desain Material miliknya sendiri sebagai komponen web: Komponen Web Material.
- Elemen Berkabel adalah sekumpulan komponen web keren yang menampilkan tampilan sketsa yang digambar tangan.
- Ada Komponen Web tujuan khusus yang hebat seperti
<model-viewer>, yang dapat Anda letakkan ke aplikasi apa pun untuk menambahkan konten 3D.
Jika Anda sedang mengembangkan sistem desain untuk perusahaan Anda, atau Anda menjual satu komponen atau pustaka yang Anda inginkan untuk digunakan di lingkungan apa pun, pertimbangkan untuk membuat komponen Anda menggunakan komponen web. Anda bisa menggunakan API komponen web bawaan, tetapi API itu cukup rendah, jadi ada sejumlah library yang tersedia untuk mempermudah prosesnya.
Untuk mulai membuat komponen sendiri, Anda dapat melihat LitElement, class dasar komponen web yang dikembangkan oleh Google dan memiliki pengalaman rendering fungsional hebat yang mirip dengan React.
Alat dan library lain yang perlu dipertimbangkan:
- Stencil adalah framework yang mengutamakan komponen web. Mencakup beberapa fitur framework populer, seperti JSX dan TypeScript
- Elemen Sudut menyediakan cara untuk menggabungkan komponen Angular sebagai komponen web.
- Wrapper komponen web Vue.js memberikan 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 menyediakan penjelasan tentang API komponen web dasar, dan praktik terbaik untuk mendesain komponen web.
- MDN menyediakan dokumen referensi untuk API komponen web, serta beberapa tutorial. \
Banner besar 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 postingan ini sebelumnya menyertakan grafik dengan tingkat perincian 6 bulan, tanpa bulan terakhir. Deret V0 & V1 dalam diagram asli ditumpuk; sekarang ditampilkan tidak bertumpuk dengan garis total untuk menghilangkan ambiguitas. Lonjakan tiba-tiba 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.