htmx 賦予 HTML 強大力量的 JavaScript library
現代網頁應用(Web Application)極度仰賴 JavaScript 所提供的各式各樣強大功能,各種框架(framework)百家爭鳴,諸如 React, Angular, Vue 等,不過這些框架的崛起,究其根本原因可能是因為 HTML 本身的功能不足以應付現代應用的需求所致,例如為何只有 <form>
與 <a>
可以發出 GET/POST HTTP 要求,又為何只有 GET/POST 可以使用,等等諸如此類的不足,使得開發者選擇以 JavaScript 補強 HTML 的不足,以改善使用者的體驗。
與其大量使用 JavaScript 進行開發, htmx 選擇另 1 種道路,即透過 JavaScript 增加 HTML 標籤可使用的屬性,讓 HTML 可以達成更多以往無法達到的功能,例如 <button hx-delete="/contact/1">Delete</button>
就代表按下按鈕之後會發出 DELETE request 到 /contact/1
, 開發變得相當直覺:
<tr>
<td>Angie MacDowell</td>
<td>[email protected]</td>
<td>Active</td>
<td>
<button class="btn btn-danger" hx-delete="/contact/1">
Delete
</button>
</td>
</tr>
這種作法其實很適合 Django, Spring 這類天生與 JavaScript 整合不深的框架,直接在後端回應HTML 時放入 htmx 相關屬性,就能夠做到以往要在前端額外寫 JavaScript 的功能,不僅減少前後端整合的成本,同時也帶來 SEO 的好處(因為 component 已經不需要靠 JavaScript 渲染了)。
htmx 也相較 React 這類框架 size 更小,僅有 14kB ,對於網頁效能影響也相對低,目前也有不少開發團隊選擇使用 htmx 作為其 tech stack 之一,如果你習慣使用 Django 這類的框架或者靜態網站(static site),同時又不熟 JavaScript 或者 React 等框架,其實可以選擇試試看 htmx 能否解決你的問題!
延伸閱讀
htmx - high power tools for HTML