SVELTE 3：ラジカルコンパイラベースのJavaScriptフレームワーク

Svelte 3：フロントエンド開発への新鮮なアプローチ

この記事では、編集プロセスを通じてそれ自体を区別するユニークなフロントエンドJavaScriptフレームワークであるSvelte 3を探ります。大規模なJavaScriptバンドルを出荷するReactのようなフレームワークとは異なり、Svelteはアプリケーションを大幅に小さく、最適化されたJavaScriptコードにコンパイルします。ビルドプロセス中に達成されたこの最適化により、より高速で効率的なアプリケーションが得られます。 また、Svelteは、データ管理とDOM操作に対する独特のアプローチも提供します。 実際のDOMを直接更新し、仮想DOMの必要性を排除し、パフォーマンスの向上につながります。 これは、その直感的なコンポーネントの作成と組み込みの反応状態と相まって、開発を楽しく効率的にします。 ベテランの反応やVUE開発者でさえ、探索する価値があると感じるでしょう。 その機能を実証するための簡単なアプリケーションを構築しましょう

svelteの重要な利点：

最適化されたjavaScript：

svelteコンパイルが最適化されたJavaScriptにコンパイルされ、Reactのようなフレームワークと比較してランタイムサイズを縮小します。

• 直接DOM操作：Svelteは実際のDOMを直接更新し、データ管理とDOM操作効率を高めます。
簡略化されたコンポーネント：
• コンポーネントの作成は、スコープ付きCSSと統合された反応状態で合理化されています。 ボイラープレートが少ない：
コンパイラアプローチはコードとボイラープレートを最小限に抑え、開発を加速します。
• 直感的な構文：反応性とコンポーネント通信は、最小限の構文で処理されます。
• 軽量で効率的：Svelteは、ReactやVueなどの重いフレームワークに代わる軽量の代替品を提供します。
• 始めましょう：
バンドルとインフラストラクチャの複雑さを回避するために、公式のSvelteチュートリアルに従います。 ノードとgitがインストールされていることを確認してください。次に、実行：
• これにより、Svelteテンプレートを
ディレクトリにクロームし、必要なツールを設定します。 その後、ディレクトリに移動して（

）、

を実行して依存関係をインストールします。最後に、ロールアップを使用して開発サーバーを起動します。 。

でアプリケーションにアクセスします

svelteコンポーネントの構築：

<code class="language-bash">npx degit sveltejs/template github-repository-searcher</code>

github-repository-searcherSVELTEコンポーネントはcd github-repository-searcherファイルにあります。 テンプレートは、3つのセクションに構造化されたnpm installを提供します：npm run dev

1. <code> <code>
{#each filteredRepos as repository}
• {repository.name} <code>{repository.url}
  {#each filteredReposとしてリポジトリ}
  {repository.name} <code> {repository.url}

  <code>Search {/それぞれ} <code>App.svelte repositories

  Import <code> search <code> into <code> app.svelteに <code>リポジトリの可用性に基づいて条件付きで使用します。

  反応性とフィルタリング：$:Search.svelte $：filteredRepossearch.svelteuserSearchTermの構文によって実証されています。 これにより、 usersearchterm <code>または repositoriesrepositoriesの変更がいつでも更新されることが保証されます。 機能またはイベントリスナーを使用した代替アプローチについても説明し、Svelteの反応性機能の利点を強調しています。

  プロダクションビルド：

  run <code> npm run build<p><code>npm run build生産対応バンドルを作成します。 結果のバンドルサイズは通常、Svelteの編集プロセスのために小さいです。

  結論：

  Svelteは、コードの効率とパフォーマンスを強調し、従来のフレームワークに魅力的な代替手段を提供します。その直感的な構文と組み込みの機能は、開発を簡素化するため、フロントエンド開発の強力な競争相手になります。
  SVELTE FAQ（簡潔なバージョン）：
  svelteとは何ですか？最適化されたコードへのJavaScriptフレームワークコンパイル、ランタイムから作業をシフトして時間を作成するために。 svelteは、React/vue？
  • svelteはコンポーネントをどのように処理しますか？コンポーネントはHTML/CSS/JSのような構文で記述され、効率的なJavaScriptにコンパイルされています。
  svelteは仮想domを使用しますか？
  • sveltekitとは？Svelteの上に完全なWebアプリケーションを構築するための高レベルのフレームワーク。
  • svelte？より小さなバンドルサイズ、より速いパフォーマンス、シンプルな構文、ボイラープレートの少ない。

以上がSVELTE 3：ラジカルコンパイラベースのJavaScriptフレームワークの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。