かなり前だけど社内で最強クラスのエンジニアが紹介していたのを聞いて面白そうだったので。
SSRは試してません。
Svelteとは
Rich Harrisにより開発されたJavaScript Webフレームワーク。
ReactやVueなどはランタイムライブラリで仮想DOMを扱うが、Svelteを利用したアプリケーションは直接DOMを操作するコードに「コンパイル」される。
コンポーネントはVueのようにSFC（Single File Component）で構成する（拡張子は.svelte）。
Vueと異なり<template>タグではなくSFC内のトップレベルにHTMLを記述する。
TypeScriptもサポート。
Svelteいいね
- 単にコンポーネント内の変数に代入するだけでDOMが更新される
useStateみたいなものはいらない - ある値に依存して更新が必要な情報（いわゆるcomputed property）も
$を用いて
$: doubled = count * 2
のように書くだけでcountが更新されるとdoubled（を参照しているDOM）も更新される - ストアが用意されている
状態管理に何を使おうか悩む必要なし
readable/writableがある - イベントハンドラをインラインで記述してもパフォーマンス上のペナルティなし
バンザイ - 公式チュートリアルが秀逸
動くチュートリアルで分かりやすく学べる - 日本語ドキュメントが充実
英語でも読めるけど母国語の方が圧倒的に速い。有志のみなさん、ありがとう
Svelteつらいね
- 始め方が２通りある
現時点で、sveltejs/templateをdegitする方法とSvelteKitを使う方法とがあり、どっちにしたらいいのか迷う
進化途中なので仕方ないかも - これと関連するのかも知れないが、ライブラリの導入が手間取る
UIライブラリはあれこれやって断念
TailwindCSS入れるのにも苦労した - ちょっとしたコンポーネントもSFC作る必要がある
リスト項目とかテストで使うとか、ちょっとここに作りたいねん、ができない
React、関数コンポーネントという選択は大正解やで・・・
まとめ
速いのは正義。バンドルサイズが小さくて動作が速いSvelteは強いと思います。
既に広く利用されているようなので上に挙げたようなツラみも、自分が知らないだけでどうにかなるものかも知れません。
次は2021 State of JSでSvelteより満足度の高かったSolidに入門してみようかな。