Webフロントエンド

より軽く、より速く-Svelteフレームワークのガイド

Webアプリケーションは日々人気が高まっています。それらは、そのシンプルさ、スピード、クロスプラットフォームの可用性のために人々が選択する成長する世界です。シングルページアプリケーション（SPA）は、このプロセスに大きな役割を果たしています。 Angular、Vue.js、Reactなどのフレームワークは、開発者が短期間で最高のユーザーエクスペリエンスを提供し、コードをサポートおよび拡張できるようにするのに役立ちます。これらのツールは、この分野で長い間最も人気があり、新しく作成されたパッケージに比べて多くの利点があります。 SPAの世界では寡占のように感じました。ただし、この市場をターゲットとする前向きな開発者のグループは、真剣な競争相手であるSvelteとともに参入する可能性があります。

Svelteは、ユーザーインターフェイスを構築するための新しいアプローチです。共通のログインフォームを作成して、何がこれほど新鮮なのかを調べてみましょう。

建築

Svelteは、他のどのライブラリよりも高速になるように設計されています。これは、仮想DOMを構築するためのフレームワークをロードするステップをシフトすることで達成されます。実行プロセス中にツールを使用する代わりに、ビルド段階でバニラJSにコンパイルされるため、アプリケーションを起動するために依存関係は必要ありません。

Svelte	その他のSPAライブラリ（React、Vue.js、Angularなど）
1.ウェブサイトを開く 2.純粋なJSを使用してページをレンダリングします	1.ウェブサイトを開く 2.仮想DOMを構築するためのコードがロードされるまで待ちます 3.ライブラリを使用してページをレンダリングします

上記の表は、Svelteがスタートアップパフォーマンスで絶対的な勝者である理由を説明しています。これは、いかなる種類の最適化によっても得られませんが、サイドコンパイラの代わりに利用可能なブラウザのJavaScriptコンパイラを使用することによって得られます。

インストール

Svelteのインストールは非常に簡単で、非常に快適に使用できます。最初のステップは、プロジェクトのテンプレートをダウンロードすることです。

SQL Server2008でのパフォーマンスチューニング

npx degit sveltejs/template svelte-login-form

上記のコマンドを完了すると、Svelteプロジェクトテンプレートが作成されます。今のところ空で、必要なNPMパッケージはまだインストールされていません。それを修正しましょう。

cd svelte-login-form npm install

これで、次のコマンドを使用してアプリケーションを起動する準備が整いました。

npm run dev

構造

Svelteコンポーネントには、次のセクションが含まれている場合があります。

脚本
スタイル
テンプレート

src/App.svelteの例を見てみましょうファイル。

 export let name; h1 { color: purple; }  Email  [email protected] ' bind:value={email} /> Password {#if isLoading}Logging in...{:else}Log in {/if} {#if Object.keys(errors).length > 0}  {#each Object.keys(errors) as field} {field}: {errors[field]}
 {/each} 
 {/if} {/if}

プロパティ付きの要約

内部コンポーネントの状態に関するすべてを整理しました。次に、プロパティまたは「小道具」と呼ばれる外部の依存関係を確認します。小道具は、コンポーネントに渡される入力または引数であり、コンポーネントに何を表示するか、またはコンポーネントがどのように動作するかを記述します。

プロパティの宣言は、キーワードexportを除いて、状態に似ています。

 export let answer; The answer is {answer}

import Nested from './Nested.svelte';

プロパティがすべてです。宣言して合格-小道具を使用するために知っておく必要があるすべて。

しかし、これらのプロパティはログインフォームコンポーネントにどのように適用されますか？小道具は、送信関数をプロパティに抽出することで、ログインフォームをより一般的にすることができます。これにより、このコンポーネントを必要な送信アクション（テストサーバーへのリクエスト、実際のサーバーへのリクエストなど）で使用できるようになります。この小道具はsubmitと呼ばれます送信アクションが成功した場合は解決されたpromiseを返し、エラーが発生した場合は拒否されたpromiseを返す関数になります。上記の例で小道具を宣言しましょう。

export let submit;

ログインフォーム内の送信ハンドラーも、新しいsubmitを使用するように編集する必要があります。プロパティ。

const handleSubmit = () => { errors = {}; if (email.length === 0) { errors.email = 'Field should not be empty'; } if (password.length === 0) { errors.password = 'Field should not be empty'; } if (Object.keys(errors).length === 0) { isLoading = true; submit({ email, password }) .then(() => { isSuccess = true; isLoading = false; }) .catch(err => { errors.server = err; isLoading = false; }); } };

コンポーネントは準備ができているようです。ただし、フォームに戻って送信しようとすると、ボタンの状態が読み込みから変更されていないことがわかります。また、コンソールには例外があります：Uncaught TypeError: submit is not a function。もちろん、私たちは小道具を宣言しましたが、それを渡すのを忘れました。アプリコンポーネントで関数を宣言し、ログインフォームに渡します。

メモリリークをテストする方法

const submit = ({ email, password }) => new Promise((resolve, reject) => setTimeout(resolve, 1000)); user

これで、フォームは意図したとおりに機能しています。エラーを表示し、ログインが成功したかどうかをユーザーに通知することができます。

アプリケーションを構築するために必要なすべてがリストされているようです。プロパティと内部状態があれば、準備は完了です。しかし、それは部分的にしか真実ではありません。これらの2つの一般的なポイントにより、複雑度の高いSPAを設計できます。ただし、さまざまなコンポーネント間でデータを共有しようとすると、非常に困難になります。

最も簡単な例は、グローバルにアクセスできるuserContext.jsです。変数。多くのコンポーネントは、ユーザーの役割、年齢、ステータスなどに応じて、ユーザーに関連する動作を変更する必要があります。ただし、小道具を使用してアプリ内の各コンポーネントにユーザーを渡すことで、自分自身を繰り返すことはできません。

サーバーとしてラズベリーパイを使用する

Svelteにはこれに対する解決策があります：コンテキストAPI 。

コンテキストAPIは、コンポーネントがデータを渡したり、小道具として機能したり、多くのイベントをディスパッチしたりすることなく、相互に「対話」するためのメカニズムを提供します。これは高度な機能ですが、便利な機能です。

設計しているログインフォームにユーザーコンテキストを追加しましょう。ファイルを作成するsrc export const key = 'userContext'; export const initialValue = null; の内部次の内容のフォルダ：

key

initialValueアプリケーションには、アクセス可能な状態を維持する必要のあるさまざまなコンテキストが無制限に存在する可能性があるため、はコンテキストの一意の識別子です。 App.svelteは、設定される前のコンテキストの単なるデフォルト値です。

次のステップは、アプリケーションにコンテキストを追加することです。 import { onMount, setContext } from 'svelte'; import { key as userContextKey, initialValue as userContextInitialValue } from './userContext'; に移動しますファイルを作成し、2つのインポートステートメントを追加します。

svelte

上記のコードを見ると、onMountから何をインポートしているのか不思議に思うかもしれません。パッケージ。 setContextは、引数としてコールバック関数を必要とするヘルパー関数です。このコールバックは、現在のコンポーネントがマウントされているとき（コンポーネントのロードの開始時）に実行されます。 onMountコンテキストのセッター関数です。コンテキストへのキーと引数としての新しい値が必要です。

onMount(() => { setContext(userContextKey, userContextInitialValue); }); を使用しましょうコンテキストのデフォルト値を設定する関数：

submit

そしてconst submit = ({ email, password }) => new Promise((resolve, reject) => { setTimeout(() => { setContext(userContextKey, { name: 'Foo', lastName: 'Bar', email: ' [email protected] ' }); resolve(); }, 1000); }); を変更しますユーザーコンテキストを設定する関数：

getContext

それでおしまい。送信が成功すると、ユーザーコンテキストが、コンテキストゲッターによってアクセスできる偽のユーザーオブジェクトに変更されます import { getContext } from 'svelte'; import { key as userContextKey } from './userContext'; const user = getContext(key); ：

teimurjan/svelte-login-form