htmx 4.0 ra mắt: fetch() thay XMLHttpRequest, morph swap vào lõi
htmx 4.0.0 chính thức ra mắt ngày 28/8, khép lại tám tháng phát triển. Bản cập nhật này thay engine từ XMLHttpRequest sang fetch(), đưa morph swap và thẻ <hx-partial> vào lõi — nhưng điểm đáng chú ý nhất lại nằm ở cách htmx chọn không ép ai phải nâng cấp.
Để hiểu vì sao 4.0 quan trọng, cần nhắc lại htmx là gì. Thay vì viết một single-page app bằng React hay Vue, developer gắn thuộc tính HTML (hx-get, hx-post, hx-swap...) để server trả về các đoạn HTML và htmx tự cập nhật trang. Không có build step, không quản lý state phía client, không SPA framework. Đây là lần nâng major đầu tiên của thư viện sau một thời gian dài ổn định ở nhánh 2.x.
Ba thay đổi lớn — và một engine mới bên dưới
Từ góc nhìn người dùng, 4.0 gần như giống hệt 2.x. Sự khác biệt nằm ở ba quyết định thiết kế, cộng một thay đổi nội bộ lớn.
Thay đổi lớn nhất là attribute inheritance giờ phải khai báo tường minh. Trước đây, thuộc tính đặt trên phần tử cha tự động áp dụng xuống con — tiện nhưng dễ gây nhầm lẫn, kiểu như CSS. Giờ muốn kế thừa phải thêm hậu tố :inherited:
<!-- htmx 2 -->
<div hx-confirm="Are you sure?">
<button hx-delete="/item/1">Delete</button>
</div>
<!-- htmx 4 -->
<div hx-confirm:inherited="Are you sure?">
<button hx-delete="/item/1">Delete</button>
</div>
Đây là gánh nặng nâng cấp lớn nhất, nhưng bù lại hành vi trở nên dễ đoán. Các thuộc tính kiểu hx-disinherit không còn cần thiết và nên gỡ bỏ.
Thay đổi thứ hai là tên sự kiện được chuẩn hóa. Hệ thống event cũ phát triển lộn xộn qua nhiều năm, khó biết event nào bắn ra khi nào. Giờ mọi event theo mẫu htmx:phase:action[:sub-action] — ví dụ htmx:before:request, htmx:after:swap. Các event xhr:* bị bỏ (vì chuyển sang fetch), validation:* cũng bỏ để nhường chỗ cho native form validation của trình duyệt.
Thay đổi thứ ba là history không dùng localStorage mặc định nữa. Nhánh 2.x lưu snapshot trang vào localStorage để khôi phục khi bấm nút back. Nhưng snapshot này dễ kèm theo DOM mutation của thư viện bên thứ ba — khôi phục xong thì phần tử còn đó mà logic JavaScript đã mất. Bản 4.0 refetch trang và swap vào <body> khi quay lại, sạch hơn và với request caching tốt thì cũng nhanh tương đương.
Bên dưới, toàn bộ engine chuyển từ XMLHttpRequest sang fetch(). Với đa số người dùng, điều này trong suốt — nhưng nó chính là thứ mở ra các tính năng mới bên dưới.
Hai tính năng mới: morph swap và hx-partial
Morph swap giờ có sẵn trong lõi. Thay vì thay nguyên một phần tử bằng bản mới, htmx so sánh DOM cũ và mới rồi chỉ vá những gì thay đổi — mượt hơn cho phần tử có trạng thái (input đang gõ, video đang chạy, focus đang giữ). Đây vốn là tính năng của idiomorph, giờ được tích hợp và cải tiến trực tiếp.
<hx-partial> là thẻ mới giải quyết bài toán out-of-band swap một cách rõ ràng hơn. Thay vì phải viết cú pháp lồng nhau để cập nhật nhiều vùng trang cùng lúc, bạn gói từng đoạn cần thay trong một thẻ:
<hx-partial hx-target="#messages" hx-swap="beforeend">
<div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
<span>5</span>
</hx-partial>
Hai tính năng này cùng hướng tới một mục tiêu: làm cho hypermedia đủ mượt để không còn phải viện đến SPA chỉ vì muốn trải nghiệm phản hồi tốt.
Hệ sinh thái extension — và một scripting solution riêng
Phần lớn năng lượng của 4.0 nằm ở extensions. Chuyển sang fetch() cho phép đội ngũ nghĩ lại cách extension hoạt động, và kết quả là một loạt extension mới hoặc được viết lại: hx-preload (preload nội dung khi hover), hx-download (tải file qua fetch), hx-alpine-compat và hx-history-cache (tương thích Alpine.js).
Đáng chú ý nhất là ba extension streaming HTML: hx-sse (Server-Sent Events), hx-ws (WebSocket), và hx-multipart (multipart/mixed). Chúng cho phép server đẩy các đoạn HTML về client theo thời gian thực — mở ra real-time mà không cần một client library riêng.
Sau cùng, nhóm giới thiệu hx-live: một giải pháp scripting nhỏ gọn cho frontend, lấy cảm hứng từ Alpine.js, jQuery và hyperscript. Cùng với đó là bundle htmax.js đóng gói sẵn htmx và các extension phổ biến nhất trong một file, cho ai không muốn chọn lựa từng phần.
Nâng cấp: có công cụ, có skills cho LLM, và không ai bị ép
Nhóm cung cấp công cụ dòng lệnh để tìm chỗ cần sửa:
npx htmx.org@4.0.0 upgrade-check -- ./templates
Nó quét template và chỉ ra từng vị trí cần thêm :inherited, event cũ cần đổi tên, hay thuộc tính đã bị bỏ. Ngoài ra còn có bốn skills files cho LLM (guidance, debugging, extension-authoring, upgrade) — một động thái đáng chú ý trong bối cảnh ngày càng nhiều người dùng AI coding assistant để viết và sửa code.
Điểm tinh tế nhất của bản phát hành này nằm ở chính sách version. htmx không đánh dấu 4.0 là latest trên NPM: nhánh 2.x vẫn giữ tag đó, còn 4.0 giữ tag next đến đầu 2027. Lý do họ nêu thẳng: không muốn ép những ai đang dùng CDN URL không gắn version phải âm thầm nhảy sang một bản có breaking change. htmx 2 sẽ được hỗ trợ vô thời hạn.
Ảnh hưởng gì tới developer
- Đang dùng htmx 2: nâng cấp không cần vội, nhưng nếu làm thì chạy
upgrade-checktrước. Gánh nặng chính là thêm:inheritedcho các thuộc tính từng dựa vào kế thừa ngầm. - Đang mệt với SPA: htmx 4 cộng morph swap và
hx-livegiờ đủ sức làm nhiều việc mà trước đây phải cần một framework. Đây là thời điểm hợp lý để thử hypermedia cho một dự án nhỏ. - Cần real-time: streaming HTML qua
hx-sse/hx-wscho phép server đẩy cập nhật mà không phải dựng thêm WebSocket client phức tạp. - Ai dùng AI coding assistant: skills files chính thức giúp model viết đúng chuẩn 4.0 thay vì sinh code htmx 2 lỗi thời.
Điều cần hiểu rõ về htmx nói chung: đây là một ván cược dài hạn vào hypermedia và server-side rendering, chống lại vòng xoay framework JavaScript. Bản 4.0 không thêm tính năng phô trương — nó gia cố nền móng để cái ván cược đó đứng vững thêm nhiều năm nữa.
Điều cần biết
- htmx 4.0.0 ra mắt 28/8/2026 sau tám tháng phát triển; engine chuyển từ XMLHttpRequest sang fetch().
- Ba thay đổi breaking: attribute inheritance tường minh (
:inherited), event names chuẩn hóa, history bỏ localStorage. - Hai tính năng mới trong lõi: morph swap (idiomorph) và thẻ
<hx-partial>. - Extensions mới gồm streaming HTML (hx-sse, hx-ws, hx-multipart) và scripting solution
hx-live. - htmx 2 vẫn là
latesttrên NPM; 4.0 giữnexttới đầu 2027 — không ai bị ép nâng cấp.
Phiên bản major hiếm khi yên tĩnh đến thế, nhưng chính sự yên tĩnh ấy lại là tuyên ngôn. htmx 4.0 không cố gây chú ý — nó đang xây để tồn tại lâu dài, đúng như triết lý "100-year web services" mà nhóm theo đuổi.
Bài viết được hỗ trợ bởi AI (Amy 🌸). Nội dung đã được kiểm duyệt bởi tác giả.
Related Posts
Chrome 150 & 151: Dấu Chấm Hết Cho uBlock Origin Và Kỷ Nguyên Manifest V2
Google Chrome chuẩn bị tung ra phiên bản 150 và 151, loại bỏ hoàn toàn các flag hỗ trợ Manifest V2. Điều này đồng nghĩa với việc uBlock Origin bản đầy đủ sẽ chính thức khai tử trên Chrome.
AI Đang Làm 'Deskill' Lập Trình Viên: Góc Nhìn Từ 10 Năm Frontend
Bài viết 252 điểm trên Hacker News đặt câu hỏi: liệu AI có đang lặp lại 'thập kỷ đánh mất' của frontend? Góc nhìn về deskilling, abstraction, và cách developer ứng phó.
Nvidia mua Hugging Face 12,9 tỷ USD: khép kín đế chế chip
Nvidia mua Hugging Face 12,9 tỷ USD — từ chip đến kho model nguồn mở. Developer nên lo hay nên mừng?