De onzichtbare frontend: kleine beslissingen die je product redden
Het beste frontend-werk valt nooit op in een demo.
Mensen maken er geen screenshots van. Maar zonder dit werk verlaten gebruikers je product en weet je nooit waarom. Dit werk vindt plaats in de gaten tussen schermen, tabbladen en je backend.
Hier zijn drie voorbeelden van kleine fixes die grote verliezen voorkomen.
- Los de inlogfout op
De frontend controleerde voorheen een statusveld om te zien of een inlogpoging was geslaagd. De backend stuurde een geldig token, maar ook een
nullstatus. De app weigerde de gebruiker, ook al had deze wel toegang.
De oplossing was simpel. De frontend controleert nu het token zelf om succes te bevestigen. Een ambigu veld in een document wordt zo een gesloten deur voor een gebruiker.
- Los de verificatielink op Wanneer een gebruiker op een link in een nieuw tabblad klikt, blijft het oorspronkelijke tabblad ongeauthenticeerd. Het kan de server niet om updates vragen.
Ik gebruikte het storage-event van de browser. Wanneer één tabblad naar localStorage schrijft, weet elk ander tabblad dit onmiddellijk. Het fungeert als een gratis message bus tussen tabbladen. Dit voorkomt een doodlopende weg in je onboarding.
- Los de cooldown-timer op Een "stuur e-mail opnieuw over 30 seconden" timer die in de app-state wordt opgeslagen, wordt gereset wanneer een gebruiker de pagina ververst. Gebruikers spammen vervolgens de knop, wat je e-mailkosten verhoogt.
De oplossing was om de deadline op te slaan in plaats van de countdown.
- Sla de exacte timestamp op waarop de cooldown eindigt.
- Bereken de resterende seconden opnieuw na elke refresh. Dit voorkomt misbruik en beschermt je budget.
Waarom dit belangrijk is voor founders:
• De inlogfix beschermt de gebruikersactivatie. • Het signaal tussen tabbladen beschermt de conversieratio's. • De cooldown beschermt je marges en voorkomt misbruik.
Goed engineering is niet alleen zorgen dat de interface er goed uitziet. Het is het obsessief aandacht besteden aan de gaten. Deze fixes kostten elk 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