The Invisible Frontend: Những Quyết Định Nhỏ Giúp Cứu Nguy Sản Phẩm Của Bạn
Những công việc frontend tốt nhất không bao giờ xuất hiện trong các buổi demo.
Mọi người không chụp ảnh màn hình những thứ đó. Nhưng nếu không có những công việc này, người dùng sẽ rời bỏ sản phẩm của bạn mà bạn chẳng bao giờ biết lý do tại sao. Những công việc này diễn ra trong các khoảng trống giữa các màn hình, các tab và backend của bạn.
Dưới đây là ba ví dụ về những chỉnh sửa nhỏ giúp ngăn chặn những tổn thất lớn.
- Sửa lỗi đăng nhập Trước đây, frontend kiểm tra một trường trạng thái (status field) để xem việc đăng nhập có thành công hay không. Backend gửi một token hợp lệ nhưng cũng gửi kèm một trạng thái null. Ứng dụng đã từ chối người dùng mặc dù họ có quyền truy cập.
Cách khắc phục rất đơn giản. Giờ đây, frontend sẽ kiểm tra chính token đó để xác nhận thành công. Một trường dữ liệu mơ hồ trong một tài liệu có thể trở thành một cánh cửa đóng chặt đối với người dùng.
- Sửa lỗi liên kết xác thực Khi người dùng nhấp vào một liên kết trong một tab mới, tab ban đầu vẫn ở trạng thái chưa được xác thực. Nó không thể yêu cầu máy chủ cập nhật thông tin.
Tôi đã sử dụng browser storage event. Khi một tab ghi dữ liệu vào localStorage, mọi tab khác sẽ biết ngay lập tức. Nó đóng vai trò như một message bus miễn phí giữa các tab. Điều này giúp loại bỏ một "ngõ cụt" trong quá trình onboarding của bạn.
- Sửa lỗi bộ đếm thời gian chờ (cooldown timer) Một bộ đếm "gửi lại email sau 30 giây" được lưu trong trạng thái ứng dụng (app state) sẽ bị reset khi người dùng tải lại trang. Sau đó, người dùng sẽ nhấn nút liên tục, làm tăng chi phí gửi email của bạn.
Cách khắc phục là lưu trữ thời hạn (deadline) thay vì thời gian đếm ngược.
- Lưu chính xác timestamp khi thời gian chờ kết thúc.
- Tính toán lại số giây còn lại sau mỗi lần tải lại trang. Điều này giúp ngăn chặn việc lạm dụng và bảo vệ ngân sách của bạn.
Tại sao điều này quan trọng đối với các nhà sáng lập:
• Việc sửa lỗi đăng nhập giúp bảo vệ tỷ lệ kích hoạt người dùng (user activation). • Tín hiệu giữa các tab giúp bảo vệ tỷ lệ chuyển đổi (conversion rates). • Bộ đếm cooldown giúp bảo vệ biên lợi nhuận và ngăn chặn sự lạm dụng.
Kỹ thuật giỏi không chỉ là làm cho giao diện trông đẹp mắt. Đó là sự ám ảnh với những khoảng trống. Những bản sửa lỗi này mỗi cái tốn chưa đến năm mươi dòng code. Giá trị đến từ việc nhận ra vấn đề và sửa nó đúng chỗ.
Source: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl