React と Vue.js に挑戦する JavaScript フレームワーク

Svelte JavaScript フレームワークは、技術コミュニティで大きな関心を集めています。 2016 年に Rich Harris によって作成された Svelte は、次のような他のフレームワークの代替として位置付けられています。 反応する または Vue.js。 その特殊性により、Svelte.js は強力で応答性の高いツールとなっています。

その動作はコンパイラの動作に似ており、競合他社とは異なります。 Svelte の使い方は比較的簡単ですが、慣れるまでにはまだ時間がかかります。 この記事では、Svelte の仕組み、その使用に伴う利点、および欠点について説明します。

Svelte の仕組み

Svelte、コードコンパイラ

React や Vue とは異なり、 Svelte は仮想 DOM を使用しません。 したがって、ブラウザで計算するインタラクションが大幅に減ります。 それはあなたをスリムにします より軽量かつ効率的。 DOM のあらゆる部分を更新できます。 したがって、コンパイラのように動作します。

実際、Svelte はアプリケーションの構築時にコードをコンパイルすることに基づいています。 したがって、実行時にコードを解釈する必要はありません。 宣言的なコンポーネントをコードに変換します。 DOM を自動的に更新します。

このコンパイルされたコードは、ネイティブ JavaScript でブラウザに渡されます。 アプリケーションが DOM を更新するときに、ブラウザーで追加のコードを実行する必要はありません。 これにより、Svelte での作業が高速かつ応答性が高くなります。

Svelte でのアプリの作成は非常に迅速かつ簡単です。 デフォルトでは、フレームワークは Typescript、Eslint、Prettier、Readywright、Vitest をサポートしています。

理想は使用することです Svelte Kit フレームワーク スレンダーで。 ルーティング、レンダリング、RWA、その他のオンボード機能をデフォルトで提供します。

テンプレート化: 変数と属性

変数は括弧内に表示されます。 属性は特定のショートカットをサポートします。 Svelteにはタグを追加するためのHTML部分があります。 変数はスクリプト部分に入力する必要があります。

テンプレート化: 条件とループ

特定の構文は、Vue.js の構文とは異なります。

応答性: 変数と宣言

変数が変更されるとすぐに、テンプレートが更新されます。

発言に対する対応力

Svelte は「$:」記号を使用します。これにより、コードのブロックが開き、使用される変数に応じて応答性が高くなります。

応答性: テーブルとオブジェクト

彼女はスレンダーではかなりレベルが低いです。 デフォルトでは、テーブルは応答しません。

コンポーネント

ファイル (components/Nested.svelte) を開く必要があります。 これを使用するページで、従来のファイルと同様にコンポーネントをインポートします。 その後、HTML タグとして使用されます。 コンポーネントは props を持ち、props を宣言できます。 これは変数のエクスポートによって行われます。

イベント

イベント処理は Vue.js と非常によく似ています。 これらは任意のタグで宣言できます。

コンポーネントイベント

デフォルトでは何も行われません。 Svelte から関数をインポートし、ディスパッチャーを作成する必要があります。 Vue.js と同様、イベントは 1 レベル上がるだけであり、伝播することはできません。

バインディング

バインディングは、フォーム要素などでよく使用されます。 シフトは要素が使用されるすべての場所で行われます。

ライフサイクルイベント

とてもシンプルです。 {onMount} タグを使用する必要があります。

コンテキスト API

これは、最大 8 レベルまで伝播することなく、子またはサブ子で変数とイベントを使用できるようにする方法です。 Svelte から「setContext」関数を取得し、この関数に値と関数を追加する必要があります。

詳細については、次の場所で入手可能なドキュメントを参照してください。 https://svelte.dev/examples/hello-world。

スベルトの長所と短所

スベルトのメリット

• 細身でとても軽い。 コンパイルされたコードのおかげで、開発されたアプリケーションの重量は大幅に軽くなります。 これにより、読み込みと実行時間が大幅に短縮されます。
• その枠組みも、 過剰反応性 リアルタイムで JavaScript コードを記述して高いパフォーマンスを実現します。 これにより、ユーザー エクスペリエンスが向上します。
• Svelte は冗長性の低いフレームワークです 競合他社よりも。 一部の概念が HTML コードに直接統合されているため、記述するコード行が少なくなります。
  HMR と Chrome デバッガーを備えた優れた作業環境を提供します。
• 最後に、最初は驚くかもしれない構文の違いにもかかわらず、Svelte.js は習得が簡単です。 React や Vue.js と比較して、Svelte でアプリケーション プロジェクトを開発するのに不足するものは何もありません。

スベルトのデメリット

• の フレームワークの応答性 時々不安になることもあります。 Svelte の運用においては、競合他社よりも提供するフレームワークが少ないため、非常に優れた組織化が必要です。
• Svelte はおそらく小規模から中規模のアプリケーションに最適です。 多くの機能を備えたより野心的なプロジェクトでこれを使用すると、おそらくさらに問題が発生します。
• 始めるのは比較的簡単ですが、フレームワーク固有の構文によって学習が妨げられる場合があります。
• リアクティブ ステートメントでは非同期はサポートされません。
• の スレンダーコミュニティ 制限されています。 したがって、他のフレームワークに比べてドキュメントや貢献がはるかに少なくなります。 ただし、最初のプロジェクトに取り組むために、Svelte の公式 Web サイトでは、インタラクティブなチュートリアルを含む、よくできたドキュメントを提供しています。

スリムで強力なツール

Svelte を React や Vue.js などの JavaScript フレームワークと比較すると、その応答性は印象的です。 コードコンパイラーとしては軽量であることがわかります。 その結果、アプリケーションの読み込み時間と実行速度が節約されます。 これにより、ユーザー エクスペリエンスが向上します。
ただし、Svelte.js には優れた開発環境が備わっていますが、いくつかの特殊性があります。 その特有の構文は驚くかもしれませんが、それでも使い方は簡単です。
このフレームワークは、小規模なアプリケーションで作業するのに理想的と思われます。 ただし、非常に野心的なアプリケーション プロジェクトでは、これはおそらく最良の選択肢ではありません。

出典: