{"author":"Faiq Najib Al-Aziz","body":"\nDi [episode kedua](/writing/2026/hijrah-frontend-02/) 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.\n\nRupanya keduanya **tidak pernah dipakai dalam _file_ yang sama**. Aneh juga, _library_ yang lebih jarang dipakai justru punya komponen yang paling sering dicari. Saya ceritakan.\n\n## Dua Library, Batas yang Tidak Tertulis\n\n_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.[^1]\n\n_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.\n\nSaya 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.\n\n## Kamus di Kantong Reducer\n\nTemuan 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_**.\n\n_Reducer_ biasanya mengurus data seperti angka dan status. Di sini, tiga _reducer_ berbeda masing-masing membawa kamus yang sama untuk lapisan tampilan.[^2]\n\nKenapa _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.\n\n## Tiga Era Styling\n\nUntuk _styling_, ada tiga generasi di _repo_:\n\n1. **_Global CSS_ klasik**: 48 _file stylesheet_ yang bisa memengaruhi elemen lain dengan nama _class_ yang sama.\n2. **Bawaan _library_ UI**: tema dari masing-masing _library_, yang kadang masuk ke wilayah satu sama lain.\n3. **Tailwind**: generasi baru dengan _config_-nya, serta satu dokumen perbaikan di akar _repo_ yang sudah saya ceritakan di [episode pertama](/writing/2026/hijrah-frontend-01/).\n\nKetiganya 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.\n\n## Yang Kami Lakukan (dan Tidak)\n\nSelama port tipis ini, kami **tidak menyeragamkan** hal-hal di atas. Tidak ada migrasi _library_, pemisahan _reducer_ dari _locale_, atau penghapusan era _styling_.\n\nYang 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](/writing/2026/hijrah-backend-04/) versi _frontend_. Nanti saja, setelah port selesai.\n\n## Catatan Saya\n\n1. **Dua _library_ bisa berdampingan.** Yang penting, batas pemakaiannya jelas.\n2. **Mulai dari aturan sederhana di level _file_.** Kami tidak membutuhkan _tooling_ khusus untuk menjaga agar keduanya tidak tercampur.\n3. **Import _locale_ di _reducer_ menunjukkan batas lapisan yang kurang rapi.** Untuk sekarang, cukup catat dulu karena kode itu masih berfungsi.\n4. **Pisahkan port dari standardisasi.** Pindahkan dulu; perbaikan besar bisa menyusul.\n\nEpisode 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.\n\nSekian. Salam.\n\n[^1]: Angka _file_ dan daftar komponen dihitung langsung dari _repo_ saat episode ini ditulis; komponen minor tidak semuanya disebut.\n\n[^2]: Contoh kode dan nama _file_ disederhanakan; strukturnya sama, isinya tidak penting untuk cerita.\n","body_clean":"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.\nRupanya keduanya tidak pernah dipakai dalam file yang sama. Aneh juga, library yang lebih jarang dipakai justru punya komponen yang paling sering dicari. Saya ceritakan.\nDua 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.1\nLibrary 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.\nSaya 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.\nKamus 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.\nReducer biasanya mengurus data seperti angka dan status. Di sini, tiga reducer berbeda masing-masing membawa kamus yang sama untuk lapisan tampilan.2\nKenapa 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.\nTiga Era Styling #Untuk styling, ada tiga generasi di repo:\nGlobal CSS klasik: 48 file stylesheet yang bisa memengaruhi elemen lain dengan nama class yang sama. Bawaan library UI: tema dari masing-masing library, yang kadang masuk ke wilayah satu sama lain. 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.\nYang 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.\nYang 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.\nCatatan Saya # Dua library bisa berdampingan. Yang penting, batas pemakaiannya jelas. Mulai dari aturan sederhana di level file. Kami tidak membutuhkan tooling khusus untuk menjaga agar keduanya tidak tercampur. Import locale di reducer menunjukkan batas lapisan yang kurang rapi. Untuk sekarang, cukup catat dulu karena kode itu masih berfungsi. 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.\nSekian. Salam.\nAngka file dan daftar komponen dihitung langsung dari repo saat episode ini ditulis; komponen minor tidak semuanya disebut.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nContoh kode dan nama file disederhanakan; strukturnya sama, isinya tidak penting untuk cerita.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","canonical":"https://najib.id/writing/2026/hijrah-frontend-04/","description":"Ep 4 seri Hijrah Frontend: primereact dan antd hidup berdampingan di satu aplikasi tanpa pernah bertemu di satu file. Tentang garis demarkasi, kamus UI di kantong reducer, dan tiga era styling.","language":"id","lastmod":"2026-10-29T09:31:17Z","publishedAt":"2026-09-23T09:00:04Z","readingTime":3,"section":"writing","series":"Hijrah Frontend","tags":["frontend","ui","konsistensi","cerita"],"title":"Hijrah Frontend (4): Dua Library UI, Dua Era Penamaan","type":"writing","url":"https://najib.id/writing/2026/hijrah-frontend-04/","wordCount":540}