HTMX: HTML-first web development framework

Cơ chế này hoạt động bằng cách sử dụng hypermedia như engine của ứng dụng. Thay vì server trả về JSON và client phải render lại UI, server trả về HTML fragment đã render sẵn. HTMX intercept các click, form submit, và thay thế chúng bằng AJAX request, sau đó swap kết quả vào DOM. Điều này loại bỏ hoàn toàn nhu cầu về client-side template rendering.

HTMX sử dụng các HTML attributes đặc biệt như hx-get, hx-post, hx-put, hx-delete để định nghĩa hành vi AJAX. Attributes hx-target và hx-swap điều khiển kết quả được chèn vào đâu và cách nào. Hệ thống attribute này tạo nên một declarative API hoàn toàn trong HTML, giúp developer dễ dàng hiểu và bảo trì code mà không cần nhảy qua lại giữa template và JavaScript logic.

Extensions: htmx-ext

HTMX core đủ cho 80% use cases. Phần 20% còn lại có thể xử lý bằng htmx-extensions:

• ws: WebSocket support cho real-time updates.
• sse: Server-Sent Events cho streaming.
• loading-states: CSS class tự động thêm khi request pending.
• preload: Prefetch links khi hover.

Extensions cài đặt như attribute bình thường: . Không cần build, không cần npm install.

So sánh HTMX với React, Vue, LiveView

Sự khác biệt cốt lõi là HTMX xem HTML là format truyền tải state, trong khi React/Vue xem HTML là output của JavaScript. Với HTMX, state sống trên server (HTML được render từ server), client chỉ hiển thị và gửi user actions. Điều này đơn giản hóa mental model: không có two-way binding, không có virtual DOM diffing, không có hydration mismatch.

Khi nào dùng HTMX?

HTMX phù hợp nhất với:

• CRUD apps: Admin dashboard, internal tools, CMS — phần lớn là form và table.
• Legacy migration: Server-rendered app cần thêm interactivity mà không rewrite toàn bộ sang SPA.
• Small team, big product: Một backend developer có thể handle cả server + UI.

HTMX không phù hợp cho: game, 3D visualization, heavy canvas drawing, real-time multiplayer với state phức tạp. Những use case này vẫn cần SPA framework.

Ví dụ thực tế: Todo app với HTMX + Go

Server Go render template:

func listTasks(w http.ResponseWriter, r *http.Request) {
    tasks := db.GetTasks()
    tmpl.ExecuteTemplate(w, "task_list.html", tasks)
}

Template task_list.html:

  {{range .}}
  

    {{.Title}}
    
      Xóa
    
  
  {{end}}

Không cần useState, không cần useEffect, không cần npm run dev. Chỉ HTML + server.

Khi user click nút “Xóa”, HTMX gửi DELETE request đến /tasks/{{.ID}}. Server xử lý xóa trong database và trả về empty response. HTMX nhận response và thực hiện hx-swap="outerHTML" trên element li gần nhất, loại bỏ nó khỏi DOM. Toàn bộ logic chỉ trong template HTML và handler Go, không có một dòng JavaScript nào.

Để thêm task mới, bạn có thể dùng form với hx-post và hx-swap="afterbegin" để chèn task mới vào đầu list. Form submit sẽ được HTMX intercept, gửi qua AJAX, server tạo task mới và trả về HTML của task đó, HTMX chèn vào #task-list. User experience mượt mà như SPA nhưng code server-side hoàn toàn truyền thống.

Kết luận

HTMX không phải “React killer” — nó giải quyết một problem space khác. Khi bạn cần interactivity nhưng không cần heavy client-side logic, HTMX cho bạn productivity gấp 2-3 lần: không chọn framework, không config bundler, không xử lý hydration mismatch.

Triết lý “HTML over everything” đang quay lại, không phải vì developer thích retro, mà vì HTML đã đủ mạnh cho 90% UI patterns. Còn 10% còn lại — hãy dùng đúng tool cho đúng job.

Nguồn tham khảo: HTMX docs, Carson Gross blog, Phoenix LiveView comparison, “Hypermedia Systems” book.