Turbo
というか肝
JSをほぼ使わずにページSPA的なのを書ける
ロジックは主にサーバーサイドにあって、HTMLを配信する
クライアントサイドにロジックを集中させてJSONをやり取りしてゴニョゴニョするのとは別のアプローチ
ページ遷移するやつ
ブラウザのページ遷移の代わりに、History APIでのURL変更とajaxでのHTMLのfetchと描画(描き変え)を行う リンクでもフォームでも割って入る
client-side routerとか難しいstate管理とか要らんのだ
ページ内の枠内だけ描き変えるやつ
<turbo-frame id='hogehoge'>を使う。turbo-railsを使ってる場合はturbo_frame_tagが使える HTMLレスポンスとidが一致するframeだけが描き変えられる
使い所の例
ページネーション
ソート
フィルタリング
内部的な処理の流れ(turbo-railsの場合?)
クライアントサイドで<turbo-frame>内のリンクをクリックすると、TurboがリクエストをインターセプトしてリクエストヘッダーにTurbo-Frame: hogehogeを付与する
サーバーサイドではリクエストヘッダーにTurbo-Frameがあると、メインテンプレートだけをレンダリングしてレスポンスする
レイアウトテンプレートは端折られる
クライアントサイドではレスポンスのうち<turbo-frame>のidが一致する部分だけを置換し、他は捨てる
turbo-frameの外側からであっても、data-turbo-frameattributeを付けることでTurbo Frameリクエストにできる
Turbo Frameが同期的なインタラクションの結果でどうこうするのに対して、Turbo Streamは"メールが届く"みたいないわば勝手に配信されるレスポンスに対してどうこうする
<turbo-stream action=''>でactionを指定する
append, prepend, replace, update, remove, before, afterなど
?
ref.