この記事では、シングルページアプリケーション(SPA)を構築するための基本的な概念と、Syncfusion Essential JS2コンポーネントを使用して作成されたシングルページ
シングルページアプリケーション（SPA）とは何ですか？,
単一ページアプリケーション（SPA）は、単一のルートビューページがサーバーからロードされ、ユーザーの操作に基づいて、アプリケーションがページのリロードなしでクライアント側のコンテンツを動的に更新するwebアプリケーションです。
Spaは、従来のマルチページアプリケーションよりも流動的で応答性が高く、SaaS（Software as a Service）、エンタープライズダッシュボード、およびその他のフォーム駆動型webアプリケーションの作成に最適です。,
SPAのライフサイクル
SPAを構築するための複数のフレームワークがありますが、すべてのフレームワークにおけるSPAの概念は同じままです。 初期ロード中にサーバーからクライアント側UIまたはビュー全体を取得します。 次に、ユーザーの操作やアプリケーションを介したナビゲーションに基づいて、UIがクライアント側で動的に更新されます。SPAは、最小帯域幅を使用してサーバーに接続してユーザー操作からのデータを更新し、webページを更新しながら更新されたデータを取得します。,
イメージソース:https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
SPAの利点
単一ページアプリケーションは、マルチページアプリケーションよりも流動的で応答性が高いです。 これにより、これらの用途にも適してモバイルデバイス、アルを作成することに別のネイティブモバイルアプリケーシ
SPAは、ビューページ上のエディタやポップアップなどの複数のコンポーネントとの豊富な対話をサポートします。 これらのコンポーネ,
最初のページの読み込みとは別に、SPAではUIの更新に使用する帯域幅が少なくなります。 ありませんのページを更新し、ユーザーをナビゲートでの申請は、アプリケーションをより快適に使えるモバイルデバイス
ビューレイヤーとデータレイヤーはSPAで別々に維持されるため、本番環境にデプロイする方がはるかに簡単になります。
SPAの重要な概念
ルーティング
SPAでは、すべてのコンテンツは別々のUrlで維持され、これらのUrlを使用して異なるコンテンツに素早く,
シングルページ用の維持状態のUrlはトラック状態を内部でユーザーをナビゲートを通じて願います。
SPAでのページルーティングの主なユースケースは、ユーザーがURLを共有する場合です。 その人に届いたものだと考えることができる人でいることのリンクは同じコンテンツに移動し、正確なURLを願います。
データバインディングと同期
SPAは、アプリケーションでのユーザー操作の後にデータをフェッチしたり、データモデルを更新したりするために、サーバーに,
ユーザーがアプリケーションをナビゲートしている間、サーバー内のデータモデルは非同期HTTP要求(AJAX)を使用して同時に更新されます。
ユーザー操作に基づいて、データはサーバー内のデータモデルに更新されます。 そして、これらのデータの変更は同時にUIに更新され、ユーザーは更新せずに更新されたwebページを常に表示できるようになります。
速く、流動応答時間
SPAはユーザーの相互作用への速く、継ぎ目が無い応答のために知られています。, その豊かな界面を取り扱うユーザアクションをリフレッシュのUIを動的に遅滞または請求から、サーバーにコピーします。 れを避ける中断を経験し、webアプリケーションと同様の振る舞いをデスクトップます。
ビューとデータ層の分離
SPAはModel-View-Controller（MVC）とModel-View-ViewModel（MVVM）パターンを使用して構築されますが、独自のMV*パターンでアプリケーションを構築することはできます。,
アプリケーションのUIレンダリングとアプリケーションのデータレイヤーを保持するビューファイル(CSSバンドルとともに)は、SPAアーキテクチャでは個別に
ビュー層とデータ層の分離は、ユーザーが異なるデータセットに対してビューページを再利用したり、本番環境のデータモデルに影響を与えることなくビューページを変
SPAでのビューとデータレイヤーの分離により、本番環境でのバージョニングとロールバックの誓いが容易になります。,
シングルページアプリケーションの例とデモ
これらは、本質的なJS2コントロールを使用して構築された実際のシングルページアプリケーション
経費トラッカー
経費トラッカーシングルページアプリケーションの例では、優れたUIで毎日の経費を追跡し、視覚化するために一緒にいくつかの重要なJS2,
Expense tracker–SPA
アプリケーション、ダッシュボード、トランザクション、およびAboutのさまざまなwebページでは、データモデルを視覚化するためにDataGrid、Charts、およびその他の重要なJS2 このアプリケーショ
ユーザーは、ルーティングのために各webページに作成されるUrlを使用して、これらのビュー間をナビゲートできます。, このアプリケーショ その後、サーバーのwebページを要求することなく、クライアント側でページ遷移が完全に行われます。 異なるビューに移動すると、アプリケーションのURLがそれに応じて更新されます。
データバインディングはSPAで大きな役割を果たします。 すべてのwebページはクライアント側でダウンロードされるため、UIコンポーネントは更新されたデータで更新されるはずです。, トランザクションwebページで編集アクションを実行している間、変更は同時にデータモデルに更新されます。 これらの変更は、他のページで使用できるUIコンポーネントにも反映されます。
SPAは、デスクトップブラウザとモバイル環境の両方でのレンダリングに適しているため、このアプリケーションは、モバイルデバイスでのレンダリング
ライブデモのこのアプリケーションは、当サイトでソースをGitHubです。,
経費トラッカー-モバイルビュー
Webメール
Webメールは、メールボックスを管理するために構築されたOutlookのようなユーザーインターフェイスを持つ単一ページ
このアプリケーションは、シングルビューのwebページとしてアコーディオン、ListView、およびサイドバーのようなSyncfusionコンポーネントを使用して、豊富なインターフェイスとイン メールフォルダ、メールアイテム、およびメールコンテンツ領域：アプリケーションは、メールボックスを管理するための, により、その対応には、本アプリ描画できるのを容易に全モバイル機器、デスクトップブラウザを推奨いたします。
データとの結合が大きな役割を果たしてこの更新申請メールボックスを表示するためのメールの内容に基づき、ユーザーの相互作用 メールリスト項目のマッサージ師としてスタッフの適切なコンテンツに基づくユーザの選択メールフォルダの中に別のフォルダを作 ユーザーがメールリストからメールアイテムを選択すると、メール領域が更新されたコンテンツで更新されます。
では、ライブデモのホームページのソースをGitHub.,
Web Mail–SPA
アプリケーションは、複数のユーザー操作を処理し、ページを更新せずにそれに応じてコンテンツを更新し、アプリケーションをデスクトップアプリケーション
に対応型のデザインの本アプリで描画のための全モバイルデバイスのポートします。,
ローン電卓
ローン電卓は、データグリッド、チャート、スライダーなどのコンポーネントを単一ビューページで一緒に紹介し、ローン金額、利息、期間に基づいてローンの支払いを計算するためのシングルページのアプリケーション例です。,
ローン電卓–SPA
このアプリケーションのデータバインディングは、スライダーコンポーネントを使用して融資額、利息、および期間の値を調整しながら、チャートおよびグリッドコンポーネントのデータがそれに応じて適切なデータで更新されるように動作します。
DatePickerコントロールを使用して表示する月を選択することで、チャートのコンテンツを更新することもできます。 表示する月が変更されると、対応する月のデータがモデルから返されます。, チャートコントロールでも同じことが更新されます。
では、ライブデモの本アプリケーションのウェブサイトやき、ソースをGitHub.
Health Tracker
Health Trackerは、食物の摂取量、歩いた距離、消費された水、睡眠時間を追跡することによって、人の健康を追跡する別の単一ページのアプリケーション
このアプリは豊富なインタフェースと、インタラクティブデザインを用い布制御のように図表やカードのため、表現や内容につきましてはビューします。 Data bindingを使用ショーケースのデータの表の通りです。, このサンプルのソースは、このGitHubの場所にあります。
Health Tracker-SPA–/p>
Diagram Builder
Diagram Builderは、組織図、階層ツリー、マインドマップなどのさまざまなユースケースのさまざまな図の作成に役立つアプリケーションです。
このアプリは、強力な機能が豊富な管理図のように、カラーピッカー、ダイアログ、および範囲ライダーです。 このサンプルのソースは、このGitHubの場所にあります。,
Diagram Builder-SPA
Story Estimator
Story Estimatorは、計画ポーカーテクニックを使用してストーリーのストーリーポイントを推定するための効果的でアジャイルベースのツールです。
このアプリケーションは、DataGrid、チャート、入力マスク、ボタン、ラジオボタン、チェックボックスなどのコントロールで構築され このサンプルのソースは、このGitHubの場所にあります。,
Story Estimator-SPA
株価チャート
株価チャートは、特定の期間にわたる企業の株価を追跡および視覚化するために使用されます。
このアプリケーションは、チャート、ツールバー、DateTimePicker、ドロップダウン、ボタンコントロールで構築されています。 ソースはGitHubで見つけることができます。,
Stock Chart-SPA
Asset Management
Asset Managementアプリケーションは、組織のソフトウェアおよびハードウェア資産を追跡および視覚化するために使用される単一ページ
このアプリケーションは、DataGrid、Charts、TreeMap、およびDateRangePickerコントロールで構築されています。 ソースはGitHubで見つけることができます。,
Asset Management-SPA
SPAの考慮事項
単一ページアプリケーションの複数の利点に加えて、SPAに留意すべき特別な考慮事項がいくつかあります。
- SPAを作成する際には、オブジェクト指向の原則を確保する必要があります。 無視すると、ブラウザ内のメモリリークにつながります。 したがって、アプリケーションが遅くなり、パフォーマンスが低下します。
- シングルページアプリケーションでブラウザの戻るボタンを適切に処理します。, ない場合は、ユーザがクリックすると、ブラウザの”戻る”ボタンで操作し、ワークフローの損失です。
しかし、適切な技術はこれらすべての問題に対処することができます。
概要
このブログ記事では、マルチページアプリケーションよりもシングルページアプリケーションの利点を見ました。 また、複数のSyncfusion Essential JS2コントロールを使用して構築された実際の単一ページのアプリケーション例を見ました。
前に説明した単一ページのアプリケーション例は、Angular、JavaScript、および
でも使用できます。ASP.NET コア、およびASP。,純MVCプラットフォームでのライブデモはこうした用途ます。 確認することもできますその他の実世界って作成されたアプリケーションと作品。
Syncfusionコンポーネントを使用して単一ページのアプリケーションがどのように構築されているかを確認するには、GitHubで簡単に実行可能なソースコードを自分でチェックアウトすることをお勧めします。