💭

仮想DOMがオーバーヘッドになる未来は近い

2022/12/29に公開約1,500字

かなり攻めた内容ですが許して下さい :D

Rich Harrisさんが2018年、Svelteのブログで「仮想DOMは純粋なオーバーヘッドである」と発言してからもう4年ほど立ちました。(私はそんなに長くプログラミングをやっていませんが)

当時では仮想DOMがオーバーヘッドだと考える開発者はとても少数派だったのではないかと思いますが、2022年も終わろうとしている現在、もう仮想DOMは必要ないという事実が明らかになってきました。

SvelteやSolidのようなコンパイラ(フレームワーク)の登場

最初にバランスブレイカーとなったのはSvelteやSolidといった、「コンパイラのような」フレームワークでした。
それまでの例えばReactのようなフレームワークでは簡単に言えば拡張構文をもとの構文に戻すだけで、フレームワーク自体の処理はブラウザ側に任せていました(そのせいでフレームワーク自体のサイズが無視できないという問題も生まれました)が、SvelteやSolidではライブラリのコードは殆どない状態にコンパイルするためサイズも軽減されスピードも早くなりました。この頃から「仮想DOMの必要性」や性能についてのそれまでの常識が少しずつ崩れ始めました。

Web Componentの登場

ブラウザ側のこのネイティブな実装は一部の開発者を大きく震わせました。
Web ComponentのShadow DOMを利用することでDOMを分離しカプセル化が可能になりました。こうすることで仮想DOMで差分を検出したりする必要もなく、大規模な開発にも対応できるWebアプリを作れるようになりました。
ですが、customElementRegistryはインスタンス化出来ないなど、コンポーネントの依存関係の解決にはまだまだ問題があります。

[Tips] htmの登場

これは自分のフレームワーク開発の話ですので読み飛ばして頂いて構いません。

htmという、Tagged Template Literalを利用したバニラJavaScript用のJSXの代替バージョンが作られました。これにより、customElementRegistryがインスタンス化出来なくてもJSXのように依存関係を解決できるようになりました。

SSRは本当に必要か?

googlebotがJavaScriptに対応し、SEO面ではSSRは一切必要ないものになりました。そこで残りはパフォーマンスですが、Web ComponentのようなバニラJavaScript、SvelteやSolidのようなコンパイラを使えばパフォーマンスは(超大規模プロジェクト以外)全然問題ないものになりました。ですが世の中のモダンなWebアプリはSSRやSSGを多用しています。本当にSSRは必要なのでしょうか?

最後に

このように少し過激な内容になりましたが、皆さんの意見も聞きたいです。なにかありましたらコメントにお願いします。

宣伝になりますが、個人開発しているWeb Componentのフレームワークtmlドキュメントを公開しました。ぜひ見てみて下さい。

Discussion

ログインするとコメントできます