Le frontend invisible : ces petites décisions qui sauvent un produit

Le meilleur travail frontend ne se voit jamais lors d'une démo.

Le travail que je valorise le plus est invisible. Personne n'en fait de captures d'écran. Mais sans ce travail, les utilisateurs partent. Et vous ne saurez peut-être jamais pourquoi.

Ce travail se niche dans les interstices. Il se produit entre les écrans et entre votre backend et un être humain.

Voici trois exemples de petites corrections qui évitent de gros problèmes.

  1. Corriger les erreurs de connexion

Le problème : le frontend vérifiait un champ de statut pour savoir si la connexion avait réussi. Mais le backend envoyait un jeton (token) valide accompagné d'un statut nul. L'utilisateur voyait une erreur alors qu'il s'était connecté correctement.

La solution : le frontend vérifie désormais la présence d'un jeton plutôt qu'une chaîne de statut.

La leçon : un champ ambigu dans une spécification technique devient une porte close pour l'utilisateur.

  1. Gérer les liens de vérification

Le problème : un utilisateur ouvre un lien de vérification dans un nouvel onglet. L'onglet d'origine reste bloqué. Le polling du serveur échoue car le premier onglet ne possède pas de jeton de connexion.

La solution : utiliser l'événement storage du navigateur. Lorsqu'un onglet met à jour le localStorage, tous les autres onglets reçoivent le message instantanément. C'est un moyen gratuit et immédiat de synchroniser les onglets.

  1. Les délais d'attente du bouton de renvoi

Le problème : un minuteur « Renvoyer l'e-mail dans 30 secondes » était stocké dans l'état du composant. Si l'utilisateur rafraîchissait la page, le minuteur revenait à zéro. Les utilisateurs spammettaient le bouton, ce qui augmentait vos coûts d'envoi d'e-mails.

La solution : ne stockez pas le compte à rebours. Stockez l'horodatage (timestamp) de l'échéance.

En enregistrant l'heure exacte de la fin du délai, le minuteur survit au rafraîchissement de la page. Il est impossible de le réinitialiser en rechargeant la page.

Pourquoi les fondateurs doivent s'en soucier :

• La correction de la connexion protège l'activation des utilisateurs. • La synchronisation des onglets protège votre taux de conversion. • Le délai d'attente protège votre budget contre les abus.

L'excellence en ingénierie ne consiste pas seulement à rendre l'écran esthétique. Il s'agit d'être obsédé par les interstices. Ces corrections ont nécessité moins de cinquante lignes de code. La valeur provient de la capacité à identifier le problème et à le résoudre au bon endroit.

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