HTMX 和 VUE 一樣，是由個人開發的一款開源網頁函式庫 (Library，但 VUE 屬於 Framework，特此說明)，前身名為 intercooler.js，由 Carson Gross 於 2013 年打造出的產品，在 2020 年改為 HTMX 後開始有知名度
▋HTMX 框架的核心目標
HTMX 核心目標，是為了讓 AJAX 變得簡單，丟掉 <a>、<form>
使用 html 標籤就能完成 AJAX 瑣碎的 JS 程式碼工作
2020 年在 HTMX 成立之初，就有多數開發者認為比 React、VUE、Angular 還要成熟的框架
由於 HTMX 和 React 同為 Library，所以，使用 React + HTMX 關鍵字查詢時，你會優先得到 HTMX is React killer 的比較資訊
更多的是教你如何從 React 移植到 HTMX 上
▋HTMX 實際設計
實際體驗相當簡單，不需要 Web Server，在單機就能體驗
▍首先，建立一個 html 檔案
▍在 html 引入 HTMX
雖然不用寫 js，但還是需要引入 HTMX 套件，另外，範例中會呼叫外部 API，所以要設定 "selRequestsOnly" 為 "false"
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
<meta name="htmx-config" content='{"selfRequestsOnly": false}' />
▍建立 div，設定 HTMX 呼叫 API
沒有 API 怎麼辦？
你可以參考我的另一篇 "My JSON Server -- 偽線上 REST 服務"，把 API 連結套入進來
在 body 標籤裡寫下
<div hx-get="https://my-json-server.typicode.com/Eden5Wu/react-store-api/products">Download Products</div>
你應該就可以看到如圖的成果展示
▋總結：HTMX 將 ajax 完美的整合到 html 裡
從上面的範例可以看到 HTMX 把 ajax 變不見，只有單純的 html，使用 HTMX 才能算是真正意義上的把 "寫網頁" 這件事變簡單
由於只用上 html，所以很適合以模板引擎為基礎的後端服務框架 (SSR) 來使用，能夠提高使用者提驗及網站 SEO，這給後端工程師加速寫出網頁應用程式的方法，像 PHP、Python 等都很合適
在 HTMX 官網中的 "Server-Side Examples" 一節，提供了一些使用模板引擎的後端服務框架，讓後端工程師可以參考，這裡列出幾個常見的後端服務框架：
▸JavaScript Node.js
▸C# ASP.NET Core
▸C# Blazor
▸PHP Laravel
▸Python Django
▸Python FastAPI
▸Delphi WebBroker
▸FreePascal with Pas2JS
沒有留言:
張貼留言