Hotwireの歴史

系統樹

注）下記の系統樹は網羅性・正確性を期したものはなく、大雑把な流れを表現するものです。

なお以前からRailsのフロントエンドで使われた技術とHotwireおよびReactを並べた解説記事も用意しています。ご覧ください。

Hotwire

Hotwireの歴史をもう少し細かく説明します。

• Ruby on Railsは2004年の誕生当初からAJAXによる非同期通信と画面の部分更新をサポートしていました。
  • 当初からRailsのERBでHTMLをサーバサイドでレンダーし、これをブラウザに送信していました。
  • 当時はRJS (Ruby/Remote JavaScript)を使用し、レンダーされたHTMLをJavaScriptに包んでいました。当時はJavaScriptはかなり嫌われていた言語だったため、RubyでJavaScriptを書く方法が考案されました。
  • 当時はまだjQueryが普及していなかったため、Prototype.jsを代わりに使用していました。
  • 結果的にはJavaScriptをブラウザに転送していましたので、Server-generated JavaScript Responsesの一種でした。
  • Prototype.jsを開発しSam Stephensonは長く37signalsの社員もあり、Ruby on RailsがAJAX黎明期から深くJavaScript開発に関わっていたことがわかります。
• jQueryが普及すると、RailsはPrototype.jsの代わりにjQueryを採用します。同じServer-generated JavaScript ResponsesをRails-UJSもしくはjQuery-UJSで使うことが一般的になります。
  • 上記のRJSを使うのではなく、レンダーされたHTMLを直接vanilla JavaScriptもしくはjQueryで包むようになりました。
  • 本サイトでもRails UJSの例を用意しました。
• jQueryが多機能でかつ簡潔にコードが書けるため、JavaScriptで包まないでHTML断片だけをRailsサーバから送信する方法も一般的になります。
  • 本サイトでもHTML断片をjQueryでDOMに挿入する例を用意しました
• 2012年にはBasecamp 3がリリースされ、DHHはブログ記事の中でRailsフロントエンドの高速化技術を解説しています。
  • ここで紹介されているStackerと呼ばれたSPA的高速化手法がのちに公開されたTurboLinksです。
    • StackerのインスピレーションとなったのはGitHubのPJAXです。
  • 当時からクライアント側のJavaScriptでDOMをレンダリングするライブラリ(今でいうCSR: Backbone.js, AngularJS, Ember.jsなど)が話題になっていました。これに対してサーバでHTMLをレンダーしても非常に高速化できるので、CSRを使う必要はないというのが本記事の大きな主張でした。
• Hotwireは2020年にリリースされました。2004年から16年間蓄積されたフロントエンドの知見が詰まっています。2004年のRJS以来コンセプトは一貫しており、これを少しずつ改善して進化したものがHotwireです。

ビデオ

ビデオ「サイドパネルを作ってHotwire, React, jQuery, SJRを比較する」ではそれぞれの書き味を比較しています。