HTMX là gì?
HTMX là một thư viện JavaScript nhỏ gọn cho phép bạn gửi yêu cầu AJAX, kích hoạt chuyển tiếp CSS, dùng WebSocket và Server-Sent Events trực tiếp từ các thuộc tính HTML. Thay vì viết hàng trăm dòng JavaScript để xử lý sự kiện và cập nhật DOM, bạn chỉ cần thêm vài thuộc tính như hx-get, hx-post hoặc hx-swap vào thẻ HTML sẵn có, và HTMX lo phần còn lại.
Ý tưởng cốt lõi của HTMX là quay lại mô hình web nguyên bản: trình duyệt gửi yêu cầu HTTP, server trả về HTML, trình duyệt hiển thị. HTMX chỉ mở rộng nguyên tắc đó để mọi thẻ HTML đều có thể gửi yêu cầu, không chỉ riêng thẻ <a> và <form>.
Vì sao HTMX ra đời?
Trang chủ htmx.org đặt bốn câu hỏi khiến nhiều lập trình viên giật mình: vì sao chỉ có thẻ <a> và <form> được phép gửi yêu cầu HTTP? Vì sao chỉ có sự kiện click và submit mới kích hoạt được yêu cầu? Vì sao chỉ có hai phương thức GET và POST? Và vì sao bạn chỉ có thể thay thế toàn bộ màn hình mỗi khi có phản hồi?
HTMX được tạo ra bởi Carson Gross, tác giả của intercooler.js, với triết lý HTML là hypertext: server trả về các mảnh HTML thay vì JSON, còn trình duyệt chỉ việc chèn chúng vào đúng vị trí. Cách tiếp cận này còn được gọi là hypermedia-driven application, được trình bày chi tiết trong cuốn sách Hypermedia Systems của chính tác giả.
Các khái niệm cốt lõi của HTMX
hx-get, hx-post và các thuộc tính yêu cầu
HTMX cung cấp đầy đủ các thuộc tính cho mọi phương thức HTTP: hx-get, hx-post, hx-put, hx-patch và hx-delete. Chỉ cần đặt URL vào thuộc tính, HTMX sẽ tự động gửi yêu cầu khi sự kiện mặc định xảy ra.
hx-trigger: kiểm soát thời điểm gửi yêu cầu
Mặc định, HTMX gửi yêu cầu khi input, select hoặc textarea thay đổi, khi form được submit, hoặc khi click vào các thẻ khác. Thuộc tính hx-trigger cho phép tùy biến sâu hơn với các bổ ngữ như delay:500ms để chờ nửa giây, changed để chỉ gửi khi giá trị thay đổi, once để chỉ chạy một lần, hay every 2s để tự động gửi yêu cầu mỗi hai giây như một cơ chế polling.
hx-target và hx-swap: chọn nơi nhận kết quả
Thuộc tính hx-target chỉ định phần tử nào sẽ nhận phản hồi từ server, còn hx-swap quyết định cách chèn nội dung: innerHTML mặc định, outerHTML, beforebegin, afterbegin, beforeend, afterend hoặc delete để xóa phần tử.
hx-boost: nâng cấp dần dần
Thêm hx-boost vào thẻ body sẽ biến mọi thẻ <a> và <form> bên trong thành yêu cầu AJAX, giúp trang web mượt mà hơn mà không cần viết lại giao diện, một dạng progressive enhancement thuần túy.
Ví dụ thực tế với HTMX
Ví dụ kinh điển trong tài liệu chính thức: một nút bấm gửi yêu cầu POST và thay thế nội dung của phần tử cha bằng phản hồi từ server.
<button hx-post="/clicked"
hx-trigger="click"
hx-target="#parent-div"
hx-swap="outerHTML">
Click Me!
</button>
Ví dụ tìm kiếm tức thì khi gõ phím: mỗi lần người dùng gõ, sau nửa giây không gõ tiếp, HTMX gửi yêu cầu và chèn kết quả vào vùng #search-results.
<input type="text" name="q"
hx-get="/search"
hx-trigger="keyup delay:500ms changed"
hx-target="#search-results"
placeholder="Tìm kiếm...">
<div id="search-results"></div>
HTMX so với React và các framework JavaScript
Thư viện chỉ nặng khoảng 16 KB khi nén gzip, không phụ thuộc bất kỳ package nào và không cần bước build. Chỉ cần một thẻ <script> là có thể chạy được. Trang chủ htmx.org khẳng định các dự án dùng HTMX giảm tới 67% khối lượng mã nguồn so với khi dùng React.
Tất nhiên HTMX không thay thế hoàn toàn React. Nếu ứng dụng của bạn cần trạng thái phức tạp, xử lý offline, hoặc tương tác real-time phức tạp ở phía client, một framework JavaScript vẫn là lựa chọn hợp lý. HTMX tỏa sáng ở các ứng dụng server-rendered, trang quản trị nội bộ, dashboard và mọi nơi mà tốc độ phát triển và sự đơn giản quan trọng hơn độ phức tạp của giao diện.
Ứng dụng thực tế và cộng đồng
HTMX đang được dùng bởi nhiều tổ chức lớn như GitHub trong các trang tài liệu và trợ giúp, 1Password, Washington Post và DjaoDjin. Trên GitHub, dự án bigskysoftware/htmx đạt gần 49.000 sao, còn gói npm htmx.org có gần 870.000 lượt tải mỗi tháng. Phiên bản v4 hiện đang trong giai đoạn beta và dự kiến phát hành chính thức vào mùa hè.
Nếu bạn đang xây dựng ứng dụng web với Python Django, Flask, Ruby on Rails hoặc bất kỳ framework server-rendered nào, HTMX là lựa chọn đáng cân nhắc để giảm đáng kể lượng JavaScript phải viết và bảo trì.
Tổng kết
HTMX mang lại sức mạnh của ứng dụng tương tác hiện đại mà vẫn giữ sự đơn giản của mô hình web truyền thống. Với kích thước nhỏ, không cần build và cú pháp HTML thuần túy, thư viện đang ngày càng được ưa chuộng trong cộng đồng phát triển web. Nếu bạn muốn giảm tải JavaScript cho dự án hiện tại, hãy thử bắt đầu với một trang con đơn giản và trải nghiệm sự khác biệt.
Tham khảo thêm
Tài liệu chính thức của HTMX | HTMX – Rethinking the SPA trên dev.to | HTMX in 5 minutes trên dev.to
