Htmx là gì? Htmx có thể đơn giản hóa trang web của bạn như thế nào?

Cộng đồng phát triển web gần đây đang xôn xao bàn luận về htmx, nhưng công nghệ mới thú vị này là gì? Hóa ra nó đơn giản hơn nhiều so với những gì bạn mong đợi, nhưng tính hữu dụng của htmx lại cực kỳ lớn.

htmx là gì?

htmx là một thư viện JavaScript nhỏ với trọng tâm hẹp. Nó cung cấp chức năng JavaScript phổ biến thông qua các thuộc tính HTML. Đây là một ví dụ đơn giản:

<a href="/about" hx-get="/about">About</a>

Code này hiển thị thuộc tính HTML tùy chỉnh, hx-get. Nếu bạn nhấp vào liên kết này, thư viện htmx sẽ gửi yêu cầu AJAX và load trang đích mà không cần làm mới toàn bộ trình duyệt.

htmx có chức năng bổ sung cho phép bạn gửi yêu cầu:

• Từ các phần tử không phải là a và form.
• Trên các sự kiện khác ngoài click và submit.
• Sử dụng các phương thức HTTP khác ngoài GET và POST.
• Thay thế bất kỳ phần nào của trang thay vì chỉ toàn bộ.

Mặc dù htmx có hỗ trợ các công nghệ như hoạt ảnh CSS và WebSockets nhưng mục đích cốt lõi của nó là đơn giản hóa việc xử lý yêu cầu HTTP.

Cách bạn có thể sử dụng htmx trong một ứng dụng web đơn giản

htmx giải quyết chức năng cụ thể trong ứng dụng web hoặc trang web, thay vì hoạt động của toàn bộ ứng dụng.

Một lợi thế lớn của thư viện là việc bắt đầu sử dụng rất dễ dàng. Bạn có thể tải xuống và cài đặt một bản sao nếu muốn, nhưng vì nó không có các dependency nên tất cả những gì bạn cần làm để bắt đầu là thêm liên kết vào script trên CDN:

<script
  src="https://unpkg.com/htmx.org@1.9.10"
  integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC"
  crossorigin="anonymous"></script>

Để phát triển và thử nghiệm cục bộ, bạn sẽ cần thiết lập một web server, như Apache, nếu bạn chưa có máy chủ nào đang chạy. Đây là một yêu cầu, ngay cả khi bạn chỉ đang thử nghiệm với các fle tĩnh, vì giao thức file: không cho phép các yêu cầu AJAX.

Một ví dụ đơn giản sử dụng cuộn vô hạn

Cuộn vô hạn là một kỹ thuật phổ biến mà các trang web như Twitter sử dụng cho nguồn cấp dữ liệu của mình. Khi bạn đến cuối danh sách, cuộn vô hạn sẽ load thêm các mục để bạn tiếp tục đọc.

Tính năng này đương nhiên yêu cầu JavaScript để kiểm tra vị trí cuộn trang và load các mục mới mà không cần refresh trang. Nhưng htmx có thể làm tất cả điều này cho bạn.

Markup sau đại diện cho danh sách các bài đăng, sử dụng hình ảnh cho mỗi bài:

<ol>
    <li><img src="http://placekitten.com/420/300" /></li>
    <li><img src="http://placekitten.com/400/320" /></li>
    <li><img src="http://placekitten.com/440/300" /></li>
    <li><img src="http://placekitten.com/420/340" /></li>
    <li><img src="http://placekitten.com/300/200" /></li>
</ol>

Hãy tưởng tượng bạn có các mục này trong một file, feed1.html, với nhiều mục hơn trong feed2.html, v.v... Khi đó, mỗi trang sẽ hiển thị một tập hợp con các mục mà bạn có thể cuộn trong đó:

Giờ đây, bạn có thể sử dụng liên kết "next page" để di chuyển từ trang này sang trang khác, nhưng bạn cũng có thể thực hiện cuộn vô hạn một cách dễ dàng. Chỉ cần thay đổi mục cuối cùng thành:

<li hx-trigger="revealed" hx-get="feed2.html" hx-select="li" hx-swap="afterend">
    <img src="http://placekitten.com/300/200" />
</li>

Việc thêm 4 thuộc tính này vào mục danh sách cuối cùng sẽ thực hiện cuộn vô hạn. Dưới đây là ý nghĩa của từng thuộc tính:

Khi bạn cuộn xuống cuối danh sách, hãy chú ý cách trang tự động load nội dung mới. Bạn có thể xác nhận điều này bằng cách quan sát thanh cuộn và kiểm tra những công cụ dành cho nhà phát triển trình duyệt của bạn:

Lưu ý rằng, với thiết lập trang tĩnh đơn giản này, trang feed2.html bao gồm mục cuối cùng có thuộc tính hx-get được đặt thành feed3.html, v.v. Cũng lưu ý cách htmx đã thêm trình nghe cho sự kiện cuộn.

Các ứng dụng tiềm năng khác cho htmx

Bạn có thể sử dụng htmx cho nhiều tương tác phổ biến khác, bao gồm:

• Phân trang: Load và thay thế các mục khi khách truy cập nhấp vào liên kết phân trang.
• Xác thực biểu mẫu: Khi gửi, hãy thay thế biểu mẫu bằng thông báo xác nhận hoặc một tập hợp con của biểu mẫu.
• Thanh tiến trình: Cập nhật định kỳ giá trị của thanh tiến trình dựa trên phản hồi ping.
• Chỉnh sửa nội tuyến: Hoán đổi một phần tử cho vùng văn bản chứa giá trị của phần tử đó.

Có thể xây dựng từng ví dụ này bằng cách sử dụng JavaScript tiêu chuẩn, htmx chỉ giúp quá trình này dễ dàng hơn nhiều.

Lợi ích và hạn chế của htmx

Những lợi ích của htmx

htmx có thể đơn giản hóa rất nhiều các tương tác phổ biến có thể mang lại lợi ích cho nhiều ứng dụng web và thậm chí nhiều trang web. Nó cho phép các nhà thiết kế và những người khác làm việc với các trang web giao diện người dùng thêm chức năng mà không cần phải học JavaScript.

Bằng cách trừu tượng hóa hành vi phổ biến, htmx đảm bảo tính nhất quán giữa các dự án của bạn và giữa chúng. Cuộn vô hạn sẽ hoạt động theo cách tương tự từ trang này sang trang khác, bất kể ai đã triển khai nó.

Vì nó nhấn mạnh cách tiếp cận khai báo (cái gì) thay vì cách tiếp cận mệnh lệnh (như thế nào), nên chức năng htmx thường dễ hiểu và dễ lý giải hơn.

Hạn chế của htmx

Mặc dù htmx có thể giúp bạn quên đi JavaScript trong nhiều ngữ cảnh nhưng nó không thể giải quyết mọi vấn đề cho bạn! Bạn vẫn cần phải viết code để xử lý logic nghiệp vụ cụ thể và nhiều chức năng cấp thấp hơn.

Bởi vì htmx thực hiện rất nhiều công việc cho bạn nên khả năng tùy chỉnh hành vi sẽ ít hơn. Đây thường là một sự đánh đổi tích cực, nhưng bạn sẽ cần phải chuẩn bị để từ bỏ quyền kiểm soát.

Html có thể giúp bạn tránh viết JavaScript nhưng bạn vẫn nên biết rằng code JavaScript đang chạy ở chế độ nền. Bạn có thể muốn sử dụng thuộc tính hx-get trên mọi liên kết, thay cho thuộc tính href. Nhưng điều này tạo ra sự phụ thuộc vào JavaScript; nếu code không chạy được vì bất kỳ lý do gì, người dùng của bạn sẽ chỉ còn lại một liên kết không có tác dụng gì. Bạn nên luôn luôn thực hành nâng cao lũy tiến để ngăn chặn điều này.