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



Seri Hijrah Backend akhirnya kelar. Backend GPS sekarang jalan di Go, 14 modul domain sudah tertata, dan endpoint yang dulu butuh 15 detik sekarang jauh lebih ngebut. Alhamdulillah.

Nah, sekarang giliran gedung sebelah: frontend.

Saya seorang backend engineer. Sehari-hari saya berurusan dengan query, index, parser paket biner, dan kesejahteraan database. Frontend biasanya hanya saya kunjungi seperlunya, seperti turis. Sampai akhirnya saya diminta ikut mengurusnya. Bukan sekadar mampir lagi, hehe~

Kesan Pertama: Bau Spaghetti #

Saat membuka frontend warisan itu, saya langsung melihat spaghetti di mana-mana. Saya memang tidak jago frontend, tapi sudah cukup lama baca kode orang untuk tahu mana yang spaghetti. Tidak perlu jadi koki untuk tahu kalau sup sudah kelamaan nangkring di meja, kan? Kelihatan saja sudah cukup.

Eh, saya tidak bermaksud menuduh siapa pun ya. Aplikasi itu dibangun bertahun-tahun, dikerjakan banyak orang dengan selera berbeda, dan tetap melayani puluhan ribu user setiap hari. Backend yang dulu saya hijrahkan ceritanya mirip. Gedungnya beda, penyebabnya sama: waktu dan keadaan darurat.

Keputusan: Fork, Bukan Rewrite #

Pengalaman menghijrahkan backend membuat saya makin yakin bahwa rewrite total itu kelihatan keren di slide, tapi bikin deg-degan begitu masuk produksi.

Untuk frontend, kami ambil jalan yang mirip: fork sistem lama, lalu port tipis. Aplikasinya dibawa ke rumah baru apa adanya, tidak digambar ulang dari nol pakai framework terbaru. Bahkan nama repo-nya tidak berubah, mungkin karena belum sempat diberi tahu bahwa ia sudah pindah rumah.

Hari pertama di rumah baru saya habiskan untuk menghitung isi lemari:

Enam puluh halaman pakai JSX. Ini bukan keluhan, cuma pengingat bahwa saya sedang belajar bahasa lain. Biasanya saya teriak if err != nil, sekarang harus belajar merangkai className (ya… pelan-pelan).

Kenapa Port Tipis, Bukan Redesign #

Pertanyaannya sama seperti di backend: kenapa tidak sekalian dirombak biar rapi dan kekinian?

Jawabannya sederhana, user maunya tombol yang mereka pakai tiap hari tetap jalan. Merombak tampilan sambil pindahan berarti mengubah dua hal sekaligus. Di episode empat di seri backend, saya sudah belajar betapa mahalnya perbaikan diam-diam saat migrasi.

Jadi untuk frontend, tampilan dan perilakunya kami pertahankan dulu. Struktur internal dirapikan nanti saja, satu keputusan setiap kali. Kode warisan yang ikut pindah kami catat, tidak kami sembunyikan. Di episode kedua saya cerita apa saja yang terbawa dan kenapa sebagian belum bisa ditinggal.

Rencana Episode #

Seri Hijrah Frontend ini rencananya lima episode (yang pertama sedang Anda baca):

  1. Port tipis dan warisan yang ikut naik: apa saja yang terbawa dari rumah lama, secara sadar.
  2. Type chaos: angka, string kosong, dan halaman yang berbeda pendapat: satu field yang sama dikirim dengan tipe berbeda-beda tergantung halamannya, lalu bagaimana itu diterima di dunia yang strict.
  3. Dua library UI, dua era penamaan: warisan yang hidup berdampingan, dan konvensi yang berganti setiap ganti tukang.
  4. 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 pindah lantai. Kalau baru mampir, boleh mulai dari episode pembuka seri sebelah, atau langsung di sini saja. Cerita ini tetap bisa dinikmati sendiri kok, hehe~

Tetangga Baru Gedung Sebelah #

Saya datang sebagai turis, tapi sekarang frontend warisan ini ikut jadi tanggung jawab saya. Isinya sudah kelihatan: spaghetti, dua library UI, dan 76 halaman yang harus tetap jalan setelah pindah.

Selanjutnya saya mulai mencatat barang-barang yang ikut naik kereta. Ternyata daftarnya lebih panjang dari dugaan saya.


  1. Angka halaman dan rincian format dihitung langsung dari repo saat episode ini ditulis; detail stack lain disederhanakan untuk bercerita. ↩︎

  2. Satu file itu bukan salah siapa-siapa; dia jenazah backup yang setia menemani, sama seperti puluhan jenazah berkomentar yang pernah saya temui di backend. ↩︎