Svelte
少ないコードで記述できることおよび可読性を重視して設計されている.
記述量が多いことは,バグの温床である.
データバインディング的にDOMと変数を扱うことで,記述を直感的かつ簡潔なものにする.
仮想DOMによる計算のオーバーヘッドが無いと主張している.
状態が変わった際の仮想DOMの差分検出.
DOMを全探索的に見て差分を確認するような処理が行われているが,差分に該当する部分のみを見るような仕組みの方が速い.
Svelteではビルド時に,どこの状態が変わるとどこのレンダリングに影響するかを判別している.
.svelteの1ファイルにJavaScript,CSS,HTMLをひとまとめにして記述する.
トランジションやアニメーションの機能に力を入れている.
ビルドツール
webpack,RollUp,Viteなどと連携している.
Reactivityという仕組みがある.
変数への代入などの処理を記述すると,Svelte側がその処理が実行された際にDOMのレンダリングが必要であるという情報をあらかじめ紐付ける.
Reactive Declarationsによって,変数に依存する変数についてもレンダリングの紐付けを行える.
$: doubled = count * 2;のように$を用いて宣言する.
Propsの受け口としてexport let value;のように宣言する.
JavaScriptのexportとは異なる動作.
asRagi.icon公式ドキュメントにも「慣れてください」と書いてあって渋い.