Hijrah Frontend (4): Dua Library UI, Dua Era Penamaan

Di episode kedua saya sempat menyebut angkanya: satu library UI dipakai di 101 file, satunya di 13 saja. Kali ini saya bongkar penggunaannya lebih dekat. Ada dua hal yang bikin saya mengernyit, lalu tertawa sendiri di depan layar, hehe.

Rupanya keduanya tidak pernah dipakai dalam file yang sama. Aneh juga, library yang lebih jarang dipakai justru punya komponen yang paling sering dicari. Saya ceritakan.

Dua Library, Batas yang Tidak Tertulis #

Library pertama dipakai di lebih banyak halaman. Isinya paginator, button, skeleton, card, sampai galleria gambar. Hampir semua halaman memakai komponen darinya; ada 101 file yang memanggilnya.¹

Library kedua hanya dipakai di 13 file, kebanyakan halaman report. Namun, komponen DatePicker, TimePicker, dan Select hanya tersedia di sana. Saat halaman laporan membutuhkan kalender, ketiganya yang dicari.

Saya cek file-nya satu per satu dan memang tidak ada yang memakai dua library sekaligus. Batas ini kelihatannya selalu dijaga, walaupun saya tidak menemukan catatan kapan atau kenapa aturan itu muncul. Setidaknya, pola tersebut masih konsisten di file yang saya periksa.

Kamus di Kantong Reducer #

Temuan kedua ini favorit saya. Salah satu library membutuhkan locale supaya label kalender tampil dalam bahasa Indonesia. Masuk akal. Tapi tempat import-nya membuat saya berhenti sebentar: di dalam reducer.

Reducer biasanya mengurus data seperti angka dan status. Di sini, tiga reducer berbeda masing-masing membawa kamus yang sama untuk lapisan tampilan.²

Kenapa locale ditaruh di sana? Mungkin supaya labelnya tersedia waktu state disusun, mungkin juga sisa copy-paste lama. Saya belum tahu. Letaknya memang terasa aneh, tapi sudah bertahun-tahun berfungsi. Untuk port kali ini, saya catat dulu. Belum perlu dipindah-pindah.

Tiga Era Styling #

Untuk styling, ada tiga generasi di repo:

1. Global CSS klasik: 48 file stylesheet yang bisa memengaruhi elemen lain dengan nama class yang sama.
2. Bawaan library UI: tema dari masing-masing library, yang kadang masuk ke wilayah satu sama lain.
3. Tailwind: generasi baru dengan config-nya, serta satu dokumen perbaikan di akar repo yang sudah saya ceritakan di episode pertama.

Ketiganya masih dipakai. Halaman yang lebih lama tetap memakai gaya lama, sementara halaman lain memakai library UI atau Tailwind. Hasilnya memang tidak seragam. Ya, begitulah frontend yang kami port, hehe.

Yang Kami Lakukan (dan Tidak) #

Selama port tipis ini, kami tidak menyeragamkan hal-hal di atas. Tidak ada migrasi library, pemisahan reducer dari locale, atau penghapusan era styling.

Yang kami jaga cuma batas antarlibrary: satu file tidak mencampur keduanya. Kebiasaan yang tadinya tidak tertulis itu sekarang kami catat. Kalau sekalian melakukan standardisasi besar saat pindahan, itu akan melanggar aturan episode empat versi frontend. Nanti saja, setelah port selesai.

Catatan Saya #

1. Dua library bisa berdampingan. Yang penting, batas pemakaiannya jelas.
2. Mulai dari aturan sederhana di level file. Kami tidak membutuhkan tooling khusus untuk menjaga agar keduanya tidak tercampur.
3. Import locale di reducer menunjukkan batas lapisan yang kurang rapi. Untuk sekarang, cukup catat dulu karena kode itu masih berfungsi.
4. Pisahkan port dari standardisasi. Pindahkan dulu; perbaikan besar bisa menyusul.

Episode berikutnya jadi penutup seri. Saya akan melihat dua sisi gedung yang sama, apa yang berubah setelah backend dan frontend dipindahkan, dan warisan mana yang kami putuskan untuk dipelihara. Sampai jumpa di sana.

Sekian. Salam.