The Invisible Frontend: Small Decisions That Save Your Product

Pekerjaan frontend terbaik tidak pernah muncul dalam sebuah demo.

Orang-orang tidak mengambil tangkapan layar darinya. Namun tanpa pekerjaan ini, pengguna akan meninggalkan produk Anda dan Anda tidak akan pernah tahu alasannya. Pekerjaan ini terjadi di celah-celah antara layar, tab, dan backend Anda.

Berikut adalah tiga contoh perbaikan kecil yang mencegah kerugian besar.

  1. Memperbaiki kesalahan login Frontend pernah memeriksa kolom status untuk melihat apakah login berhasil. Backend mengirimkan token yang valid tetapi juga mengirimkan status null. Aplikasi menolak pengguna meskipun mereka memiliki akses.

Perbaikannya sederhana. Sekarang frontend memeriksa token itu sendiri untuk mengonfirmasi keberhasilan. Sebuah kolom yang ambigu dalam sebuah dokumen bisa menjadi pintu terkunci bagi pengguna.

  1. Memperbaiki tautan verifikasi Ketika pengguna mengklik tautan di tab baru, tab asli tetap tidak terautentikasi. Tab tersebut tidak dapat meminta pembaruan ke server.

Saya menggunakan storage event pada browser. Ketika satu tab menulis ke localStorage, setiap tab lainnya akan langsung mengetahuinya. Ini berfungsi sebagai message bus gratis antar tab. Hal ini menghilangkan jalan buntu dalam proses onboarding Anda.

  1. Memperbaiki timer cooldown Timer "kirim ulang email dalam 30 detik" yang disimpan dalam app state akan ter-reset saat pengguna menyegarkan halaman. Pengguna kemudian akan menekan tombol tersebut berulang kali (spam), yang akhirnya meningkatkan biaya email Anda.

Perbaikannya adalah dengan menyimpan tenggat waktu (deadline) alih-alih hitung mundur (countdown).

  • Simpan timestamp tepat saat cooldown berakhir.
  • Hitung ulang sisa detik setelah setiap penyegaran halaman. Ini mencegah penyalahgunaan dan melindungi anggaran Anda.

Mengapa ini penting bagi para founder:

• Perbaikan login melindungi aktivasi pengguna. • Sinyal antar-tab melindungi tingkat konversi. • Cooldown melindungi margin Anda dan mencegah penyalahgunaan.

Engineering yang hebat bukan sekadar membuat antarmuka terlihat bagus. Ini adalah tentang terobsesi pada celah-celah yang ada. Perbaikan-perbaikan ini masing-masing membutuhkan kurang dari lima puluh baris kode. Nilainya datang dari kemampuan menyadari masalah dan memperbaikinya di tempat yang tepat.

Sumber: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl