Clever Geek Handbook

Svelte 3：反応性の再考

先日、SvelteJSコミュニティで大きなイベントが発生しました。実際、最新のフロントエンド全体である待望のSvelte 3リリースでは、どうやらそうです。 そのため、Svelteによる記事の翻訳と、YGLF 2019での彼のレポートからの優れたビデオがカットされています。







最後に彼はここにいます



Svelte 3の安定したリリースを発表できるので、数か月後には数か月後には月が過ぎました。この本当に大きなリリースは、ベータテスターを含むSvelteコミュニティの多くの人々の何百時間もの作業の結果です。貴重なレビューにより、この旅のあらゆる段階でフレームワークの設計を磨くことができました。



気に入っていただけると思います。



Svelteとは何ですか？



Svelteは、ReactまたはVueに似たコンポーネントフレームワークですが、重要な違いがあります。 従来のフレームワークでは、 宣言型の状態駆動型コードを作成できますが、罰なしではありません：ブラウザは、フレームをレンダリングするための既存の予算を消費し、コレクターに責任を追加する仮想DOM diffingなどの手法を使用して、これらの宣言型構造をDOM操作に変換するための追加作業を行う必要がありますゴミ。



代わりに、Svelte はビルド時に機能し、コンポーネントを非常に効率的な命令型コードに変換し、DOMを外科的精度で更新します。 その結果、優れたパフォーマンス特性を備えた意欲的なアプリケーションを作成できます。



Svelteの最初のバージョンは、特別に設計されたコンパイラが信頼性の高いコードを生成し、優れたユーザーエクスペリエンスを提供できるという仮説のテスト専用でした。 2番目のバージョンは、いくつかのことを順番にもたらす小さな改善に専念しました。



Svelte 3はすでに重要な改訂版です。 過去5、6か月にわたって、 開発者のユーザーエクスペリエンスに特に注意を払ってきました 。 これで、定型コードの量が他のどこよりも大幅に少ないコンポーネントを作成できます。 新しいチュートリアルを試して、その意味を確認してください。他のフレームワークに既に慣れている場合は、きっと驚くことでしょう。



この機会を実現するために、私たちは最初に、最新のUIフレームワークの背後にある概念である反応性を再考する必要がありました。





You Gotta Love Frontend Code Camp 2019での反応性レポートの再定義



反応性を言語に移行する



Svelteの以前のバージョンでは、 this.setメソッドを呼び出して、状態の一部が変更されたことをコンピューターに伝える必要がありました。 



const { count } = this.get();
this.set({
  count: count + 1
});


. , this.set this.setState, ( ) React: 



const { count } = this.state;
this.setState({
  count: count + 1
});


( — React ), .



React, -. , , , . , . , embedded-, , .



, API … , API — API. . count , , : 



count += 1;


, , : 



count += 1; $$invalidate('count', count);


, . .





. Svelte Achim Vedam, -, svelte.technology svelte.dev.



« UI » « web-». Svelte — , , , , , , , . .



2



Svelte 2, , . svelte-upgrade, , . , .



: , , Svelte 3, , .





, . , , . Sapper, Next.js, Svelte 3. Svelte Native, Android iOS Svelte, .



, , , devtools . ., , . TypeScript.



, , Svelte 3 — -. , , . , Discord , Telegram GitHub — , .



P/S —



Svelte 3.

Svelte 3.

Svelte 3.



AlexxNB! - !


More articles:


All Articles