超媒体驱动应用程序

#起源

论点：MPA - 多页面应用程序

反论点：SPA - 单页面应用程序

综合：HDA - 超媒体驱动应用程序

--@htmx_org

#超媒体驱动应用程序架构

超媒体驱动应用程序 (HDA) 架构是一种新旧结合的构建 Web 应用程序方法。它将传统多页面应用程序 (MPA) 的简洁性和灵活性与单页面应用程序 (SPA) 的更佳用户体验相结合。

HDA 架构通过扩展 Web 现有的 HTML 基础设施，使超媒体开发人员能够创建更强大的超媒体驱动交互来实现这一目标。

遵循 REST 架构的约束，两个这样的约束特点是 HDA 架构

• HDA 使用声明性、HTML 嵌入语法，而不是命令式脚本，以实现更好的前端交互性

• HDA 与服务器的交互以超媒体（即 HTML）为基础，而不是非超媒体格式（例如 JSON）

通过采用这两个约束，HDA 架构以 SPA 架构不具备的方式保留了 Web 原有的 RESTful 架构。

特别是，HDA 继续使用 超媒体作为应用程序状态引擎 (HATEOAS)，而大多数 SPA 放弃 HATEOAS，转而使用客户端模型和数据（而不是超媒体）API。

#HDA 片段示例

考虑 htmx 主动搜索 示例

<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 的本质特征

• 该功能的前端完全在声明性 htmx 属性中指定，直接在 HTML 中

• 与服务器的交互是通过 HTTP 和 HTML 进行的：发送 HTTP POST 请求到服务器，服务器返回 HTML，htmx 将此 HTML 插入 DOM

#HDA 中的脚本编写

按需代码 是 Web 原有 RESTful 架构的一个可选约束。

类似地，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) 是构建应用程序的主要媒介，这意味着

• 所有与服务器的通信仍然通过具有超媒体 (HTML) 响应的 HTTP 请求进行管理
• 脚本主要用于增强应用程序的前端体验

脚本增强了现有的超媒体 (HTML)，但并没有取代它，也没有破坏 HDA 的基本 RESTful 架构。

#HDA 风格的库

以下库允许开发人员创建 HDA

• https://htmx.npmjs.net.cn
• 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 的简洁性和可靠性，以及使用 超媒体作为应用程序状态引擎 的 RESTful 架构，同时提供更佳的用户体验，在许多情况下与 SPA 相媲美。