なぜSvelteなの?

概要

最近はSvelteが人気だそうです公式サイトで開発者Rich Harrisの文章とチュートリアルを読んだところ、開発者の突破的な哲学とコードの作成方法が非常に満足していることが分かったので、開発者の文章をもとに、彼の論点を整理しました.
「スリム」という意味で、「ベルト」のように発音します.

仮想DOMは純粋にオーバーヘッドです

Svelteの基礎は仮想DOMを否定することから始まる.
ReactやVueなどの有名なフレームワークは、ページの違いの比較と更新にバーチャルDOMを使用します.
Reactの説明によれば、ページが新しい状態に入ると、新しいUIのDOMはすぐに現れるのではなくメモリに保持される.その後、再調整プロセスはRealtDOMライブラリによって完了する.この過程で,新しい状態の仮想DOMを実画面のDOMと比較する.ルートから異なるタイプの要素(<a><-><div>)を比較すると、すべて置換されます.同じならArtreviewなどを確認して修正するだけです.同じタイプの構成部品の場合、インスタンスは保持されますが、propsは更新されます.子供たちは再び処理された.
DOM演算自体は遅くありません(ノードの移動と削除はいくつかのポインタを交換するだけです).しかし、これをレンダリングするプロセスは非常に複雑で遅い.DOMが修正されレンダリングされると、このプロセスでは通常、「再生」または「再生」と呼ばれる操作が実行され、仮想DOMは既存のDOMの変更部分のみをチェックして適用し、これらのプロセスを削減します.
しかし、よく考えてみると、この仮想DOMの作成と比較は既存の動作に対するオーバーヘッドです.つまり、不要な動作は必ずアプリケーションのすべての動作で行う必要があります.しかし、このようなオーバーヘッドは多くの場合に役立ちます.これはReactの考えです(Reactドキュメントではヒューマニズム)がよく発生します.
すなわち,仮想DOMは十分に速く,従来の動作に比べて速くない.
Rich Harrisが根拠を提示したもう一つの理由は、ReactがshouldComponentUpdateまたはuseMemoのような最適化方法を有することである.本当の反応が何も気にしなくてもいいほど速いとすれば、なぜこのような側面効果に近い方法があるのだろうか.
仮想DOM自体は機能ではなく、宣言的な状態主導UIを作成するための手段である.Svelteはこのような手段で仮想DOMを使用しないそうです.

より少ないコードの作成

最近,コンポーネント開発をサポートするフレームワークやライブラリがWeb開発に積極的に応用されている.また、自然とブラウザにロードされるコードも大きくなります.Reactは,何もしないHello Worldappを構築しても,数十KBのソースファイルが生成されることを示している.
好奇心からcreate-react-appを試してみました.

gzipで圧縮した生成物は45 kb程度であった.现代のネットの速度から见れば、それほど大きくない.jpgを1つ取ればいいです。程度で解決できます.しかし、これはトラフィックに関する問題であり、実際にはjsエンジンがjsファイルの評価を全く考慮していない.多くの人が錯覚していますが、jsはインタラクティブな言語ではなく、コンパイル言語です.つまり、すべてのソースコードを1回ブラウズします.
これは、コードが長ければ長いほど、エンジンのコンパイルプロセスが長くなることを意味します.つまり、ソースファイルが大きくて、何のメリットもありません.
また、コードが長ければ長いほど、エラーが発生します.Rich Harris氏によると、ReactのコードはSvelteより40%長いという.

フレームなし

では、スビットはどのようにしてこれらの問題を解決し、利用可能な枠組みになったのだろうか.Svelte自身がコンパイラとしてこの問題を解決したのだ.Svelteは作成したコードを自分のコンパイラでバニラjsに変換します.これは多くの問題を解決することができる.
彼は仮想DOMを使用しないと言ったが、コンパイラはこのような変化のために直接コードを書き、banillajsに書く.すなわち,不要な仮想DOM比較演算は行わず,直接関係するDOM演算のみを行う.Rich Harrisはこの更新に対して외과적(surgically)を表す.これは外科手術のように精密な更新論理を意味するかもしれない.この更新もバニラjsにすぎず、reactのように追加のライブラリコードを追加する必要はありません.すなわち,仮想DOM演算は不要であり,追加のライブラリコードも不要である.コードは非常に軽くなり,論理がないため,組み込み機器のように低レベルの演算能力を有する機器でも問題ない.
Svelteコードの例

<script>
	let count = 0;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<style>
	button {
		color : red;
	}
</style>

ここでもう一つの利点は,バニラjsであり,他のコードとの相互運用(相互運用)も問題ないことである.ブラウザで返されるコードはjsです.

プロアクティブプログラミング

Rich Harris氏によると、Svelteによって優れた反応式プログラミングが実現できるという.アクティブなプログラム設計は、その名の通り、宣言的で、データの変化に伴ってプログラムが自然に影響を受けるプログラム設計モデルである.
次のコードがあるとします.ウィキペディアから取得します.

var b = 1;
var c = 2;
var a = b + c;
b = 10;
console.log(a); // 당연한 결과

// "$=" 연산자가 있다고 가정해보자. 
//이 연산자는 좌측에 선언된 변수가 우측 변수의 값들이 바뀔 때마다 재평가된다.
var b = 1
var c = 2
var a $= b + c
b = 10
console.log(a) // 12

表計算ドキュメントの動作と同じです.

Svelteは、以下の스프레드시트を導入し、これを実現するために反応宣言を行った.

<script>
	let count = 0;
    	//count가 바뀌면 $ 이후 내용이 재평가 된다.
	$: doubled = count * 2;

	function handleClick() {
		count += 1;
	}
</script>

<button on:click={handleClick}>
	Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

個人的にはこのプログラミング方式にはあまり詳しくありませんが、宣言式(declarative)、ステータスドライバ(state-driven)アプリケーションに適していると思います.

牛肉&仕上げ

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
  h1{
    color : red;
  }
</style>

Svelteの素子コードを見ると、$と<script>が一緒に存在することがわかります.しかも、面倒なタワーエレベーターもありません.もちろん、styleは、CSS Modulesのような固有idとともに素子に属する.そして、結構シンプルな構造だと思います.私はデータの双方向バインドと積極的なプログラミング要素が大好きです.
チュートリアルを見れば分かるようにトランザクションとアニメーションAPIは工夫を凝らした.素晴らしい効果がたくさん使えます.


この他、ReactのContextに対応するstoreも存在する.後発のショーなので、多くの機能を体現しています.
Svelteは現在、3つのバージョンをリリースしており、Next.jsやGatsbyなど、さまざまな開発キットやアプリケーションフレームワーク、ネイティブサポート(モバイル)などが用意されているそうです.ほとんどがアルファバージョンに入っており、すぐに生産環境でも多く見られます.
最も重要なのは、SWEETがページに投稿したスローガンが好きです.CYBERNETICALLYのような表現は初めて聞きました
CYBERNETICALLY ENHANCED WEB APPS
すぐに使いたいです.

references

Svelte公式ホームページ-https://svelte.dev/

積極的なプログラミング-https://en.wikipedia.org/wiki/Reactive_programming

Rich Harris-反応性(反応性)-https://www.youtube.com/watch?v=AdNJ3fydeao&ab_channel=YouGottaLoveFrontend

Svelte 3:反応性(反応性)(ハングルの翻訳)-https://svelte.dev/blog/svelte-3-rethinking-reactivityを再考

仮想DOMは完全にオーバーヘッド(ハングルの翻訳)-https://svelte.dev/blog/virtual-dom-is-pure-overhead

より少ないコードを書き込みます(ハングルの翻訳)-https://svelte.dev/blog/write-less-code

フレームのないフレーム:どうしてすぐに思わなかったのですか.( ハングルの翻訳 ) - https://svelte.dev/blog/frameworks-without-the-framework