Htmx 4.0.0 chính thức ra mắt: Chuyển sang fetch(), kế thừa thuộc tính tường minh và nhiều cải tiến lớn

Đội ngũ phát triển htmx vừa chính thức công bố phát hành phiên bản 4.0.0 sau 8 tháng làm việc miệt mài. Đây được xem là một cột mốc quan trọng, đánh dấu sự chuyển mình lớn về kiến trúc bên trong khi thư viện chuyển từ XMLHttpRequest sang fetch(), cùng với đó là hàng loạt cải tiến về trải nghiệm phát triển và hiệu suất.

Ảnh minh họa htmx 4.0.0

Những thay đổi chính trong htmx 4.0

Theo thông báo từ đội ngũ phát triển, từ góc nhìn người dùng, htmx 4 gần như giống hệt htmx 2. Tuy nhiên có ba thay đổi lớn mà người dùng cần lưu ý:

• Kế thừa thuộc tính tường minh: Thay vì tự động kế thừa như phiên bản 2, giờ đây các thuộc tính chỉ được kế thừa khi bạn thêm hậu tố :inherited — ví dụ hx-target:inherited
• Chuẩn hóa tên sự kiện: Tất cả sự kiện giờ tuân theo cú pháp htmx:phase:action[:sub-action], ví dụ htmx:beforeRequest đổi thành htmx:before:request
• Lịch sử trình duyệt không dùng localStorage: Thay vào đó, htmx sẽ tải lại trang khi điều hướng back, giúp tránh các lỗi liên quan đến DOM bị thay đổi bởi thư viện JavaScript bên thứ ba

Lý do chuyển sang fetch()

Điểm mấu chốt trong quá trình phát triển htmx 4 đến từ ý tưởng của Christian Tanul về streaming HTML. Việc chuyển sang fetch() cho phép htmx xử lý streaming tốt hơn nhiều so với XMLHttpRequest vốn được dùng từ lâu vì lý do tương thích ngược.

"Chúng tôi bắt đầu port từ fixi và bộ test của htmx, rồi dần dần khám phá lại lý do vì sao htmx làm nhiều việc như vậy, và đưa triển khai mới ngày càng gần với phiên bản cũ."

Tính năng mới nổi bật

Morph Swaps

Đây là tính năng được cộng đồng mong chờ từ lâu. htmx 4 hỗ trợ morphing swaps ngay từ đầu, dựa trên thuật toán idiomorph được cải tiến đáng kể bởi Michael West. Tính năng này giúp chỉ cập nhật phần DOM thay đổi thay vì thay thế toàn bộ, mang lại trải nghiệm mượt mà hơn.

Thẻ hx-live cho front-end scripting

htmx giờ đây tự phát triển giải pháp scripting front-end nhỏ gọn của riêng mình, lấy cảm hứng từ Alpine.js, jQuery và hyperscript. Điều đặc biệt là nó hỗ trợ reactivity dựa trên DOM theo phong cách HATEOAS.

Hệ sinh thái extensions phong phú

Việc chuyển sang fetch() mở ra cơ hội thiết kế lại extensions. Một số extensions mới đáng chú ý:

• hx-preload: Tải trước nội dung khi di chuột để tăng tốc độ
• hx-download: Tải file dựa trên fetch
• hx-alpine-compat: Xử lý tương thích với Alpine.js
• hx-history-cache: Lưu cache lịch sử trong sessionStorage
• hx-sse, hx-ws, hx-multipart: Các giải pháp streaming HTML mới

Ngoài ra, gói htmax.js được cung cấp để gộp htmx với các extensions phổ biến nhất trong một file duy nhất.

Công cụ nâng cấp tự động

Để giảm tải việc nâng cấp, đội ngũ phát triển cung cấp công cụ dòng lệnh giúp tìm các vị trí cần thêm :inherited, đổi tên sự kiện cũ, hay các thuộc tính đã bị xóa:

$ npx [email protected] upgrade-check -- ./templates

Công cụ này hỗ trợ quét các file .html, .php, .js, .ts, .jinja, .erb, .hbs và có thể mở rộng với tùy chọn --ext.

Lộ trình và hỗ trợ

Điểm đáng chú ý là htmx 4.0 không được đánh dấu là latest trên NPM để tránh ép người dùng đang dùng CDN không có version phải nâng cấp. Thay vào đó, bản 2.x vẫn giữ vị trí latest cho đến đầu năm 2027. Đội ngũ cam kết htmx 2 sẽ tiếp tục được hỗ trợ vô thời hạn, giúp người dùng không cảm thấy áp lực nâng cấp.

Với những cải tiến về hiệu suất, streaming HTML và trải nghiệm phát triển, htmx 4.0 hứa hẹn sẽ tiếp tục khẳng định vị thế là thư viện JavaScript nhẹ nhàng nhưng mạnh mẽ cho các ứng dụng web hiện đại, đặc biệt phù hợp với các dự án ưu tiên tính đơn giản và bền vững lâu dài.