另一个真实的 React 到 htmx 移植案例

所有 htmx 演示之母 中，你可以看到从基于 React 的前端移植到 htmx 驱动的前端的真实世界结果。结果非常好，尽管我们对这一体验有以下限定：

这些令人震惊的数字反映了 Contexte 应用程序极易适应超媒体的事实：它是一个内容导向的应用程序，显示大量文本和图像。我们不会期望每个 Web 应用程序都能看到此类数字。

然而，我们 确实 期望 许多 应用程序通过采用超媒体/htmx 方法，至少在其系统的一部分中，看到显著的改进。

幸运的是，我们有另一个应用程序（同样基于服务器端的 Django），它已从 React 前端移植到 htmx 前端：OpenUnited。

以下是 Adrian McPhee 在原始 LinkedIn 帖子 中的一张图形，显示了移植前后代码库中的总代码行数：

前后源代码

这次移植的一个非常好的方面是，由于 OpenUnited 是开源的，与 Contexte 不同，前后代码都可以查看：

Before: https://github.com/OpenUnited/old-codebase

After: https://github.com/OpenUnited/platform

执行摘要

以下是移植的高级摘要

• 他们将 代码库大小 减少了 61%（从 31237 行代码减少到 12044 行代码）
• 他们将 总文件数 减少了 72%（从 588 个文件减少到 163 个文件）
• 他们将 总文件类型数 减少了 38%（从 18 种文件类型减少到 11 种文件类型）
• 主观上，开发速度感觉至少快了 5 倍
• 而不是在 Figma 中原型设计然后移植到 HTML，UX 开发直接在 HTML 中进行

分析

我们再次看到了一些令人震惊的结果。这是因为 OpenUnited 应用程序极易适应超媒体：像 Contexte 一样，它是一个内容导向的应用程序，显示大量文本和图像。

这一经验再次证明，对于至少一类 Web 应用程序，htmx 和超媒体架构是一个绝佳的选择。