正题：MPA - 多页应用
反题：SPA - 单页应用
合题：HDA - 超媒体驱动应用
超媒体驱动应用（HDA）架构是一种新/旧的Web应用构建方法。它结合了传统多页应用（MPA）的简洁性与灵活性，以及单页应用（SPA）的更好用户体验。
HDA架构通过扩展Web现有的HTML基础设施，使超媒体开发者能够创建更强大的超媒体驱动交互来实现这一目标。
遵循REST的架构约束理念，两个这样的约束定义了HDA架构：
HDA使用声明式、HTML嵌入式语法而非命令式脚本来实现更好的前端交互性
HDA以超媒体术语（即HTML）而非非超媒体格式（如JSON）与服务器交互
通过采用这两个约束，HDA架构保持了Web原始RESTful架构，而SPA架构则没有。
特别是，HDA继续使用超媒体作为应用状态引擎（HATEOAS），而大多数SPA则放弃HATEOAS，转而采用客户端模型和数据（而非超媒体）API。
考虑htmx的动态搜索示例：
<h3>
搜索联系人
<span class="htmx-indicator">
<img src="/img/bars.svg"/> 搜索中...
</span>
</h3>
<input class="form-control" type="search"
name="search" placeholder="开始输入以搜索用户..."
hx-post="/search"
hx-trigger="keyup changed delay:500ms, search"
hx-target="#search-results"
hx-indicator=".htmx-indicator">
<table class="table">
<thead>
<tr>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
</tr>
</thead>
<tbody id="search-results">
</tbody>
</table>
这是一个通常与SPA相关的用户体验模式：用户输入时，短暂停顿后，搜索结果将填充下方结果表。但在此示例中，完全在HTML中使用符合HTML的方式实现。
此示例有效展示了HDA的基本特征：
功能前端完全通过HTML中的声明式htmx属性指定
与服务器的交互通过HTTP和HTML完成：向服务器发送HTTP POST请求，服务器返回HTML并由htmx将其插入DOM
按需代码是Web原始RESTful架构的可选约束。
类似地，HDA架构有一个最终的可选约束：
这解决了Roy Fielding在其论文中提到的关于按需代码的担忧：
然而，（按需代码）也降低了可见性，因此在REST中只是一个可选约束。
通过将按需代码（脚本）直接嵌入HTML，可见性得到增强，符合行为局部性软件设计原则。
满足这第三个约束的三种脚本方法是hyperscript、AlpineJS和VanillaJS（当直接嵌入HTML元素时）。
以下是每种方法的示例：
<!-- hyperscript -->
<button _="on click toggle .red-border">
切换类
</button>
<!-- Alpine JS -->
<button @click="open = !open" :class="{'red-border' : open, '' : !open}">
切换类
</button>
<!-- VanillaJS -->
<button onclick="this.classList.toggle('red-border')">
切换类
</button>
在HDA中，超媒体（HTML）是构建应用的主要媒介，这意味着：
脚本增强了现有的超媒体（HTML），但不会取代它或破坏HDA的基本RESTful架构。
以下库允许开发者创建HDA：
以下脚本库在适当使用时，可补充HDA方法：
HDA架构是两种先前架构的综合：原始的多页应用（MPA）架构和相对较新的单页应用架构。
它试图捕捉两者的优点：MPA的简洁性和可靠性，以及使用RESTful架构（以超媒体作为应用状态引擎），同时提供在许多情况下可与SPA媲美的更好用户体验。