piacere です、ご覧いただいてありがとございます
下記コラムで、Rails 7に標準搭載されたHotWireを試しましたが、Elixir/PhoniexのLiveViewと比較してみたいと思います
方式
a)部分ページロード/レンダリング
LiveView
- MorphJSによるDOMの部分更新
- LiveView StreamsによるDOMの部分追加/更新/削除
Rails
- Turbo Driveによるリンク操作のインターセプトとfetchへの置換、bodyタグ内のみの置換
- Turbo FramesによるDOMの部分更新
- Turbo StreamsによるDOMの部分追加/更新/削除
b)サーバサイドのデータ更新をフロントに反映
LiveView
WebSocketによるPub/sub
Rails
WebSocket(Turbo Stream/Action Cable)によるPub/Sub
c)JavaScript相互運用
LiveView
- phx-hookによるLiveViewとの相互通信
- 相互通信が不要ならheexに直接書くことも可能
- Stimulusも使えます
Rails
- StimulusによるTurboの補完
- 相互通信が不要ならerbに直接書くことも可能
d)透過性
LiveView
非透過(SSRでは無くLiveViewでのハンドリング)
Rails
透過(SSRをTruboによって置換してハンドリング)
実装
① リアルタイムフロントやSPA、CRUDの作成
どちらもScaffoldでカンタンに生成できます
LiveView
mix phx.gen.live Quotes Quote quotes name:string
mix ecto.migrate
Rails
下記だと、コントローラやビュー、フォームのボイラープレート込で生成されます
bin/rails g scaffold Quote quotes name:string
下記だとボイラープレートは空です
bin/rails generate model Quote name:string
bin/rails db:migrate
bin/rails generate controller Quotes
② コントローラの追加
LiveView
上記Scaffoldで自動追加されます
Rails
g scaffold
だと書き換えが必要です
g scaffold
で無い場合は、実装を手動で行わなければなりません
③ ビューの追加
LiveView
上記Scaffoldで自動追加されます
Rails
g scaffold
だと自動追加されます
g scaffold
で無い場合は、実装を手動で行わなければなりません
④ フォーム追加
LiveView
上記Scaffoldで自動追加されます
Rails
g scaffold
だと自動追加されます
g scaffold
で無い場合は、下記コマンドが必要です
bin/rails generate simple_form:install
⑤ router追加
LiveView
下記実装が必要です(Phoenixもresourcesは使えるけどSSR専用のためLiveView向けには使えない)
defmodule BasicWeb.Router do
…
scope "/", BasicWeb do
pipe_through :browser
+ live "/quotes", QuoteLive.Index, :index
+ live "/quotes/new", QuoteLive.Index, :new
+ live "/quotes/:id/edit", QuoteLive.Index, :edit
+
+ live "/quotes/:id", QuoteLive.Show, :show
+ live "/quotes/:id/show/edit", QuoteLive.Show, :edit
get "/", PageController, :home
end
end
Rails
下記実装が必要です
Rails.application.routes.draw do
…
# Defines the root path route ("/")
# root "posts#index"
+ Rails.application.routes.draw do
+ resources :quotes
+ end
end
終わりに
方式は、ほぼ同じメカニズムですが、LiveViewの方がよりキメ細かい制御や、ユーザー負担の少ない実装が可能です