Svelte：フロントエンドフレームワークの風(fēng)景の新星

Svelteは人気を急速に獲得し、「ちょうど別のフロントエンドフレームワーク」のステータスを超えています。 その稱賛には、「ブレークスルーオブザイヤー」（JS 2019の狀態(tài)）、最高の満足度評価（JS 2020の狀態(tài)）、および最も愛されているWebフレームワーク（Stack Overflow 2021）のタイトルが含まれます。 この成功は、小さなバンドルサイズ、優(yōu)れたパフォーマンス、ユーザーフレンドリーなデザインの魅力的なブレンドに由來しています。 その中心的な強みを超えて、Svelteは、ビルトイン州の管理、移行、アニメーションなどの貴重な機能を提供します。このチュートリアルでは、Svelteがこの効率をどのように達成するかを調(diào)査します。その後のチュートリアルは、Svelteを使用したアプリケーションの構(gòu)築をより深く掘り下げます。 の起源

Svelteの主流の採用は2020年代初頭に始まりましたが、その起源は最初のGithubコミットで2016年後半にさかのぼります。 Rich Harris（ロールアップバンドラーでも知られる）によって作成されたSvelteは、Guardian 簡単な書籍リストアプリケーションの構(gòu)築

Svelteの機能を説明するために、簡単な本リストアプリケーションを作成しましょう。 最終的なアプリケーションは、以下の畫像に似ています：

公式のSvelteプロジェクトテンプレートから始めます（代替品には、より複雑なアプリケーション用のViteベースのテンプレートまたはSveltekitが含まれます）。必要なパッケージをインストールした後（

）、基本的なHTML構(gòu)造を作成するために

を変更します：

このコードは、上位レベルで直接記述されており、SvelteのHTML-SuperSet Syntaxをレバレッジします。 次に、靜的ブックリストとループを追加してレンダリングします。

<h4>Add Book</h4>
<input type="text">
<h4>My Books</h4>
<ul>
  <li>A book</li>
</ul>

</pre> <label> Add Book <input type="text" bind:value={newBook} on:keydown={addBook}> </label> <h4 id="My-Books">My Books</h4> <ul> {#each books as book} <li>{book}</li> {/each} </ul>

bind:value={newBook}newBook入力とon:keydown={addBook}変數(shù)の間に雙方向の結(jié)合を作成します。 addBookイベントリスナーを追加します。 books関數(shù)は、Enterが押されたときに

配列を更新します。 Svelteの反応性は、コンポーネントを自動的にレンダーします

SVELTEのコンピレーションプロセス

Svelteのパフォーマンスと小さなバンドルサイズは、コンパイラの性質(zhì)によるものです。 ファイルを前処理し、それらをDOMを外科的に更新する最適化されたJavaScriptに変換します。 これにより、大規(guī)模なランタイムの必要性が排除され、効率的なレンダーが可能になります。 .svelteスタイリングとトランジションの追加

CSSでUIを強化しましょう：

デフォルトでは、

Svelte Scopesスタイル。 最後に、フェードイントランジションを追加しましょう：

<??>

<label>
  Add Book
</label>
<h4>My Books</h4>
<ul>
  {#each books as book}
    <li>{book}</li>
  {/each}
</ul>

スタイリングやトランジションを含む完全なコードを以下に示します。

<style>
  input {
    padding: 5px 10px;
  }
  li {
    list-style: none;
  }
  ul {
    padding: 5px 0;
  }
</style>

これにより、機能的で視覚的に魅力的な本リストアプリケーションが得られます。 （最終アプリケーションの畫像はこちらに移動します：

）

<??>

<ul>
  {#each books as book}
    <li transition:fade>{book}</li>
  {/each}
</ul>

建築上の考慮事項と將來の強化

このチュートリアルは、基本的な紹介を提供します。 より大きなアプリケーションでは、狀態(tài)管理、複數(shù)のコンポーネント、およびコンポーネント相互作用メカニズムが必要です。 Svelteはこれらのソリューションを提供しています。これは後続のチュートリアルで調(diào)査されます。

次のプロジェクトに適していますか？

Svelteのアクティブなメンテナンス、堅牢なツール、安定した機能、成長するエコシステム、およびSveltekitの可用性により、さまざまなプロジェクトの強力な競爭相手になります。 コミュニティは繁栄しており、フレームワークは減速する兆候を示していません。

次のステップ

これは6部構(gòu)成のシリーズの最初の部分です。 將來のパーツでは、テンプレートの構(gòu)文、リアクティブステートメント、ストア、コンポーネントの相互作用、テストをカバーします。 完全なシリーズはAmazonでも利用できます

以上がSvelteを使用して読書リストを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。