htmx 4.0 ra mắt: chuyển sang fetch(), morphing swap tích hợp và kế thừa thuộc tính tường minh

Thư viện JavaScript htmx vừa tung ra phiên bản 4.0, đánh dấu một trong những lần thay đổi nội tại lớn nhất kể từ khi dự án ra đời. Điểm nhấn đáng chú ý nhất là việc chuyển hoàn toàn từ XMLHttpRequest sang API fetch(), mở đường cho các tính năng streaming mạnh mẽ hơn.

Từ XMLHttpRequest sang fetch(): nền tảng mới cho streaming

Việc thay thế XMLHttpRequest bằng fetch() không chỉ là chuyện làm mới mã nguồn. Đây là bước đi cần thiết để htmx tận dụng các khả năng hiện đại của nền tảng web, đặc biệt là streaming response — cho phép máy chủ gửi dữ liệu về theo từng phần thay vì chờ toàn bộ phản hồi hoàn tất.

Với cách tiếp cận này, htmx có thể xử lý các luồng dữ liệu dài như kết quả tìm kiếm tăng dần, log thời gian thực hay nội dung được tạo bởi AI mà không cần đợi phản hồi đầy đủ. Đây là lợi thế rõ rệt trong bối cảnh các ứng dụng web ngày càng phụ thuộc vào dữ liệu động.

Morphing swap tích hợp: giữ trạng thái DOM

Một trong những bổ sung được cộng đồng chờ đợi nhất là morphing swap được tích hợp sẵn. Trước đây, để giữ trạng thái của DOM — ví dụ vị trí con trỏ trong ô nhập liệu, trạng thái focus hay nội dung đang gõ dở — lập trình viên thường phải dùng thêm các thư viện bên ngoài như morphdom.

Nay htmx 4.0 xử lý việc này ngay trong lõi, giúp việc cập nhật giao diện trở nên mượt mà hơn và giảm đáng kể phụ thuộc vào thư viện ngoài. Với các ứng dụng có nhiều form và thành phần tương tác, đây là cải tiến giúp tiết kiệm thời gian đáng kể.

hx-partial và kế thừa thuộc tính tường minh

Phiên bản mới giới thiệu thẻ hx-partial, cho phép cập nhật từng phần giao diện một cách rõ ràng và gọn gàng hơn. Thay vì phải thao tác phức tạp để khoanh vùng nội dung cần thay đổi, lập trình viên có thể khai báo trực tiếp phần cần cập nhật.

Cơ chế kế thừa thuộc tính cũng được làm lại theo hướng tường minh. Trước đây, việc thuộc tính htmx lan truyền xuống các phần tử con đôi khi gây nhầm lẫn và khó kiểm soát. Nay hành vi này rõ ràng hơn, giúp mã dễ đọc, dễ gỡ lỗi và hạn chế các lỗi ngầm khi dự án phình to.

Song song đó, tên sự kiện được chuẩn hóa, tạo sự nhất quán trong toàn bộ thư viện và giúp lập trình viên ghi nhớ, tra cứu dễ dàng hơn.

Vì sao điều này quan trọng với lập trình viên Việt Nam?

htmx theo đuổi triết lý tối giản JavaScript: thay vì viết hàng nghìn dòng mã phía client, bạn để máy chủ trả về HTML và htmx lo phần cập nhật giao diện. Cách làm này đặc biệt hấp dẫn với các nhóm phát triển nhỏ, startup hoặc những ai làm việc với các framework backend như Django, Rails, Laravel hay Spring Boot.

Với các đội ngũ ở Việt Nam thường phải cân đối giữa tốc độ phát triển và chi phí nhân sự, việc giảm bớt một tầng phức tạp ở frontend có thể là lợi thế lớn — đặc biệt khi không phải dự án nào cũng cần đến một SPA đầy đủ.

Dù các framework như React, Vue hay Svelte vẫn thống trị ở nhiều phân khúc, htmx tiếp tục chứng minh rằng vẫn còn chỗ đứng cho một cách tiếp cận đơn giản, nhẹ và gần với nền tảng web hơn. Việc bổ sung fetch(), morphing swap và kế thừa tường minh cho thấy dự án vẫn đang tiến hóa tích cực, chứ không chỉ dừng lại ở mức "đủ dùng".