Frontend yang Tidak Kelihatan: Keputusan Kecil yang Menyelamatkan Produk Anda

Kerja frontend yang terbaik tidak pernah muncul dalam demo.

Orang ramai tidak mengambil tangkapan skrin untuknya. Namun tanpa kerja ini, pengguna akan meninggalkan produk anda dan anda tidak akan tahu mengapa. Kerja ini berlaku dalam jurang antara skrin, tab, dan backend anda.

Berikut adalah tiga contoh pembaikan kecil yang mencegah kerugian besar.

  1. Baiki ralat log masuk Frontend pernah menyemak medan status untuk melihat sama ada log masuk berjaya. Backend menghantar token yang sah tetapi juga menghantar status null. Aplikasi menolak pengguna tersebut walaupun mereka mempunyai akses.

Pembaikannya mudah. Frontend kini menyemak token itu sendiri untuk mengesahkan kejayaan. Medan yang tidak jelas dalam satu dokumen boleh menjadi pintu yang terkunci bagi pengguna.

  1. Baiki pautan pengesahan Apabila pengguna mengklik pautan dalam tab baharu, tab asal kekal tidak disahkan. Ia tidak dapat meminta kemas kini daripada pelayan.

Saya menggunakan browser storage event. Apabila satu tab menulis ke localStorage, setiap tab lain akan mengetahuinya serta-merta. Ia bertindak sebagai 'message bus' percuma antara tab. Ini menghapuskan jalan buntu dalam proses 'onboarding' anda.

  1. Baiki pemasa 'cooldown' Pemasa "hantar semula e-mel dalam 30 saat" yang disimpan dalam 'app state' akan ditetapkan semula apabila pengguna menyegarkan halaman. Pengguna kemudian akan menekan butang tersebut berulang kali, yang meningkatkan kos e-mel anda.

Pembaikannya adalah dengan menyimpan tarikh akhir (deadline) dan bukannya pengiraan detik (countdown).

  • Simpan cap masa (timestamp) yang tepat apabila 'cooldown' berakhir.
  • Kira semula baki saat selepas setiap penyegaran halaman. Ini menghalang penyalahgunaan dan melindungi bajet anda.

Mengapa ini penting kepada pengasas:

• Pembaikan log masuk melindungi pengaktifan pengguna. • Isyarat rentas-tab melindungi kadar penukaran (conversion rates). • 'Cooldown' melindungi margin anda dan menghalang penyalahgunaan.

Kejuruteraan yang hebat bukan sekadar menjadikan antara muka kelihatan cantik. Ia adalah tentang memberi perhatian mendalam terhadap jurang yang ada. Pembaikan ini masing-masing mengambil kurang daripada lima puluh baris kod. Nilainya datang daripada keupayaan menyedari masalah dan membaikinya di tempat yang betul.

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