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コンポーネントの構築：

npx degit sveltejs/template github-repository-searcher

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

1. <code></li> <style> /* CSS for styling the list */ </style> <div class="search-wrapper"> <form class="search-form"> <input type="text" bind:value={userSearchTerm} placeholder="search for repositories" /> </form> <ul> {#each filteredRepos as repository} <li> <strong>{repository.name}</strong> <code>{repository.url}
   {#each filteredReposとしてリポジトリ}
   {repository.name} {repository.url} <p> <code>Search {/それぞれ} App.svelte repositories

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

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

   プロダクションビルド：

   run 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 サイトの他の関連記事を参照してください。