HTMX 的由來

HTMX（https://htmx.org/ )大約在去年(2022)下半年開始出現討論聲量，但實際上已經存在了一段時間，他的前身是 2013 年就出現的 intercooler.js (https://intercoolerjs.org/ )，後來原作者將其重寫，移除了 jQuery 的依賴成為了現在的 HTMX，詳細的中文介紹可以參考這篇文章（https://www.infoq.cn/article/veskosrskc9xgiyygyku） 。

HTMX 的特色

HTMX 最大的特色是：以往需要透過 JavaScript 來操作的一些 AJAX、CSS 動效、WebSockets 和 Server Sent Events，可以直接寫在 HTML 標籤的屬性 (attributes) 上，減少了許多 JavaScript 的撰寫，以下是官方文件的簡短範例。

<button
    hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

只要使用hx-開頭的標籤屬性，就可以直接完成許多原本要使用 JavaScript 才能做到的操作。

其他特點還包含：

• 只有 14k 左右的大小
• 不需要依賴其他函式庫
• 與 IE11 相容

HTMX 的應用場景

以下純屬個人想法：
在剛接觸到 HTMX 時以為這是不是要挑戰三大前端框架（Angular、React、Vue）的新興框架，但了解後發現 HTMX 比較像是「面向全端（後端）需求」的函式庫。

對於全端開發者來說，如果只是需要一個與資料庫互動的簡單介面，沒有複雜的前端效果，也許不需要前後端分離，只要區分可以發出請求的靜態頁面和後端渲染的頁面即可，整體設計跟 PHP 非常接近（但也不意外，這是 2013 年構想出來的函式庫）。

如果你是一個前端開發者，且對三大框架之一已經相當熟悉，可以直接忽略 HTMX，三大框架可以解決各種複雜的前端操作，有各種語法糖讓你快速完成複雜的前端操作。

HTMX 雖號稱少寫 JS，但沒有支援的操作仍需自行撰寫 JS，在 html 中混雜 JS 寫出來的 code 會非常髒，試想一段程式碼中同時包含了 html、atomic CSS、HTMX Attributes、JS 那會是多麼「歡樂」。

總而言之，依據情境選擇工具是第一原則，如果是全端＋迷你專案，那 HTMX 也許有化繁為簡的奇效，但如果是複雜、高互動性、會擴充且需要多人共同維護的專案，請謹慎評估。