Penulis materi, terjemahan yang kami terbitkan hari ini, percaya bahwa jika Anda akan menggunakan komponen web saat merancang antarmuka aplikasi Anda dan mencari pustaka yang sesuai tanpa kerangka kerja UI, Anda harus melihat proyek-proyek yang akan dibahas di sini.
Informasi awal
Ketika saya, terus-menerus mendengar tentang
Stencil ,
Svelte dan
Lit HTML , menyusun materi ini dan mulai mencari pustaka komponen web, saya berpikir bahwa akan sulit bagi saya untuk menemukan sesuatu yang menarik berdasarkan pada kemampuan HTML. Itu hanya karena saya belum menyadari potensi penuh komponen web. Saya adalah orang yang pemikirannya terbatas pada kerangka perpustakaan dan kerangka kerja. Keinginan saya mengingatkan saya pada sesuatu seperti "menemukan perpustakaan HTML yang menarik." Tapi sekarang saya mengerti bahwa menemukan perpustakaan yang bagus untuk komponen web tidak begitu sulit.
Semua komponen web, berkat teknologi yang mendasari di mana mereka dibangun, cukup populer, mereka, menurut definisi, dapat berinteraksi satu sama lain dan menunjukkan diri dengan baik ketika digunakan bersama dalam proyek yang sama. Pada saat yang sama, apa yang dibuat menggunakan standar Komponen Web, katakanlah, komponen atau widget tertentu, akan, pertama, bekerja di semua browser modern, dan kedua, itu akan kompatibel dengan perpustakaan JavaScript atau kerangka JavaScript apa pun, yang menggunakan HTML.
1. Bahan Pustaka Komponen Web
Biasanya, jika nama pustaka komponen UI mengandung kata "Material", ini mengarah ke pemimpin dalam peringkat dan unduhan. Pustaka
Komponen Web Material Google adalah versi web dari pustaka Material. Meskipun perpustakaan yang dimaksud masih dalam pengembangan, komponen-komponen yang ada dalam komposisinya sudah dapat digunakan dalam berbagai macam proyek web. Perkembangan perpustakaan ini pasti akan sangat menarik untuk ditonton.
2. Kumpulan Repositori PolymerElements
Pustaka
Polimer Google memungkinkan Anda membuat komponen web mandiri dan dapat digunakan kembali yang bekerja dengan prinsip yang sama dengan elemen HTML standar. Menggunakan komponen web ini semudah menggunakan elemen HTML biasa. Repositori
PolymerElements berisi lebih dari 100 komponen web yang dibuat oleh Polymer menggunakan repositori terpisah. Berikut adalah contoh bekerja dengan komponen web yang serupa:
<!-- --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script> <!-- HTML- --> <paper-checkbox>Web Components!</paper-checkbox>
3. Perpustakaan Komponen Vaadin
Saya percaya bahwa
Komponen Vaadin adalah proyek yang menjanjikan. Perpustakaan ini berisi sekitar 30 pengembangan komponen web sumber terbuka yang dirancang untuk mengembangkan antarmuka seluler dan desktop yang dirancang untuk peramban modern. Keadaan repositori perpustakaan memungkinkan kita untuk mengatakan bahwa pekerjaan aktif sedang berlangsung.
4. Perpustakaan Elemen Kabel
Perpustakaan
Wired Elements mencetak hampir 7.000 bintang di GitHub. Ini memungkinkan Anda membuat elemen yang terlihat seperti digambar dengan tangan. Mereka menyerupai tata letak, dan setiap kali layar ditampilkan, elemen berubah, yaitu, bahkan halaman yang sama dilihat pada waktu yang berbeda akan terlihat berbeda. Saya tidak tahu apakah perpustakaan seperti itu bermanfaat bagi siapa pun, satu-satunya hal yang tidak dapat disangkal adalah bahwa halaman yang dirancang menggunakannya sangat mengagumkan.
Di sini Anda dapat bereksperimen dengannya.
Berikut adalah contoh penggunaannya dengan React. Dan di
sini - dengan Vue.
5. Perpustakaan Elix
Elix adalah seperangkat komponen web yang mencakup kebutuhan pola desain antarmuka standar. Kualitas tinggi dari komponen-komponen ini dicapai dengan memastikan kepatuhan mereka dengan rekomendasi yang ditetapkan dalam dokumen
ini . Misalnya, sesuai dengan rekomendasi ini, elemen HTML standar dianggap berkualitas. Perlu dicatat bahwa proyek Elix mendukung komunitas orang-orang yang berpikiran sama, dan mereka mencari orang-orang yang dapat bergabung dengan mereka.
6. Perpustakaan elemen waktu
Pustaka
elemen-waktu telah ada selama beberapa waktu, cukup populer di GitHub. Ini didasarkan pada komponen yang memperluas kemampuan elemen
<time> HTML standar. Menggunakan perpustakaan ini, Anda dapat menyajikan cap waktu sebagai string terlokalisasi, atau sebagai teks yang diperbarui secara otomatis di browser pengguna. Berikut ini contoh bekerja dengan perpustakaan ini:
<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time> -- <local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
7. Perpustakaan Komponen Web UI5
Perpustakaan
Komponen Web UI5 dikembangkan sebagai bagian dari proyek
OpenUI5 oleh SAP. Ini adalah kumpulan elemen antarmuka pengguna yang ringan dan independen yang cocok untuk digunakan kembali. Perlu dicatat bahwa komponen ini bukan add-on lebih dari UI5. Mereka adalah elemen independen, mereka dapat digunakan bersama dengan berbagai lingkungan untuk pengembangan antarmuka web. Desain komponen sesuai dengan manual SAP
ini .
8. Proyek PatternFly Elements
Proyek
PatternFly Elements adalah kumpulan sekitar 20 komponen web yang mudah digunakan, serta alat untuk pengembangannya. Komponen-komponen web ini cocok untuk digunakan dalam bidang pengembangan web apa pun, cocok dengan berbagai pustaka dan kerangka kerja. Misalnya, Anda dapat menggunakannya saat mengembangkan proyek web menggunakan React, Vue, Angular, atau JavaScript biasa.
Untuk bereksperimen dengan PatternFly Elements, jalankan urutan perintah berikut:
git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install # - lerna bootstrap npm run storybook
9. Proyek webcomponents.org
Proyek
webcomponents.org adalah portal yang merupakan katalog komponen web yang dibuat menggunakan proyek Polymer dan ramah. Ini bagus karena dengan bantuannya Anda dapat mengikuti perkembangan baru tim Polymer. Di sini Anda juga dapat menemukan materi menarik tentang komponen web.
Ringkasan
Pada artikel ini, kami melihat 9 proyek yang terkait dengan komponen web. Kami harap Anda dapat mengunjungi repositori dan situs yang relevan untuk menemukan apa yang Anda cari. Jika Anda tertarik pada topik komponen web, di
sini , di
sini dan di
sini Anda dapat menemukan daftar komponen web dan bahan tambahan untuk bekerja dengannya.
Pembaca yang budiman! Pustaka komponen web apa yang Anda gunakan?