morphingの話
誰？
好きなもの
Django : 寄付してTシャツもらってます
注意
さっき発表することを決めました（まぁしさんありがとう）
雑に作ったのですみません⋯
今日の話
Vue.jsやReact.jsに馴染みのある皆さんに、バックエンドフレームワーク側はどう立ち向かっているかの話をします
キーワードは、morphing（モーフィング）です
morphing（モーフィング） とは
モーフィング（morphing）とは、映画やアニメーションの中で使用されるSFXの1つで、コンピュータグラフィックスの手法の1つでもある。
ある物体から別の物体へと自然に変形する映像をみせる。
HTMLでのモーフィング
変更対象のHTMLと変更したいHTMLの差分を有無を把握して、そこだけ反映する
なぜモーフィングが流行ってるのか
RailsやDjangoやLaravel（やPhoenix）の流行りは 部分HTMLをサーバーから返す
Rails （Turbo）
Django（ htmx ）
Phoenix（ Phoenix Liveview）
Laravel（Livewire）
ただそのまま使うと、ごそっとHTMLが変わってしまうのでユーザ体験が良くない
フォームのフォーカスが取れたり、スクロール位置がリセットされたり⋯
モーフィングで状態を維持しつつ、変化を与える
Vueみたいになれる⋯！
モーフィングをするライブラリを紹介します
idiomorph
新しく差し込むDOMと差し込まれるDOMの差分をみて、必要な分だけ置き換える、みたいな感じ
なのでユーザからは滑らかに反映されているように見える
htmxの作者が作成
Hotwire/Turboのバージョン8から搭載
htmx作者「難しいのでhtmxには入れない」
現状、
moveBefore API
簡単なデモ
サーバーサイドでHTML返すのも面白いよ！
movebefore apiがchromeにきた！！！
おしまい
デモ失敗したとき用
https://github.com/bigskysoftware/Idiomorph/raw/main/test/demo/rickroll-idiomorph.gif