De onzichtbare frontend: Kleine beslissingen die een product redden
Het beste frontend-werk komt nooit naar voren in een demo.
Het werk dat ik het meest waardeer, is onzichtbaar. Niemand maakt er screenshots van. Maar zonder dit werk haken gebruikers af. Je zult misschien nooit weten waarom ze weg zijn gegaan.
Dit werk vindt plaats in de tussenruimtes. Het gebeurt tussen schermen en tussen je backend en een echt mens.
Hier zijn drie voorbeelden van kleine fixes die grote problemen voorkomen.
- Loginfouten oplossen
Het probleem: De frontend controleerde een statusveld om te zien of een login was geslaagd. Maar de backend stuurde een geldig token mee met een null-status. De gebruiker zag een foutmelding, ook al was de login correct uitgevoerd.
De oplossing: De frontend controleert nu op de aanwezigheid van een token in plaats van een status-string.
De les: Een ambigu veld in een technische specificatie wordt een gesloten deur voor een gebruiker.
- Omgaan met verificatielinks
Het probleem: Een gebruiker opent een verificatielink in een nieuw tabblad. Het oorspronkelijke tabblad blijft hangen. Het pollen van de server mislukt omdat het eerste tabblad geen login-token heeft.
De oplossing: Gebruik het browser storage event. Wanneer één tabblad de local storage bijwerkt, ontvangt elk ander tabblad het bericht onmiddellijk. Het is een gratis, snelle manier om tabbladen te synchroniseren.
- Cooldowns voor de 'opnieuw verzenden'-knop
Het probleem: Een "E-mail over 30 seconden opnieuw verzenden"-timer werd opgeslagen in de component state. Als een gebruiker de pagina ververste, werd de timer gereset naar nul. Gebruikers spamden de knop, wat de e-mailkosten verhoogde.
De oplossing: Sla de countdown niet op. Sla de deadline timestamp op.
Door de exacte tijd waarop de cooldown afloopt op te slaan, blijft de timer behouden na een paginaverversing. Het is onmogelijk om deze te resetten door de pagina opnieuw te laden.
Waarom oprichters dit serieus moeten nemen:
• De login-fix beschermt de gebruikersactivatie. • De tabblad-synchronisatie beschermt je conversieratio. • De cooldown beschermt je budget tegen misbruik.
Goede engineering gaat niet alleen over het mooi maken van het scherm. Het gaat om het obsessief aandacht besteden aan de tussenruimtes. Deze fixes kostten minder dan vijftig regels code. De waarde komt voort uit het opmerken van het probleem en het oplossen ervan op de juiste plek.
Bron: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl