Svelte
サイバネティクスで強化された...?
また、私たちはキャッチフレーズを「魔法のように消える UI フレームワーク」から「サイバネティックに強化されたウェブアプリ」に変更しました。Svelte には様々な側面があります。-- 卓越した性能、小さなバンドル、アクセシビリティ、組み込みのスタイルカプセル化、宣言的な遷移、使いやすさ、コンパイラであることなど -- その中のどれか1つに焦点を当てることは、他のものに不公平感を与えるような気がします。「Cybernetically enhanced」は、私たちのツールは私たち自身の知能の拡張として機能するべきだという Svelte の包括的な哲学を思い起こさせるようにデザインされています -- 願わくばレトロでウィリアム・ギブソン風のひねりを加えて。
CYBERNETICALLY
人工頭脳学的に(cyberneticの副詞形)
公式には３つの柱が書かれている
Write less code
React と Vue で冗長に書かれているコードが、Svelte だと短く書けるよと紹介されている
No Virtual DOM
Svelteは仮想DOMによる差分検出のようなテクニックを使用する代わりに、 アプリケーションの状態が変化したときにDOMを外科的に更新するコードを生成します。 仮想DOMは早いという神話があるが、コストはゼロではないよ
では、なぜフレームワークは仮想DOMを使うのか？(Why do frameworks use the virtual DOM then?)
重要なのは、仮想DOMは機能ではないということです。それは目的を達成するための手段であり、その目的とは宣言的で状態駆動型のUI開発です。仮想DOMは、状態遷移を考えることなくアプリケーションを開発できるようにし、一般的には十分なパフォーマンスを得られるという点で価値があります。つまり、バグを減らし、退屈な作業ではなく創造的な作業に多くの時間を費やすことができるようになります。
しかし、仮想DOMを使用せずに同様のプログラミングモデルを実現できることがわかりました — つまりSvelteの登場です。
Svelte は仮想DOMを捨てることでどんなメリットを受けて、どんなデメリットを受け入れているんだろうか...?
Truly reactive
それは フック の登場ですべてが変わりました。多くのフレームワークがフックの独自の実装を実験し始めましたが、私たちはすぐにそれは私たちが望んでいる方向ではないと結論付けました。フックには魅力的な特性がありますが、不自然なコードを含んでいたり、ガベージコレクタのために不必要な作業が発生したりします。組込みデバイスやアニメーションを多用するインタラクティブな環境で使用されているフレームワークでは、それは良いことではありません。 いくつかの count 値の更新 -- そしてそれに依存するすべてのもの -- は、このように簡単であるべきです。
count += 1;
自分もこれが良いなと思うkidooom.icon
React や Vue などのフレームワークはアプリケーションの実行中にユーザーのブラウザーで作業の大半を行いますが、Svelte はその作業をアプリケーションのビルド時にのみ発生するコンパイルの段階で行うことにより、高度に最適化されたバニラ JavaScript を生成します。
コンパイル時に色々やってくれて、バニラJSを生成している
小さなアプリで比較
ビルド時間
Vue: 6461ms
Svelte: 840ms
8分の1
コード量
今回の例だとほぼ差がない
インストールから基本的な機能の説明
「いまフロントエンドやるなら最初に覚えるべき！」は、個人的にはこっち。
書くべきコードが少ないってのが、本当に良い。もちろん最初は、魔法が効きすぎてて心配・・・って印象は正直あったけど。
オススメされている