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

A Real World React -> htmx Port

Add instant database search with Django and HTMX

FOLLOW US

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!