HTMX là gì? Tạo web app động không cần JavaScript framework phức tạp

Thuộc tính cốt lõi bạn cần biết

• hx-get, hx-post, hx-put, hx-patch, hx-delete — phương thức HTTP.
• hx-target — CSS selector của element sẽ được cập nhật (mặc định là chính element đó).
• hx-swap — cách chèn nội dung: innerHTML (mặc định), outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none.
• hx-trigger — sự kiện kích hoạt: click (mặc định), change, keyup, load, revealed, intersect, hoặc custom event.
• hx-indicator — hiển thị spinner khi đang load.
• hx-confirm — hỏi xác nhận trước khi gửi request.
• hx-include — thêm giá trị form/input vào request.

So sánh HTMX với React, Alpine.js, LiveView

HTMX không thay thế React trong mọi trường hợp. Nếu bạn xây dựng trình soạn thảo collaborative (như Figma), game, hay dashboard realtime với WebSocket hai chiều phức tạp — React vẫn là lựa chọn đúng. Nhưng với 80% ứng dụng CRUD, admin panel, form nhập liệu, bảng dữ liệu có phân trang/sắp xếp, HTMX viết nhanh hơn, bảo trì dễ hơn.

Ví dụ thực tế: Tìm kiếm gợi ý (autocomplete)

Server trả về fragment HTML cho :

Server nhận q=query, trả về . HTMX cập nhật datalist ngay lập tức.

Xử lý form validation

HTMX làm validation server-side trở nên tự nhiên. Form submit qua hx-post, server trả về 422 Unprocessable Entity kèm HTML fragment chứa lỗi:

  
  Đăng ký

Khi validation fail, server trả lại cả form kèm thông báo lỗi. HTMX swap outerHTML thay thế form cũ bằng form mới có lỗi. Không cần viết JS validate client-side.

WebSocket và Server-Sent Events

HTMX hỗ trợ realtime qua hx-ext="ws" hoặc hx-ext="sse". Ví dụ chat đơn giản:

  

  
    
    Gửi
  

Server push HTML fragment đến #messages, HTMX append tự động. Không cần quản lý connection, reconnect, parse JSON.

Khi nào KHÔNG nên dùng HTMX

• Ứng dụng cần offline-first (PWA, IndexedDB sync).
• Logic UI phức tạp hoàn toàn client-side (drag-drop canvas, editor rich-text).
• Team đã am hiểu React/Vue và codebase lớn đang chạy ổn.
• Cần mobile app chia sẻ logic (React Native).

Kết luận

HTMX đưa HTML trở lại vị trí trung tâm. Server quyết định UI, browser chỉ render và gửi sự kiện. Cách tiếp cận này giảm complexity, tăng tốc độ phát triển, và SEO tốt ngay từ đầu. Với team nhỏ, startup, hoặc dự án nội bộ — HTMX thường là lựa chọn tối ưu hơn so với SPA framework nặng nề.

Tài liệu chính thức HTMX | Mã nguồn mở trên GitHub