もう1つの現実的な React -> htmx ポート

React ベースのフロントエンドから htmx 対応のフロントエンドへのポートの実際の結果を、母親のすべての htmx デモで見ることができます。結果は非常に良好ですが、経験を次の点で条件付きにします。

これらは目を引く数字であり、Contexteアプリケーションがハイパーメディアに非常に適しているという事実を反映しています。これは、大量のテキストと画像を表示するコンテンツ重視のアプリケーションです。すべてのウェブアプリケーションでこのような数値が見られるとは想定していません。

ただし、少なくともシステムの一部で、ハイパーメディア/htmx アプローチを採用することで、多くのアプリケーションで劇的に改善されると期待しています。

幸運なことに、React フロントエンドから htmx フロントエンドに移植された別のアプリケーション（これもサーバ側で Django をベースにしています）があります: OpenUnited。

次に、Adrian McPhee による元の LinkedIn 投稿からのグラフィックを示します。これは、ポートの前後のコードベースの合計コード行を示しています。

#Before/After ソースコード

このポートの非常に優れた点は、OpenUnited がオープンソースであり、Contexteとは対照的に、前後のコードを調べて利用できることです。

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

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

#エグゼクティブサマリー

次に、ポートの概要を示します。

• **コードベースのサイズ**を**61%**削減（31237 LOC から 12044 LOC へ）
• **ファイルの合計数**を**72%**削減（588 ファイルから 163 ファイルへ）
• **ファイルの種類の合計数**を**38%**削減（18 ファイルの種類から 11 ファイルの種類へ）
• 主観的には、開発速度は少なくとも**5倍**高速です
• Figma でプロトタイプを作成してから HTML に移植するのではなく、UX 開発は HTML で直接行われました

#分析

今回も目を引く結果が得られました。これは、OpenUnited アプリケーションはハイパーメディアに非常に適しているためです。Contexteと同様に、大量のテキストと画像を表示するコンテンツ重視のアプリケーションです。

この経験は再び、少なくとも一定のクラスの Web アプリケーションにとって、htmx とハイパーメディアアーキテクチャが優れた選択肢となり得ることを示しています。