Невидимий фронтенд: маленькі рішення, що рятують продукт

Найкраща фронтенд-робота ніколи не потрапляє на демо.

Робота, яку я ціную найбільше, — невидима. Ніхто не робить її скриншотів. Але без цієї роботи користувачі йдуть. Ви можете навіть не дізнатися, чому саме вони пішли.

Ця робота відбувається в проміжках. Вона стається між екранами та між вашим бекендом і реальною людиною.

Ось три приклади маленьких виправлень, які запобігають великим проблемам.

  1. Виправлення помилок входу

Проблема: фронтенд перевіряв поле статусу, щоб переконатися, що вхід пройшов успішно. Але бекенд надіслав дійсний токен разом із null статусом. Користувач бачив помилку, хоча увійшов у систему правильно.

Виправлення: тепер фронтенд перевіряє наявність токена замість рядка статусу.

Урок: неоднозначне поле в технічній специфікації стає зачиненими дверима для користувача.

  1. Обробка посилань для верифікації

Проблема: користувач відкриває посилання для верифікації в новій вкладці. Початкова вкладка залишається завислою. Опитування (polling) сервера не спрацьовує, оскільки перша вкладка не має токена входу.

Виправлення: використовуйте подію storage браузера. Коли одна вкладка оновлює local storage, всі інші вкладки миттєво отримують це повідомлення. Це безкоштовний і швидкий спосіб синхронізації вкладок.

  1. Таймери очікування для кнопки повторного надсилання

Проблема: таймер «Повторно надіслати email через 30 секунд» зберігався у стані компонента. Якщо користувач оновлював сторінку, таймер скидався до нуля. Користувачі спамили кнопку, що збільшувало ваші витрати на розсилку.

Виправлення: не зберігайте зворотний відлік. Зберігайте мітку часу (timestamp) дедлайну.

Зберігаючи точний час закінчення очікування, таймер зберігається навіть після оновлення сторінки. Його неможливо скинути перезавантаженням.

Чому це важливо для засновників:

• Виправлення входу захищає активацію користувачів. • Синхронізація вкладок захищає ваш рівень конверсії. • Таймер очікування захищає ваш бюджет від зловживань.

Чудова інженерія — це не лише створення гарного вигляду екрана. Це прискіплива увага до проміжків. Ці виправлення зайняли менше п'ятдесяти рядків коду. Цінність полягає в тому, щоб помітити проблему і виправити її у правильному місці.

Джерело: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl