「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>SPAとMPA]]

* 目次 [#z57e6020]
#contents

*概要 [#mb630d7e]

**特徴 [#gbc16f3c]
Single-page application（以下、SPAと略す）は、

-単一ページで構成される Ajax アプリケーション。

-HTML5 / CSS や、各種
--JavaScript ライブラリ
--ハイブリッド・アプリ開発ツール

>を使用することで、

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

>などが可能となる。

**処理方式 [#zcdb8157]
-クライアントサイドは各種 JavaScript ライブラリを使用してデータ操作を行い、

-サーバサイドは [[WebAPI]] を使用して RESTful にAction Methodを実行する。~

***サーバー・ステートレス [#p37c31be]
リッチ・クライアントとしてのフロントエンド

***コンポーネント指向 [#sfa0ce47]
最近のSPAはコンポーネント指向

-jQueryのように、ページ中のHTMLをDOM処理するような処理は書かない。

-横の繋がりも、縦の繋がりも無い（オブジェクト参照的な意味で）。

-縦はBindingみたいなことはできる（ReactのFluxでは双方向ではなく単方向）。

-コンポーネントの切り方が重要になってくる（下手に切ると上手く実装できなくなる）。

*適合 / 不適合 [#a35dc84d]

**適合するケース [#tb2d2f50]

***サーバー・ステートレス [#a89e7a7a]
以下のような、リッチ・クライアントとしてのフロントエンド
-WebAPIをマッシュアップするフロントエンド
-mBaaS（Resource Server）のフロントエンド
-サーバーレスのフロントエンド

***通信環境 [#u60c1c15]
Facebookのようなサービスを

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

配信するケース。

***その他の表現 [#q3bbeec5]
--みんなが、様々な場所で使うスマホアプリ
--項目数が少なめのフロントエンドを~
高品質に開発（プロダクトの管理画面）

***参考 [#nf1b3c03]
-結局、WebAPIのフロントエンドUIの使いドコロってさぁ。 - OSSコンソーシアム~
https://www.osscons.jp/jorwrrjui-537/

**適合しないケース [#c3720d07]

***エントリー系 [#me4302f6]
無限ループが起きるため、~
エントリー系で使えそうで使えない（内部でコンポーネントを再描画するため）。
-理由は、[[Reactive Extensions（Rx）]]的なオブザーブ処理。
-AngularはRxJS、Reactは独自オブザーバーを実装している。

***エンプラ（SOR） [#yc07f162]
-画面項目の一括の単項目チェックや関連チェックを実装し難い。
--特に、コンポーネントなどで分割すると難しくなっていく。
--これ合ったので、Update Panelも流行らなかった感がある。
--これがあったので、[[Update Panel>部分描画とJavaScript#d17020b0]]も流行らなかった感がある。

-イベントのチェーンなどはVBでも難しくなるのでSPAでは破綻する。

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

**フレームワークやツール [#l0f451f9]
knockoutは早々にメインストリームではなくなって、

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

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

-2016年、ReactがAngularを抜いて1番人気に！~
JSライブラリの利用意向はますます高まっている - Build Insider~
http://www.buildinsider.net/hub/survey/201606-popularjs

***数（変化）が多い [#yd82d231]
-How it feels to learn JavaScript in 2016 – Hacker Noon~
https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f
-フロントエンドへの複雑化について、一つの視点 - mizchi's blog~
http://mizchi.hatenablog.com/entry/2016/04/11/185914
--最近のフロントエンドへの違和感 - nobkzのブログ~
http://nobkz.hatenadiary.jp/entry/2016/04/11/031009
--日本のWebエンジニアの大半が、~
変化に対応しきれなくなっている件について。 - 日々、とんは語る。~
http://d.hatena.ne.jp/tomoya/20160410/1460274822

***その中で、１つ１つに、単純な難しさがあるらしい。 [#ndd2c931]
-AngularJSと1年間付き合ってきたので - Panda Noir~
http://panda-noir.hatenablog.jp/entry/2015/12/21/181610

***ライフサイクルと移行パスに、グレー感がある。 [#j31430b0]
-Angularチームは、どうかしちゃった？ | プログラミング | POSTD~
http://postd.cc/have-the-angular-team-lost-their-marbles/

-Angularは、1系と2系が結構違うらしい。さらに4系が出てくるらしい。
--» AngularJS 1.5 を使って Angular 2 への移行を楽にしよう！！ TECHSCORE BLOG~
http://www.techscore.com/blog/2016/07/15/angularjs-1-5-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6-angular-2-%E3%81%B8%E3%81%AE%E7%A7%BB%E8%A1%8C%E3%82%92%E6%A5%BD%E3%81%AB%E3%81%97%E3%82%88%E3%81%86%EF%BC%81%EF%BC%81/
--Angularの次バージョンは「Angular 4」に、2017年3月リリース。~
今後は単に「Angular」と呼んでほしいと － Publickey~
http://www.publickey1.jp/blog/16/angularangular_420173angular.html

**項目移送の段数が増加する。 [#he4fbad3]
-ReactSPAをRailsに戻している話 // Speaker Deck~
https://speakerdeck.com/itkrt2y/reactspaworailsnili-siteiruhua

--要約すると
---[[REST]]が辛い
---理由 : データフローが解り難くなる。

-確かに、.NETの場合も段数が増加する。

***[[ASP.NET Web Forms]] [#s2f5449f]
非常にシンプルに書ける。

-SQL → DataTable → Binding

***[[ASP.NET MVC]] [#ya90f85f]
やり方は数パターンあるが、サボって、DataTableをViewに持って行くこともできる。~
ただし、この場合は、双方向 Bindingは不可。単方向Bindingのみ。

-SQL → DataTable (or [[Dapper]] → POCO) (→ ViewModel) → Binding~

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

-SQL → DataTable (or [[Dapper]] → POCO) → JSON → ViewModel → Binding

*参考 [#e091d257]

**[[様々なSPAフレームワーク>VS系コンテンツ#bbf6c1a5]] [#m32a7dcc]

----
Tags: [[:プログラミング]], [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]], [[:JavaScript]]
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS