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

Di episode kedua saya menyebut angkanya: satu library UI dipakai di 101 file, satunya bertahan di 13. Episode ini saya buka lebih dalam, karena di dalamnya ada dua temuan yang membuat saya tertawa sendirian di depan layar hehe~

Temuan pertama: keduanya tidak pernah bertemu di satu file yang sama. Temuan kedua: library yang kalah popularitas itu menyimpan barang paling dicari se-kota. Mari berurutan.

Dua Peradaban dengan Garis Demarkasi #

Peradaban pertama adalah library mayoritas: dia menyediakan paginator, button, skeleton, card, sampai galleria gambar. Dia fondasi tampilan hampir semua halaman; panggilannya terdengar di seratus satu file.¹

Peradaban kedua lebih kecil, tapi punya monopoli. Dia yang menyimpan DatePicker, TimePicker, dan Select, komponen paling dicari se-kota ketika sebuah halaman butuh laporan dengan kalender. Tiga belas file menggantungkan hidup padanya, mayoritas halaman report.

Dan yang membuat saya lega sekaligus kagum: setelah dicek satu per satu, nol file memakai keduanya sekaligus. Dua peradaban itu hidup berdampingan tanpa pernah berbagi kamar. Ada garis demarkasi yang tidak tertulis di dokumen mana pun, tapi dipatuhi sempurna, entah oleh siapa dan sejak kapan hehe~

Garis seperti ini biasanya lahir bukan dari kebijakan, tapi dari pengalaman: sekali mencoba mencampur keduanya, seseorang pernah merasakan styling yang saling makan, lalu seluruh tim lupa tidak-lupa. Demarkasi dengan trauma sebagai notaris hahaha.

Kamus di Kantong Reducer #

Temuan kedua ini favorit saya. Salah satu library itu butuh locale: label kalender dalam bahasa Indonesia. Wajar; semua orang butuh kalender berbahasa sendiri. Yang tidak wajar adalah di mana locale-nya di-import: di dalam reducer.

Pengurus data, yang seharusnya mengurus angka dan status, ternyata membawa kamus lapisan tampilan di kantongnya. Tiga reducer berbeda, tiga kali kamus yang sama.²

Untuk apa? Mungkin supaya label locale tersedia saat state disusun. Mungkin sekadar ikut copy-paste zaman dulu. Tidak ada yang tahu pasti, dan memangnya perlu? Inilah peta dan kota tua: arsitektur yang rapi ada di kepala orang asing, sementara kenyataannya adalah kota yang tumbuh liar tapi berfungsi. Reducer membawa kamus itu aneh, tapi dia sudah bertahun-tahun menunjukkan jalan dengan benar, jadi biarlah dia membawa kamusnya hahaha.

Tiga Era Styling #

Lapisan berikutnya: bagaimana komponen-komponen ini berdandan. Di repo ada tiga generasi yang hidup damai:

1. Global CSS klasik: empat puluh delapan file stylesheet yang memengaruhi siapa pun yang kebetulan memakai nama class yang sama. Era kepercayaan buta.
2. Bawaan library UI: tema dari masing-masing peradaban, yang kadang saling menyusup ke wilayah satu sama lain.
3. Tailwind: generasi baru, dengan config-nya, plus satu dokumen perbaikan di akar repo yang sudah saya ceritakan di episode pertama, monumen penyakit yang sembuh.

Tiga era itu tidak saling menghapus. Halaman era pertama tetap bergaya era pertama, dan begitu seterusnya, seperti kota dengan arsitektur kolonial, modern, dan kontemporer berjajar di satu jalan. Berantakan? Tergantung siapa yang ditanya. Berkarakter? Tanpa debat hahaha.

Yang Kami Lakukan (dan Tidak) #

Supaya setia pada tradisi: saat port tipis ini berjalan, kami tidak menyeragamkan apa pun dari daftar di atas. Tidak ada migrasi library, tidak ada pemisahan reducer dari kamusnya, tidak ada penghapusan era styling.

Yang kami jaga justru garis demarkasinya: nol file campuran itu kami pertahankan sebagai aturan tidak tertulis yang resmi kami tulis. Karena standardisasi besar saat pindah rumah itu pelanggaran aturan episode empat versi frontend. Standardisasi itu nyata dan bagus; tempatnya adalah epilog, bukan koper hehe~

Pelajaran #

1. Dua library berdampingan itu sejarah, bukan dosa. Selama garis demarkasi jelas, mereka berdamai lebih baik daripada banyak tim.
2. Larang campuran di level file; itu demarkasi termurah yang paling efektif. Tidak butuh tooling; cukup disiplin dan rasa trauma bersama.
3. Kebocoran lapisan itu petunjuk. Kamus UI di kantong reducer lucu dibaca, dan sekaligus menunjukkan di mana batas lapisan bocor. Tertawa dulu, catat kemudian.
4. Menyeragamkan itu epilog. Jangan gabungkan pindah rumah dengan renovasi total; koper akan robek di tengah jalan.

Episode berikutnya episode penutup berseri: dua sisi satu gedung, apa yang berubah setelah backend dan frontend sama-sama pindah, dan warisan mana yang kami pilih untuk dirawat. Sampai ketemu di sana.

Sekian. Salam.