Il frontend invisibile: piccole decisioni che salvano un prodotto
Il miglior lavoro frontend non compare mai in una demo.
Il lavoro che apprezzo di più è invisibile. Nessuno ne scatta screenshot. Ma senza questo lavoro, gli utenti se ne vanno. E potresti non sapere mai perché lo hanno fatto.
Questo lavoro avviene negli interstizi. Avviene tra le schermate e tra il tuo backend e un essere umano reale.
Ecco tre esempi di piccoli interventi che prevengono grandi problemi.
- Risolvere gli errori di login
Il problema: Il frontend controllava un campo di stato per verificare se il login fosse andato a buon fine. Ma il backend inviava un token valido insieme a uno stato null. L'utente vedeva un errore nonostante l'accesso fosse avvenuto correttamente.
La soluzione: Ora il frontend controlla la presenza di un token invece di una stringa di stato.
La lezione: Un campo ambiguo in una specifica tecnica diventa una porta chiusa a chiave per l'utente.
- Gestire i link di verifica
Il problema: Un utente apre un link di verifica in una nuova scheda. La scheda originale rimane bloccata. Il polling del server fallisce perché la prima scheda non ha un token di login.
La soluzione: Usa l'evento storage del browser. Quando una scheda aggiorna il local storage, tutte le altre schede ricevono il messaggio istantaneamente. È un modo gratuito e immediato per sincronizzare le schede.
- Cooldown del pulsante "Invia di nuovo"
Il problema: Un timer "Reinvia email tra 30 secondi" era memorizzato nello stato del componente. Se un utente aggiornava la pagina, il timer tornava a zero. Gli utenti cliccavano ripetutamente sul pulsante, aumentando i costi delle email.
La soluzione: Non memorizzare il conto alla rovescia. Memorizza il timestamp della scadenza.
Salvando l'orario esatto in cui termina il cooldown, il timer sopravvive al refresh della pagina. È impossibile resettarlo ricaricando.
Perché i fondatori devono interessarsene:
• La correzione del login protegge l'attivazione dell'utente. • La sincronizzazione delle schede protegge il tasso di conversione. • Il cooldown protegge il budget dagli abusi.
Un'ottima ingegneria non consiste solo nel rendere bella l'interfaccia. Consiste nell'ossessionarsi per gli interstizi. Questi interventi hanno richiesto meno di cinquanta righe di codice. Il valore deriva dal notare il problema e risolverlo nel posto giusto.
Fonte: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl