ブロックの新しいフレームワーク、Svelteに精通する

何年もの間、Vue、Angular、およびReactは、フロントエンドコンポーネントフレームワークの景観を支配していました。 GoogleとFacebookは独自のソリューションを提供していますが、VUE（複数のスポンサーを備えて、単一編集制御を回避する）のようなフレームワークのオープンソースの精神が大きな魅力を持っています。オープンMITライセンスに対するVueのコミットメントを共有する新星であるSvelteを入力してください。

以前はCSS-Tricks（特にそのコンポーネントベースのCSSに関するOllie Williamsの洞察に富んだ記事）で紹介されていたSvelteは、綿密な調査を必要としています。この記事では、そのユニークな機能、他のフレームワークとの差別化、および実用的な実装について説明します。

Svelteの独特のアプローチ

「Svelteは、生産的に学習および使用するための最も簡単なJavaScriptコンポーネントライブラリでした。」

- Jeff Delaney、Svelte Realtime Todo Firebaseのリスト

Svelteは、React、Angular、Vueのように、JavaScriptコンポーネントライブラリです。ただし、そのコア差別化要因は次のとおりです。

1. 先行編集： Svelteはコンパイラとして機能し、ハイブリッドHTML、JavaScript、およびCSSコードを最適化されたJavaScript、HTML、およびCSSファイルに変換します。このプレコンパイルは、bytecodeまたはtypescript to javascriptに類似していますが、3つの言語すべてを網羅しているため、ランタイムからの計算をシフトすることにより、柔軟性とクライアント側のパフォーマンスが向上します。

2. 仮想DOMなし：従来のフレームワークは、効率的な更新のために、DOMのメモリレジデントコピーである仮想DOMを利用しています。 Svelteはこれをバイパスし、実際のDomを直接操作します。仮想Domsは最適化を提供しますが、Svelteのアプローチはビルド時間計算で、特により大きなアプリケーションでは、変更を加えて変更を加え、パフォーマンスの向上をもたらします。

3. 内蔵CSSスコープ： Svelteの統合スタイリングは、CSS-in-JSソリューションの複雑さを回避します。コンポーネントCSSを分離し、ビルドプロセス中にファイルを分離するように出力し、クリーンでカプセル化されたスタイルを促進します。 SASS以外のような前処理者にはプラグインが存在しますが、SvelteのネイティブCSS処理は非常に効率的で簡単です。

Svelte vs.その他のフレームワーク

Svelteのユニークなアーキテクチャは、パフォーマンスと開発者エクスペリエンスに影響を与えます。多くの比較が存在しますが、その速度は大きな利点です。ただし、速度は唯一のメトリックではありません。次の表は、より広範な比較を示します。

[Svelteを他のフレームワークと比較するテーブルは、元のテキストのテーブルの説明に基づいてここにあります。] Svelteの強い立場は、その相対的な若者と小さなコミュニティにもかかわらず、注目に値します。高い開発者の満足度は、「ビッグ3」フレームワークで観察された最近の減少とは対照的です。そのオープンソースの性質はかなりの資産です。

実用的なスベルトの例：交差点オブザーバー

Svelteの実用性を説明するために、パッシブスクロールイベントの問題を回避するためにしばしば推奨されるパフォーマンスを向上させる手法である交差点オブザーバーを実装しましょう。単純化された例については、SvelteのREPLを活用します。

基本的なSvelteプロジェクトをセットアップした後（Brevityのために詳細を省略）、次のコードを備えたsrc/componentsフォルダーにIntersectionObserver.svelteを作成します。

 「svelte」から{onmount}をインポートします。
Export let one = false;
トップ= 0をエクスポートします。
export let bottom = 0;
エクスポート左= 0;
エクスポート右= 0;
交差する= false;
コンテナを許可します。

onmount（（）=> {
    if（typeof intersectionobserver！== 'undefined'）{
      const rootmargin = `$ {bottom} px $ {left} px $ {top} px $ {right} px`;
      const observer = new IntersectionObserver（entries => {
        交差=エントリ[0] .ISINTERECTING;
        if（交差&& 1回）{
          Observer.unobserve（container）;
        }
        }、{
          rootmargin
      }）;
        Observer.observe（container）;
        return（）=> observer.unobserve（container）;
  }

  function handler（）{
    const bcr = container.getBoundingClientRect（）;
    交差=（
      （bcr.bottom Bottom）> 0 &&
      （bcr.right右）> 0 &&
      （bcr.top-トップ）<window.innerheight if window.removeeventlistener window.addeventlistener return> window.removeeventlistener（ 'scroll'、handler）;
  }）;

  div {
    幅：100％;
    高さ：100％;
  }
<div bind:this="{container}">
  <slot></slot>
</div></window.innerheight>

メインApp.svelteファイルで、コンポーネントをインポートして使用します。

 "./components/intersectionobserver.svelte"から交差点bserverをインポートします。

<intersectionobserver let:intersecting top="{400}">
  {#if交差}
    <div class="content">このメッセージは、交差するときに表示されます。</div>
  {：それ以外}
    <div class="content">このメッセージはそうでないことを示しています。</div>
  {/もし}
</intersectionobserver>

<style>
  /* ...styles as in original article... */
</style>

これは、 IntersectionObserverラッパーとしてどのように機能し、要素の交差に基づいてアクションをトリガーするかを示しています。 onMount関数は、ブラウザ固有のコード実行を保証します。 CSSを追加すると（元の記事に示す）、例が完成します。

結論

Svelteは、確立されたフレームワークに魅力的な代替品を提供します。そのパフォーマンス、使いやすさ、クリーンなアプローチにより、強力な候補になります。その小さなコミュニティは潜在的な課題を提示しますが、その成熟度とオープンソースの性質はリスクを緩和します。大規模な採用前に、非クリティカルなプロジェクトの実験が推奨されます。

Svelte Ecosystemには、Sapper（フルWebアプリケーション用）とSvelteネイティブ（モバイルアプリ用）が含まれており、機能が拡大しています。パフォーマンスの利点と開発者に優しいデザインについては、Svelteを検討してください。

以上がブロックの新しいフレームワーク、Svelteに精通するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。