El frontend invisible: pequeñas decisiones que salvan un producto
El mejor trabajo de frontend nunca aparece en una demo.
El trabajo que más valoro es invisible. Nadie le toma capturas de pantalla. Pero sin este trabajo, los usuarios se van. Puede que nunca sepas por qué se fueron.
Este trabajo ocurre en los huecos. Ocurre entre pantallas y entre tu backend y un ser humano real.
Aquí hay tres ejemplos de pequeñas correcciones que evitan grandes problemas.
- Corregir errores de inicio de sesión
El problema: El frontend comprobaba un campo de estado para ver si el inicio de sesión funcionaba. Pero el backend enviaba un token válido junto con un estado nulo. El usuario veía un error a pesar de haber iniciado sesión correctamente.
La solución: Ahora el frontend comprueba la presencia de un token en lugar de una cadena de estado.
La lección: Un campo ambiguo en una especificación técnica se convierte en una puerta cerrada para el usuario.
- Gestión de enlaces de verificación
El problema: Un usuario abre un enlace de verificación en una pestaña nueva. La pestaña original se queda bloqueada. El polling al servidor falla porque la primera pestaña no tiene un token de inicio de sesión.
La solución: Utilizar el evento storage del navegador. Cuando una pestaña actualiza el localStorage, todas las demás pestañas reciben el mensaje al instante. Es una forma gratuita e instantánea de sincronizar pestañas.
- Tiempos de espera del botón de reenvío
El problema: Un temporizador de "Reenviar correo en 30 segundos" se guardaba en el estado del componente. Si un usuario refrescaba la página, el temporizador volvía a cero. Los usuarios pulsaban el botón repetidamente, lo que aumentaba tus costes de envío de correos.
La solución: No guardes la cuenta regresiva. Guarda la marca de tiempo (timestamp) de la fecha límite.
Al guardar la hora exacta en que termina el tiempo de espera, el temporizador sobrevive a la actualización de la página. Es imposible reiniciarlo recargando.
Por qué a los fundadores debe importarles:
• La corrección del inicio de sesión protege la activación de usuarios. • La sincronización de pestañas protege tu tasa de conversión. • El tiempo de espera protege tu presupuesto contra el abuso.
La gran ingeniería no consiste solo en hacer que la pantalla se vea bonita. Consiste en obsesionarse con los huecos. Estas correcciones requirieron menos de cincuenta líneas de código. El valor proviene de notar el problema y solucionarlo en el lugar adecuado.
Fuente: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl