Tech Racho エンジニアの「?」を「!」に。
  • Ruby / Rails関連

速報: Basecampがリリースした「Hotwire」の概要

12/23の朝方、DHHが以下のツイートを発信しました。

取りあえず様子を知りたかったのでDHHのツイートを追ってみました。お気づきの点がありましたら@hachi8833までお知らせください🙇。

Hotwireとは

サイト: HTML Over The Wire | Hotwire

上のツイートの要点は以下のとおりです。

  • Hotwireは、モダンなWebアプリケーションを構築する新しい手法
  • JavaScriptの利用を抑える
  • JSONではなくHTMLを送信する(HTML over the wire)
  • 先ごろリリースされたStimulus 2.0を利用する
  • 新しい「Turbo」フレームワークを取り入れている

morimorihoge注: 「JSONではなくHTMLを送信する」について

近年のフロントエンド開発ではサーバーサイドはHTMLを返さずJSONデータを返すAPI/GraphQLサーバーとしての動きを期待され、HTMLを作成するのはブラウザ側のJavaScriptで行う方式が主流となっています。

一方で、フルスタックフレームワークとしてのRailsのフロントエンドはHTMLの生成をサーバーサイドで行うという方式を採用しているため、根本的に設計思想が異なるという点に注意が必要です。

API mode等でRailsを単なるAPIサーバーとして使うことはできますので、こうしたRails提供のフロントエンドライブラリの利用はRailsを使う上で必須というわけではないことを付け加えておきます。

StimulusStumulusが2.0になったことで、Stimulusサイトもhotwire.devのサブドメインに移行したようです↓。

サイト: Stimulus: A modest JavaScript framework for the HTML you already have.

Hotwireはhey.comでも使われているそうです。

  • Basecampが開発運営しているhey.comのフロントエンド構築のすべてがHotwireに注ぎ込まれている
  • 数年がかりの研究や実験
  • HTML中心のリリース
  • Webの他にBasecampのネイティブアプリにも使う

なお、hotwire.devページの下の方を見ると「Strada」というものも2021年にリリースされるそうです。Stradaについてまだ具体的な記載はありません。

Hotwireの構成

GitHubに新たに作成された上のHotwiredアカウントには、現時点で以下を含む13個のリポジトリがあります。

  • 新しいJavaScriptライブラリ: 2つ
  • 新しいRails gem: 3つ
  • デモWebサイト: 3つ

AndroidやiOS向けのTurboもあるんですね。

hotwired/turbo-android - GitHub

hotwired/turbo-ios - GitHub

デモ動画やリポジトリ

以下で公式のデモ動画やデモアプリケーションのリポジトリも公開されています。ちなみにしっかりRails 6.1が使われています。

hotwired/hotwire-rails-demo-chat - GitHub


gorails.comが早くもHotwireのスクリーンキャストを公開しています。

Turbo

Turbo: The speed of a single-page web application without having to write any JavaScript.

  • Turboはフレームワーク
  • Turboはページの動的な変更やフォーム送信を高速化する
  • Turboは複雑なページをコンポーネントに分割し、WebSocket上でパーシャルページの更新をストリーム化する
  • TurboではJavaScriptをまったく書く必要がない

参考: WebSocket - Wikipedia

FAQ

DHHのツイートがFAQ的なので、拾ってみました。


  • Q: Tubroは新しいTubolinksなのか?
  • A: 以前TurbolinksだったものがTurbo Driveになった。Turbo DriveはTurboに盛り込まれているさまざまな手法のひとつだ。

  • Q: HotwireはRailsと密結合するのか、それともバックエンドフレームワークを選ばないのか?
  • A: 「ジョブキュー」「WebSocketマネージャ」「テンプレートレンダリング」を備えるフレームワークならRailsのHotwireと同じことができる。

  • Q: WebSocketで何か困難があったかどうか知りたい。特に、WebSocketコネクションが許可されない企業環境やモバイル環境ではどうか?
  • A: 困難はない。WebSocketはHEYやBasecampで何年も普通に使われている。ただし、一般にはプログレッシブ表示の機能拡張として使う。そうすればWebSocketが使えない場合は単に動的でなくなるだけで、壊れたりはしない。

  • Q: HEYやBasecampがHotwireで更新されたことで、Action Cableを介したWebSocketのスケールはどのぐらいうまくやれるのか?Hotwireを採用するうえで、Webサイトに数百人がアクセスした場合に単体のWebサーバーのメモリが枯渇しないかどうかが唯一気になる点だ。
  • A: 特に問題ではない。BasecampのWebSocketコネクションは数万個に達しているが、数万台のサーバーなど使っていない。

  • Q: 既存のAction CableチャネルをTurbo Streamsで置き換えられるか?
  • A: HEYでは5つのチャネルを使っていたが、Turbo Streamsが最適だったので既存のチャネルはまとめて廃止した。したがって答えはイエス。

  • Q: ページのコンテンツは「通常の」HTMLドキュメントとしてビルドされるという理解でよいか?それとも影でまた面倒なDOMが糸を引いているのか?
  • A: 通常のHTMLで合っている。バーチャルDOMもドリフティングdiffing(差分検知)も存在しない。ブラウザは普通どおりに動く。

追記(2020/12/24)ご指摘を受け誤訳を訂正しました。ありがとうございます!



  • Q: Turbolinksは死んじゃうの?
  • A: Turbolinksが勝利したのです。

ruby-jp Slackやツイートより

Hotwireに似たものとして、Laravel LivewireやPhoenix LiveViewがあるようです。

phoenixframework/phoenix_live_view - GitHub


view_componentとHotwireの関係はどうなるのだろうという書き込みもruby-jp Slackで目にしました。

github/view_component - GitHub


同じくruby-jp Slackで、Hotwireと前後して発表されたReact Server Componentsも見かけました。

参考: Introducing Zero-Bundle-Size React Server Components – React Blog


以下のツイートも目にしました。


少し前にQuoraでMatzの回答に以下の文がありましたが、今思えばHotwireのことだったのかもしれないとruby-jp Slackで見かけました。

参考: (177) Rubyやrailsは今後革新的な進化をする事はあるのでしょうか?それとも、安定・停滞していくのでしょうか?に対するYukihiro Matsumotoさんの回答 - Quora

こないだDHHと話したら「フロントエンドを簡単に記述することができるアプローチにアイディアがある」って言ってました。私はAPIでフロントエンドとバックエンドを分離するのかと思っていたので、ちょっと意外でした。
jp.quora.comの同回答より

最後に

上述のデモアプリのGemfileにはWebpackerが含まれていませんでした。

その後でDHHの以下のツイートを見つけました。HotwireではWebpackは必須ではなく、アセットパイプラインをWebpackで置き換えることもできるんですね。


  • お知らせ: TechRachoではRubyやRailsの最新情報などの記事を平日に公開しています。TechRacho記事をいち早くお読みになりたい方はTwitterにて@techrachoのフォローをお願いします。また、タグやカテゴリごとにRSSフィードを購読することもできます(例:週刊Railsウォッチ

関連記事

速報: Ruby on Rails 6.1がリリースされました


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。