Hotwire : HTML Over The Wire

• 最新のWebページを、JavaScriptやJSONの送信の代わりに、HTMLを直接送って構築する方式

→ メールサービスHeyのフロントエンドで使用

• 高速なページ読み込み、サーバーレンダリング、そしてSPAの速度と応答性を犠牲にすることなく、サーバー側で多様な言語を使用可能

Turbo + Stimulus + Strada

• Turbo : Hotwireの中核。高速なWebアプリを作れるようにする技術の集合

→ Turbo Drive : すべてのaリンクのクリックとform submitをfetchに変換し、サーバーから読み込んでbodyを置き換える。SPAのように動作するよう変更

→ Turbo Frames : 複雑なページをフレームに分離して、それぞれ読み込みとレンダリングを行う。iframeに似ているが、1つのDOMで処理される仮想フレーム

→ Turbo Streams : ページの変更事項をWebSocketでストリーム送信

→ Turbo Native : Turboの方式をiOS/Androidのハイブリッドアプリで使えるようにサポート

• Stimulus : Turboが80%を処理し、残りの部分を担当する。最小限のJSフレームワーク

• Strada : Webとネイティブをつなぐブリッジ。来年発表予定

[sduck4]

HTMLを転送するという概念は、PJAXを思い出しますね。

[gera1d]

strada は、https://m.signalvnoise.com/basecamp-3-for-ios-hybrid-architecture/ で語られていた内容がコードとして形になったものではないかと思います。

[outsideris]

StimulusももともとBasecampで使われていたjsフレームワークですが、Turboもリポジトリを見るとTurbolinkをTurboに変えたものなんですね。Stradaは公開されていないのでまだよく分かりませんが、既存技術をまとめてHotwireというアプローチに使ったようですね。

[colus001]

Phoenix LiveView もそうですが、最近はこういう方式の試みが多く見られる気がします。フロントエンド疲れが頂点に達したのではないでしょうか？

[gera1d]

もしかして屋根に登るのが好きなブウンジュさん？

[heycalmdown]

面白いアイデアですね

[xguru]

Heyの技術スタックが公開されたとき https://ja.news.hada.io/topic?id=2355

フロントエンドにStimulus、Turbolinks以外にもαがあると言っていましたが、それがこのHotwireのようですね