Hotwire: HTML over the Wire 技術

HTML over the Wire

Hotwireは、JSONの代わりにHTMLを送信することでJavaScriptの使用を最小限に抑えつつ、モダンなWebアプリケーションを構築するための代替アプローチです。これにより、最初のページ読み込みの高速化、サーバー側でのテンプレートレンダリングの維持、そしてよりシンプルで生産的な開発体験を実現します。

主な内容

• 高速な初回ページ読み込み: HTMLを送信することで初期読み込み速度を高めます。
• サーバー側でのテンプレートレンダリング: クライアント側の複雑なJavaScriptコードなしに、サーバーでテンプレートをレンダリングします。
• 生産的な開発体験: さまざまなプログラミング言語で、よりシンプルで生産的な開発環境を提供します。
• 37signalsチームのフレームワーク: HEYを支える37signalsチームが設計したフレームワークを利用できます。

GN⁺の意見

• 開発生産性の向上: JavaScriptの使用を減らすことで、開発者はよりシンプルにWebアプリケーションを構築できます。
• サーバー負荷増加の可能性: サーバーでテンプレートをレンダリングするため、サーバー負荷が増加する可能性があります。
• 既存のSPAとの比較: 従来のシングルページアプリケーション（SPA）と比較した際の長所と短所を考慮する必要があります。
• 多様な言語をサポート: さまざまなプログラミング言語で利用できるため、柔軟性が高いです。
• 技術導入時の考慮事項: 既存システムとの互換性や性能面の問題を事前に検討する必要があります。

[GN⁺]

Hacker Newsのコメント

• Heyウェブアプリのユーザーとして、接続が遅い環境では体験が良くない。読み込み状態やエラー状態を追加していない開発者側の問題かもしれないし、複雑さやバグが原因かもしれない。
• htmxは単一のJavaScriptファイルで機能を提供し、主にGoバックエンドと一緒に使われている。柔軟性があるので試してみたい。
• Hotwire/Livewireには否定的だったが、今ではケースバイケースだと理解するようになった。ハイパーメディアアプリを書いていないため、htmxとRESTの論文を読み直して初めてこの点に気づいた。
• PHP/Laravelで似たものを探しているならLivewireを勧める。複雑なプロジェクトではReactを使うが、Blade/PHPですべてを書けるのは新鮮だ。
• PWAを簡単に実装できる方法で、React/Vue/Svelteに比べて開発者中心だ。バックエンドフレームワークとの統合の有無が競争の鍵になる。
• 2020年のHNでの議論へのリンクを共有している。
• 2005年か2006年に、クリックを横取りしてパラメータを追加し、レンダリング済みHTMLの一部を返す方式で使っていたアプローチを思い出した。
• 高度にインタラクティブなフロントエンドを必要としないウェブアプリでは、TurboとStimulusが新しい開発者が学ぶべき内容を減らしてくれる。
• Swap JSというよりミニマルなアイデアを2年前に実装しており、いくつかのプロジェクトでうまく動作している。
• 最近、Heyのモーダルが遅いというオンライン投稿をきっかけに、HotwireとRailsをめぐる論争が起きた。DHHは元の動画が速度を制限していたと主張し、別の人たちはHotwireがネットワークに依存しすぎていると批判している.