Meningkatkan perpustakaan UI kami: dari komponen khusus hingga pendekatan radix hibrid – Beragampengetahuan

Bagaimana subito.it, platform klasifikasi online terkemuka di Italia, menangani kompleksitas pustaka komponen UI-nya, mulai dari membangun semuanya sendiri hingga mengadopsi solusi sumber terbuka.

memperkenalkan

Membangun dan memelihara pustaka komponen UI internal adalah salah satu tantangan yang tampaknya sederhana sampai Anda mendalaminya.

Di subito, kami telah mengalami perjalanan ini secara langsung, mulai dari membuat komponen khusus sendiri, hingga bereksperimen dengan perpustakaan seperti Spark berdasarkan Tailwindcss eksternal (sering disebut Tailwind), dan pada akhirnya mengadopsi pendekatan hibrida yang berpusat pada Radix.

Ini adalah kisah tentang pembelajaran yang kami peroleh dan keputusan pragmatis yang membentuk pendekatan kami saat ini.

Membangun sendiri: Tantangan komponen khusus

Awalnya, kami ingin membuat komponen kami sendiri berdasarkan elemen HTML asli.

Kami memiliki persyaratan desain khusus dan menginginkan kontrol penuh atas perilaku komponen kami saat dibuat di atas elemen browser standar (mis. <select>, <input>Dan <button>.

Namun, kami segera menemukan bahwa membangun komponen yang benar-benar dapat diakses dan kompatibel lintas-browser ternyata lebih rumit daripada yang terlihat di permukaan.

Tantangan utama yang kami temui meliputi:

• Inkonsistensi peramban: Apa yang berfungsi sempurna di Chrome mungkin berperilaku berbeda di Safari atau Firefox
• Persyaratan aksesibilitas: Menerapkan properti ARIA, navigasi keyboard, dan dukungan pembaca layar yang sesuai memerlukan keahlian yang mendalam
• Pengoptimalan kinerja: Memastikan komponen dapat berjalan dengan baik pada perangkat dan skenario yang berbeda
• Biaya pemeliharaan: Setiap komponen khusus menjadi komitmen jangka panjang yang memerlukan pembaruan, perbaikan bug, dan peningkatan fitur

Kami menyadari bahwa pemeliharaan komponen internal ini menjadi mahal baik dari segi waktu pengembangan maupun dukungan berkelanjutan.

Eksperimen perpustakaan berdasarkan Tailwind

Menyadari perlunya pendekatan yang lebih berkelanjutan, kami mulai mencari solusi eksternal.

Upaya pertama kami adalah dengan perpustakaan berbasis Tailwind bernama Spark, yang dikembangkan oleh rekan kami di leboncoin.

Mengingat leboncoin menghadapi kebutuhan bisnis dan tantangan desain yang serupa, ini sepertinya merupakan pilihan yang wajar, dan sebagai tambahan, perpustakaan menyediakan landasan teknis yang kuat dan serangkaian komponen yang komprehensif.

Mengintegrasikan perpustakaan berbasis Tailwind ini ke dalam ekosistem kami yang ada terbukti lebih menantang dari yang diperkirakan:

Desain khusus aplikasi: Ini terutama dirancang untuk aplikasi lengkap, bukan sebagai perpustakaan dasar untuk membangun perpustakaan UI lainnya, seperti dalam kasus kami, kami memelihara perpustakaan UI yang digunakan di banyak situs mikro.

Tantangan Adopsi Tailwind: Mengadopsi perpustakaan berbasis Tailwind memaksa kami untuk mengintegrasikan Tailwind ke dalam aplikasi web kami, meskipun kami belum secara resmi menyetujuinya sebagai alat pengembangan.

Kami secara implisit membuka pintu untuk penggunaannya di seluruh basis kode.
Hal ini menyebabkan banyak kebingungan di kalangan pengembang, yang ingin mengetahui: “Dapatkah saya menggunakan utilitas Tailwind di seluruh basis kode saya, atau haruskah saya terus menulis CSS dengan cara tradisional?“

Selain itu, mengintegrasikan Tailwind memaksa kami untuk memodifikasi pengaturan ulang CSS dan gaya dasar yang ada agar dapat berdampingan dengan gaya pengaturan ulang Tailwindcss sendiri, sehingga menambah lapisan kompleksitas pada arsitektur gaya kami.

Jalan Menuju Kardinalitas: Menemukan Fundamental yang Tepat

Setelah menganalisis kompleksitas yang ditimbulkan oleh pendekatan perpustakaan berbasis Tailwind, kami memutuskan untuk mengambil langkah mundur dan memikirkan kembali strategi kami. Hal ini mendorong kami untuk memilih Radix sebagai solusi inti kami.

Ini menjadi fondasi yang ideal karena beberapa alasan:

Kedewasaan dan keandalan: adalah perpustakaan yang sangat matang dengan rekam jejak stabilitas dan kinerja yang baik.

Aksesibilitas terlebih dahulu: Dibangun dengan aksesibilitas sebagai prinsip inti, ia menangani semua properti ARIA yang kompleks, navigasi keyboard, dan dukungan pembaca layar yang kami temui di komponen khusus.

Komunitas dan Kontribusi: Sifat open source memungkinkan kami berkontribusi pada proyek dan mendapatkan manfaat dari komunitas besar pengembang dan pengelola.

Pengembangan ramah AI: Sebagai perpustakaan yang diadopsi secara luas, perpustakaan ini memiliki dukungan alat AI yang sangat baik. Popularitasnya berarti bahwa agen AI dan asisten pengkodean memiliki pengetahuan luas tentang pola utama, sehingga sangat mudah untuk membangun solusi di atasnya dengan bantuan AI.

Namun, kami menyadari bahwa kebutuhan Radix dan pengalaman pengguna kami tidak selalu selaras, jadi kami memutuskan untuk mengadopsi strategi hybrid.

Strategi hybrid kami: Radix + integrasi selektif

Karena sifat modular dari Radix, kami tidak dipaksa untuk mengadopsi seluruh perpustakaan, tetapi hanya dapat menyertakan komponen yang benar-benar kami perlukan.

Hal ini memberi kami fleksibilitas untuk mengandalkan Radix untuk memberikan nilai terbaik, sekaligus mengintegrasikan perpustakaan khusus lainnya ketika komponen tertentu lebih memenuhi harapan kami.

Dengan cara ini, kami mengadopsi strategi hybrid yang menggabungkan ketangguhan Radix dengan kebebasan memilih solusi yang paling tepat untuk setiap situasi.

Misalnya, karena Radix tidak menyediakan menu dropdown yang sepenuhnya memenuhi kebutuhan kami, kami memilih untuk mengintegrasikan React Select daripada membuat menu dropdown kami sendiri.

sebagai kesimpulan

Proses kami dalam membangun perpustakaan UI menyoroti beberapa pembelajaran penting:

• Membuat komponen yang benar-benar dapat diakses secara internal memerlukan biaya dan waktu yang lama, sehingga memanfaatkan solusi open source sering kali merupakan langkah yang lebih cerdas.
• Jika Anda belum siap untuk sepenuhnya berkomitmen pada Tailwind CSS, hindari pustaka yang terkait erat dengannya, pendekatan hibrid sering kali menambah kompleksitas daripada nilai.

• Radix telah terbukti menjadi fondasi yang sangat baik: ia menyediakan komponen yang matang, mudah diakses, dan berbasis perilaku tanpa perlu menentukan gaya. Kami memahami bahwa pengelola Radix sedang bergerak maju, namun kami setuju dengan apa yang penulis Shadcn tunjukkan di sini.

• Memadukan dan mencocokkan alat terbaik dari berbagai perpustakaan sumber terbuka membantu kami mencapai keseimbangan antara kontrol, kualitas, dan pemeliharaan.

Selain teknologi, perjalanan juga menjadi pemicunya Transformasi proses: Meskipun tim UX/Desain kami biasanya menghasilkan komponen yang benar-benar baru, fokusnya sekarang adalah mengidentifikasi komponen paling sesuai yang sudah ada di ekosistem open source, berkontribusi jika memungkinkan, dan mengadaptasinya ke sistem desain kami.

Perubahan ini mengubah hubungan antara desain dan teknik:

• majumodel ini berfokus pada penciptaan,
• Sekarangyang semakin melibatkan kurasi, penelitian, dan adaptasi.

Pada akhirnya, tujuannya sederhana: Berikan pengalaman pengguna yang luar biasa tanpa menciptakan kembali setiap roda.