Hijrah Frontend (1): Ketika Backend Engineer Disuruh Menyentuh Frontend

Seri Hijrah Backend sudah tamat. Backend GPS sudah berdiri di Go, 14 modul domain tertata, endpoint yang tadinya makan 15 detik sudah sembuh.

Nah, sekarang giliran gedung sebelah.

Saya seorang backend engineer. Dunia saya: query, index, parser paket biner, dan kesejahteraan database. Frontend adalah negeri yang saya kunjungi seperlunya, dengan visa turis. Dan episode ini cerita tentang saat visa turis itu dicabut, diganti KTP penduduk hehe~

Kesan Pertama: Hidung Backend Tidak Menyatu #

Saat mulai menyentuh frontend warisan, satu hal langsung terasa: bahkan saya yang tidak jago frontend bisa mencium bau spaghetti-nya, cukup dengan mental model seorang programmer dan pengalaman bertahun-tahun membaca kode. Anda tidak perlu jago masak untuk tahu sup itu sudah tujuh hari; cukup cium baunya.

Dan bau itu bukan tuduhan. Frontend itu apa adanya: dibangun bertahun-tahun, disentuh banyak orang dengan selera berbeda, bertahan hidup melayani puluhan ribu user setiap hari. Sama persis dengan backend yang pernah saya hijrahkan. Kok bisa gedung yang berbeda punya bau yang sama persis? Karena penjaganya sama: waktu dan darurat hehe~

Keputusan: Fork, Bukan Rewrite #

Setelah pengalaman menghijrahkan backend, satu hal saya percaya: rewrite total itu menarik di slide dan menakutkan di produksi.

Jadi untuk frontend, keputusannya sejenis: fork sistem lama, port tipis. Bukan menggambar ulang dari nol dengan framework termutakhir, tapi membawa aplikasi lama masuk ke rumah baru, apa adanya dulu. Repo-nya bahkan memakai nama yang sama persis; seolah dia sendiri belum diinformasikan bahwa ia sudah pindah haluan hahaha.

Dan di hari pertama membuka rumah baru itu, saya mulai menghitung isi lemari:

• 76 halaman di app router¹: 60 berformat JSX, 15 berformat JS, dan satu file backup yang tidur di antara mereka²
• Dua library UI besar yang hidup berdampingan di satu aplikasi yang sama
• State management warisan yang sudah bertahun-tahun menjadi tukang kebun sekaligus tukang listrik
• Satu dokumen bernama TAILWIND_FIX.md di akar repo: monumen kecil untuk penyakit yang pernah sehat hehe~

Enam puluh di antaranya berformat JSX. Bukan keluhan; cuma pengingat bahwa negeri ini berbahasa lain. Saya yang biasa berteriak if err != nil kini harus belajar menenun className hahaha.

Kenapa Port Tipis, Bukan Redesign #

Pertanyaan yang sama dengan di backend: kenapa tidak sekalian merombak total, sekalian rapi, sekalian modern?

Jawabannya juga sama: user tidak peduli arsitektur internal Anda; mereka peduli tombol yang mereka tekan setiap hari tetap berperilaku sama. Merombak tampilan sambil memindahkan rumah itu dua perubahan sekaligus, dan episode empat di seri backend sudah menjelaskan harga dari memperbaiki sambil berpindah: perbaikan diam-diam adalah racun.

Jadi paritas versi frontend: tampilan dan perilaku dibawa dulu apa adanya, struktur internal dirapikan belakangan, satu keputusan satu waktu. Kode warisan yang ikut naik kereta dicatat, bukan disembunyikan. Episode kedua akan membahas persis apa saja yang ikut naik kereta itu, dan kenapa sebagian tetap harus ikut walau bau hehe~

Peta Perjalanan #

Seri Hijrah Frontend ini berisi lima episode:

2. Port tipis dan warisan yang ikut naik: apa saja yang terbawa dari rumah lama, secara sadar.
3. Type chaos: angka, string kosong, dan halaman yang berbeda pendapat: bagaimana satu field yang sama dikirim dengan tipe berbeda-beda tergantung halamannya, dan bagaimana hal itu diterima di dunia yang strict.
4. Dua library UI, dua era penamaan: warisan yang hidup berdampingan, dan konvensi yang berganti setiap ganti tukang.
5. Dua sisi satu gedung: penutup, refleksi, dan apa yang berubah setelah gedung sebelah jadi rumah sendiri.

Kalau Anda datang dari seri backend: selamat datang kembali, gedungnya masih sama, cuma kita pindah lantai. Kalau Anda baru mampir: episode pembuka seri sebelah adalah tempat terbaik untuk mulai, atau langsung saja di sini; cerita ini berdiri sendiri hehe~

Penutup #

Visa turis sudah dicabut. Sejak hari ini, frontend warisan ini resmi jadi tanggung jawab saya juga: dengan segala spaghetti-nya, dua library UI-nya, dan tujuh puluh enam halamannya yang menunggu dihitung ulang.

Episode berikutnya: inventaris warisan yang ikut naik kereta. Sampai ketemu di sana.

Terima kasih sudah tersasar ke sini dan membaca hehe. Semoga harimu menyenangkan!

Sekian. Salam.