超媒體驅動應用程式

#起源

正題：MPA - 多頁應用程式

反題：SPA - 單頁應用程式

合題：HDA - 超媒體驅動應用程式

--@htmx_org

#超媒體驅動應用程式架構

超媒體驅動應用程式 (HDA) 架構是一種建構網頁應用程式的新/舊方法。它結合了傳統多頁應用程式 (MPA) 的簡潔性和靈活性，以及單頁應用程式 (SPA) 較佳的使用者體驗。

HDA 架構透過擴展現有的網頁 HTML 基礎設施，允許超媒體開發人員建立更強大的超媒體驅動互動，實現此目標。

遵循 REST 架構約束的概念，有兩個這樣的約束描述了 HDA 架構

• HDA 使用宣告式、嵌入 HTML 的語法，而不是命令式腳本，以實現更好的前端互動性

• HDA 以超媒體 (即 HTML) 的形式與伺服器互動，而不是非超媒體格式 (例如 JSON)

透過採用這兩個約束，HDA 架構以 SPA 架構沒有的方式，保持在網頁原始的 REST-ful 架構內。

特別是，HDA 繼續使用超媒體即應用程式狀態引擎 (HATEOAS)，而大多數 SPA 則放棄 HATEOAS，轉而使用用戶端模型和資料 (而非超媒體) API。

#HDA 片段範例

考慮 htmx 的 Active Search 範例

<h3> 
  Search Contacts 
  <span class="htmx-indicator"> 
    <img src="/img/bars.svg"/> Searching... 
   </span> 
</h3>
<input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="keyup changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

<table class="table">
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody id="search-results">
    </tbody>
</table>

這是一種通常與 SPA 相關聯的 UX 模式：當使用者輸入時，在稍微暫停後，搜尋結果將會填入下方的結果表格。然而，在這種情況下，它完全在 HTML 中實現，並且符合 HTML 的方式。

此範例有效地展示了 HDA 的基本特徵

• 該功能的前端完全在 HTML 中直接以宣告式 htmx 屬性指定

• 與伺服器的互動是透過 HTTP 和 HTML 完成：HTTP POST 請求傳送至伺服器，伺服器傳回 HTML，而 htmx 將此 HTML 插入 DOM 中

#HDA 中的腳本

隨選程式碼是網頁原始 REST-ful 架構的可選約束。

同樣地，HDA 架構有一個最終的可選約束

• 隨選程式碼 (即腳本) 應盡可能地直接在主要的超媒體中完成

這解決了 Roy Fielding 在他的論文中提到的關於隨選程式碼的疑慮

然而，(隨選程式碼) 也會降低可見性，因此它只是 REST 中的可選約束。

透過將隨選程式碼 (腳本) 直接嵌入 HTML 中，可見性得到提升，滿足行為局部性軟體設計原則。

滿足這第三個約束的三種腳本方法是 hyperscript、AlpineJS 和 VanillaJS (當直接嵌入在 HTML 元素中時)。

以下是每種方法的範例

<!-- hyperscript -->
<button _="on click toggle .red-border">
  Toggle Class
</button>

<!-- Alpine JS -->
<button @click="open = !open" :class="{'red-border' : open, '' : !open}">
  Toggle Class
</button>

<!-- VanillaJS -->
<button onclick="this.classList.toggle('red-border')">
  Toggle Class
</button>

在 HDA 中，超媒體 (HTML) 是建構應用程式的主要媒介，這意味著

• 與伺服器的所有通訊仍然透過 HTTP 請求和超媒體 (HTML) 回應來管理
• 腳本主要用於增強應用程式的前端體驗

腳本增強了現有的超媒體 (HTML)，但不會取代它或顛覆 HDA 的基本 REST-ful 架構。

#HDA 風格的函式庫

以下函式庫允許開發人員建立 HDA

• https://htmx.dev.org.tw
• https://unpoly.com/
• https://piranha.github.io/twinspark-js/
• https://hotwire.dev
• https://hyperview.org/ (行動超媒體！)

以下腳本函式庫在適當使用時，可以補充 HDA 方法

• https://hyperscript.org
• https://alpinejs.dev/
• http://vanilla-js.com/ (直接嵌入在 HTML 中)

#結論

HDA 架構是兩種先前架構的綜合：原始的多頁應用程式 (MPA) 架構和 (相對) 較新的單頁應用程式架構。

它試圖捕捉兩者的優點：MPA 的簡潔性和可靠性，以及使用 超媒體即應用程式狀態引擎的 REST-ful 架構，同時提供更好的使用者體驗，在許多情況下可與 SPA 相提並論。