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

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

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

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