マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

特徴

Single-page application(以下、SPAと略す)は、

  • 単一ページで構成される Ajax アプリケーション。
  • HTML5 / CSS や、各種
    • JavaScript ライブラリ
    • ハイブリッド・アプリ開発ツール

を使用することで、

  • UX の向上
  • マルチデバイス対応

などが可能となる。

処理方式

  • クライアントサイドは各種 JavaScript ライブラリを使用してデータ操作を行い、
  • サーバサイドは WebAPI を使用して RESTful にAction Methodを実行する。

サーバー・ステートレス

リッチ・クライアントとしてのフロントエンド

コンポーネント指向

最近のSPAはコンポーネント指向

  • jQueryのように、ページ中のHTMLをDOM処理するような処理は書かない。
  • 横の繋がりも、縦の繋がりも無い(オブジェクト参照的な意味で)。
  • 縦はBindingみたいなことはできる(ReactのFluxでは双方向ではなく単方向)。
  • コンポーネントの切り方が重要になってくる(下手に切ると上手く実装できなくなる)。

適合 / 不適合

適合するケース

サーバー・ステートレス

以下のような、リッチ・クライアントとしてのフロントエンド

  • WebAPIをマッシュアップするフロントエンド
  • mBaaS(Resource Server)のフロントエンド
  • サーバーレスのフロントエンド

通信環境

Facebookのようなサービスを

  • 通信回線の品質が低く、
  • 且つ、帯域幅の狭い環境に

配信するケース。

その他の表現

  • みんなが、様々な場所で使うスマホアプリ
  • 項目数が少なめのフロントエンドを
    高品質に開発(プロダクトの管理画面)

参考

適合しないケース

エントリー系

無限ループが起きるため、
エントリー系で使えそうで使えない(内部でコンポーネントを再描画するため)。

  • 理由は、Reactive Extensions(Rx)的なオブザーブ処理。
  • AngularはRxJS、Reactは独自オブザーバーを実装している。

エンプラ(SOR)

  • 画面項目の一括の単項目チェックや関連チェックを実装し難い。
    • 特に、コンポーネントなどで分割すると難しくなっていく。
    • これ合ったので、Update Panelも流行らなかった感がある。
  • イベントのチェーンなどはVBでも難しくなるのでSPAでは破綻する。

問題点

流行りのアーキテクチャであるものの、昨今、色々な問題点が指摘されている。

フレームワークやツール

knockoutは早々にメインストリームではなくなって、

React、Angularがメインストリームに切り替わっている。

更に最近は、ReactやVueが伸びてきているもよう。

数(変化)が多い

その中で、1つ1つに、単純な難しさがあるらしい。

ライフサイクルと移行パスに、グレー感がある。

項目移送の段数が増加する。

  • 要約すると
    • RESTが辛い
    • 理由 : データフローが解り難くなる。
  • 確かに、.NETの場合も段数が増加する。

ASP.NET Web Forms

非常にシンプルに書ける。

  • SQL → DataTable? → Binding

ASP.NET MVC

やり方は数パターンあるが、サボって、DataTable?をViewに持って行くこともできる。
ただし、この場合は、双方向 Bindingは不可。単方向Bindingのみ。

  • SQL → DataTable? (or Dapper → POCO) (→ ViewModel?) → Binding

ASP.NET SPA

物理的 (クライアント・サーバー) & 言語的 (.NET・JavaScript) な境界がありサボれない。

  • SQL → DataTable? (or Dapper → POCO) → JSON → ViewModel? → Binding

参考

様々なSPAフレームワーク


Tags: :プログラミング, :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API, :ASP.NET SPA, :JavaScript


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-11-05 (火) 09:41:20 (8d)