Htmx là gì và vì sao Nam lựa chọn cho các dự án sử dụng Golang của mình

Htmx là gì và vì sao Nam lựa chọn cho các dự án sử dụng Golang của mình

Gần đây khi làm việc nhiều với nền tảng Go để xây dựng các sản phẩm cho khách hàng, Nam bắt gặp những trường hợp để lộ ra hạn chế lớn của nền tảng tĩnh (Static) trong việc thể hiện dữ liệu theo cách mong muốn.

• Sử dụng Ajax để load dữ liệu Real-time sẽ khó xây dựng hơn so với các nền tảng framework Frontend viết bằng Javascript, chưa kể khả năng fail rất cao (Mình rất yếu mảng bất đồng bộ...)

• Đối với các trường tạo mới hoặc join từ các bảng dữ liệu khác nhau thường rất khó thực hiện, chưa kể phải viết từng route cho việc sửa, xóa...

Với những hạn chế này, đôi khi Nam muốn chuyển hẳn Go về backend API, thay vì kiêm nghiệm cả mảng phần truyền dữ liệu cho phần html (với thư viện html/template). Tuy vậy, khi nghiên cứu trên mạng thì mình thấy có thư viện Htmx khá hay và phù hợp với phát triển Website chạy bằng Golang, nó giúp phần frontend trở nên "Động" hơn và chứa đủ những tính năng như của các Framework Frontend sử dụng Javascript.

Htmx là gì?

htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~14k min.gz’d), dependency-free, extendable & has reduced code base sizes by 67% when compared with react

 

Với những khái niệm kể trên thì Htmx giúp xử lý Ajax, css transition, Websockets và các sự kiện trên server trực tiếp bằng Html, kết hợp với các route tĩnh của golang thì nó là thứ vũ khí tuyệt vời để truy vấn và xử lý dữ liệu động mà không phải tải lại trang web, gần giống với đặc tính của React, Vue...

Điểm mạnh của Htmx

• Why should only <a> & <form> be able to make HTTP requests?

• Why should only click & submit events trigger them?

• Why should only GET & POST methods be available?

• Why should you only be able to replace the entire screen?

By removing these constraints, htmx completes HTML as a hypertext

Từ những đoạn này thì cơ bản là bạn có thể thực hiện http request không chỉ qua liên kết và form nữa, mà mở rộng ra nhiều chỉ thị hơn cho các phần tử, như mouseover, onclick....Thứ 2 là htmx không chỉ hỗ trợ lệnh GET và POST mà còn hơn thế, thứ 2 là như nói từ ý đầu, nó mang tới khả năng chiếu dữ liệu API lên các DOM chỉ định và dễ dàng hơn thực hiện Ajax với Javascript. 

Cách tích hợp Htmx vào dự án

Dưới đây là cách tích hợp vô cùng đơn giản

 <script src="https://unpkg.com/htmx.org@2.0.2"></script>

  <!-- have a button POST a click via AJAX -->

  <button hx-post="/clicked" hx-swap="outerHTML">

    Click Me

  </button>

Với cách tích hợp này, ta chỉ cần dùng CDN library và gọi thư viện vào file html tạo bởi Go là đã có thể thực hiện các thao tác với Htmx bình thường

<button hx-post="/clicked"

    hx-trigger="click"

    hx-target="#parent-div"

    hx-swap="outerHTML"

>

    Click Me!

</button>

Như ở ví dụ này, ta thực hiện lệnh post tới route clicked, đồng thời truyền kết quả tớm dom có id #parent-div, 

NẾu muốn xem Htmx có thể làm được gì, vui lòng xem phần ví dụ (Examples)

Tư duy của Nam là luôn tham khảo các phần Examples và Components của mọi Framework Frontend để xem nó có thể làm được gì, từ đó lựa chọn và lắp ghép vào các dự án của mình, tư duy này giúp Nam triển khai các dự án nhanh hơn rất nhiều và hạn chế Bias: "Phát minh lại cái bánh xe". Với các ví dụ ở đây, Nam thấy nó đã xử lý được khá nhiều vướng mắc của bản thân, những tính năng mà Nam cần mất nhiều thời gian để thực hiện, nay chỉ sau chớp mắt là đã chạy được rồi, trong đó có phần File Upload, vốn là phần khá phức tạp mà Nam phải thực hiện lồng Form multipart, hoặc phần Sortable, đảo thứ tự của các thành phần (Rất mệt với câu chuyện bất đồng bộ của thằng Javascript)