Performative-UI: Thư viện React giả lập Loading cực kỳ lầy lội

Các ông đã bao giờ bị sếp hay PM (Product Manager) dí bắt code một cái loading spinner chạy giả trân chỉ để người dùng tưởng hệ thống đang "bận xử lý thuật toán AI phức tạp" chưa? Đúng là đỉnh cao của sự giả tạo! Nhưng đời là thế, đôi khi chạy quá nhanh người ta lại tưởng app lỏ. Hôm nay tôi vừa lụm được một thư viện React siêu ma giáo trên Hacker News chuyên trị cái trò "kịch nghệ UI" này, tên nó là Performative-UI.

Sự ra đời của Performative-UI: Khi kịch sĩ đi làm Front-end

Chuyện là một pháp sư có tên vorpus vừa cho ra mắt một thư viện React mang tên Performative-UI. Thay vì tối ưu hóa hiệu năng (performance) giúp app chạy mượt hơn, thư viện này lại tập trung vào tính chất... diễn kịch (performative). Dự án này nhanh chóng leo top với hơn 700 điểm trên Hacker News vì nó gãi đúng chỗ ngứa của hàng vạn dev đang phải cam chịu tạo ra những trải nghiệm người dùng giả tạo mỗi ngày.

Thư viện này cung cấp một loạt các component bá đạo chắc chắn là dị giáo đối với giới clean code nhưng lại cực kỳ thực dụng để "lùa gà":

<SuspenseForDramaticEffect>: Thay vì tải dữ liệu ngay lập tức, component này sẽ cố tình delay một khoảng thời gian ngẫu nhiên để người dùng cảm thấy hệ thống đang "vắt óc" suy nghĩ.
<SlowType>: Giả lập hiệu ứng gõ chữ chậm rãi của các công cụ AI. Dù API đã trả về kết quả từ đời tám hoánh nào rồi, app vẫn phải giả vờ gõ từng chữ một cho nó có vẻ "nguy hiểm".
<FakeProgress>: Cây tiến trình chạy vèo vèo lên 99% rồi đứng khựng lại đầy hồi hộp trước khi hoàn thành, tạo cảm giác app đang làm việc nặng nhọc lắm.

Giang cư mận nói gì về quả thư viện ảo ma này?

Dân tình trên Hacker News lập tức chia phe combat và bàn tán xôn xao về thư viện này:

Phe đồng cảm sâu sắc: Nhiều lão quái thừa nhận họ từng phải tự viết tay những đoạn code "fake loading" này. Một dev chia sẻ: "Tôi từng tối ưu một API từ 5 giây xuống 50 mili-giây, khách hàng chê luôn là app bị bể, không chịu quét dữ liệu kỹ. Tôi đành phải thêm cái setTimeout 3 giây vào, thế là họ khen nức nở!"
Phe lo sợ tột cùng: Mấy anh em Senior thì khóc thét vì sợ các em Intern hoặc Junior tưởng đây là best practice rồi lôi về cài vào dự án enterprise thì toang. Lúc đó lại tha hồ đi dọn bug và hotfix mệt nghỉ.
Phe hiến kế tính năng mới: Nhiều đạo hữu còn đòi tác giả cập nhật thêm các component như <SpinningWheelOfImminentTimeout> (vòng quay vô tận để ép user mua gói Premium) hoặc <FakeSecurityScan> (chạy quét quét đỏ lòm rồi chuyển sang xanh lá cho uy tín).

Góc nhìn thực dụng từ Coding4Food

Tóm cái váy lại, nghệ thuật đôi khi là ánh trăng lừa dối, và UI/UX cũng vậy. Tư duy thực dụng của một dev già đời như tôi thấy rằng: trải nghiệm của người dùng đôi khi không nằm ở tốc độ mili-giây thực tế, mà nằm ở mặt cảm xúc. Người dùng thích cảm giác chờ đợi một thứ gì đó "đáng giá", đặc biệt là trong thời đại bùng nổ của AI hiện nay.

Nếu các ông muốn dựng thử một trang demo với mớ component ma giáo này để đi khè khách hàng, hãy ném nó lên một con vps giá rẻ để test. Vừa tiện, vừa nhanh, lại đỡ mất công setup local lằng nhằng.

Nguồn: Hacker News

Sự ra đời của Performative-UI: Khi kịch sĩ đi làm Front-end

Thư viện này cung cấp một loạt các component bá đạo chắc chắn là dị giáo đối với giới clean code nhưng lại cực kỳ thực dụng để "lùa gà":

<SuspenseForDramaticEffect>: Thay vì tải dữ liệu ngay lập tức, component này sẽ cố tình delay một khoảng thời gian ngẫu nhiên để người dùng cảm thấy hệ thống đang "vắt óc" suy nghĩ.

<SlowType>: Giả lập hiệu ứng gõ chữ chậm rãi của các công cụ AI. Dù API đã trả về kết quả từ đời tám hoánh nào rồi, app vẫn phải giả vờ gõ từng chữ một cho nó có vẻ "nguy hiểm".

<FakeProgress>: Cây tiến trình chạy vèo vèo lên 99% rồi đứng khựng lại đầy hồi hộp trước khi hoàn thành, tạo cảm giác app đang làm việc nặng nhọc lắm.

Giang cư mận nói gì về quả thư viện ảo ma này?

Dân tình trên Hacker News lập tức chia phe combat và bàn tán xôn xao về thư viện này:

Phe đồng cảm sâu sắc: Nhiều lão quái thừa nhận họ từng phải tự viết tay những đoạn code "fake loading" này. Một dev chia sẻ: "Tôi từng tối ưu một API từ 5 giây xuống 50 mili-giây, khách hàng chê luôn là app bị bể, không chịu quét dữ liệu kỹ. Tôi đành phải thêm cái setTimeout 3 giây vào, thế là họ khen nức nở!"

Phe lo sợ tột cùng: Mấy anh em Senior thì khóc thét vì sợ các em Intern hoặc Junior tưởng đây là best practice rồi lôi về cài vào dự án enterprise thì toang. Lúc đó lại tha hồ đi dọn bug và hotfix mệt nghỉ.

Phe hiến kế tính năng mới: Nhiều đạo hữu còn đòi tác giả cập nhật thêm các component như <SpinningWheelOfImminentTimeout> (vòng quay vô tận để ép user mua gói Premium) hoặc <FakeSecurityScan> (chạy quét quét đỏ lòm rồi chuyển sang xanh lá cho uy tín).

Góc nhìn thực dụng từ Coding4Food