HotwireというかTurboは単なるJavaScriptのライブラリなので、Railsじゃないと使えないということはない。Railsでturbo-rails gemを使うととても便利に使えることは間違いないけど。
ということでRust製のウェブアプリケーションフレームワークのRocketでアプリを書くのを試すついでに、Ralis以外でHotwireを導入することを試してみた。
成果物と導入、Turboのおかげでよくなっているポイントを１つ書く
成果物
できたのはこれ。本家のデモと同じくチャット
こんな感じに動く。左と右で２つのブラウザでアプリを開いているところ
導入
RocketやRails以外のフレームワークでTurboを導入する場合は、webpackなど何かしらJavaSciprtのbunderを使って、通常のnpm packageを使うのと同じ方法で使える。
Turbo DriveとTurbo Framesに関してはインストールしてTurboをjsで読み込んでおくだけで有効になるのでなんの手間もない。
Turboが活きているポイント：フォーム周りの動的な振る舞い
部屋を追加するところや、部屋の名前を変更するところで、ページ遷移せずにフォームが追加されたりプレーンテキストだった箇所がフォームに変更されたりしている。これはTurbo Framesを使っている。Turbo Framesを使うとページを複数のフレームに分割することができて、分割したフレーム内でページ遷移が発生すると、ページ全体を書き換えず対応するフレームの箇所だけを遷移先のページのものに置き換えてくれる。
この＋ボタンは/rooms/newというURLの部屋追加画面への単なるリンクで、Turboを読み込むことをやめるとただそのページに遷移するだけになる。遷移先の/rooms/newのページは右の画面で、フォームだけがある雑なページが用意されている。
それぞれのページで赤で囲んだ箇所が turbo-frame というタグで囲まれたひとつのフレームになっていて、同じidを付けているので、この中でページ遷移をするとページ全体が遷移するのではなくこのフレームだけが書き換わる。
部屋の名前を変更する箇所も同様で、/rooms/editという雑な編集ページが用意されていて、ペンマークのボタンは編集ページへのただのリンクになっている。
トップのチャット画面のタイトル部分と、編集ページのフォーム部分が Turbo Frame になっているので、ペンボタンを押して遷移するとタイトル部分がフォームに書き換わり、submitするとまたタイトルになる。
このように単純な複数の静的なページと、通常のページ遷移だけで動的なページが作れるのはいい感じ（かもしれない）
