Hotwire (Turbo)の新機能Morphingについてのメモです。
下記のページで紹介されていたサンプルコードを動かしてみました。
37signals Dev — Demo of page refreshes with morphing
How page refreshes work, and how they compare to stream actions.
環境は次のようになります。
macOS Sonoma
Homebrew
rbenv
Redis 7.2.4
Ruby 3.3.0-preview2
Rails 7.1.3.2
turbo-rails 2.0.0.pre.beta.1
Action Cable (WebSocket)が使うRedisをインストールします。
brew install redis
Redisを起動します。
/usr/local/opt/redis/bin/redis-server /usr/local/etc/redis.conf
Rubyをインストールします。
rbenv install 3.3.0-preview2
ソースコードをクローンします。
git clone https://github.com/basecamp/turbo-8-morphing-demo.git
cd turbo-8-morphing-demo
Morphingのブランチを選びます。
別ブランチにある従来のストリームでの実装と比較できます。
git checkout page-refreshes
Railsをセットアップします。
bin/setup
Railsサーバを起動します。
bin/rails server
ページを開きます。
http://127.0.0.1:3000
参照
37signals Dev — Turbo 8 released
Morphing for smooth page refreshes
37signals Dev — A happier happy path in Turbo with morphing
Jorge Manrubia – Making a difference with Turbo – Rails World 2023
Turbo Handbook
Smooth page refreshes with morphing
37signals Dev — Building Basecamp project stacks with Hotwire
Progressive Enhancement
▼この記事がいいね！と思ったらブックマークお願いします
