「[[マイクロソフト系技術情報 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 ライブラリ --[[ハイブリッド・アプリ開発ツール>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?%E3%83%8F%E3%82%A4%E3%83%96%E3%83%AA%E3%83%83%E3%83%89%E3%82%A2%E3%83%97%E3%83%AA#kc41ca45]] >を使用することで、 --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>部分描画と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 ***その中で、1つ1つに、単純な難しさがあるらしい。 [#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に持って行くこともできる。~ -SQL → DataTable (or [[Dapper]] → POCO) (→ ViewModel) → Binding~ ただし、サーバサイド技術なので、双方向 Bindingは不可。単方向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]]