ASP.NET SPA のバックアップ(No.8) - マイクロソフト系技術情報 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

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

戻る

目次 †

目次
概要
調査
- Web Essentials
- ASP.NET Core SPAテンプレート
  - ASP.NET Core Angularテンプレート
  - ASP.NET Core React.jsテンプレート
問題点
- フレームワークやツール
- 項目移送の段数が増加する。

概要 †

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

HTML5 / CSS や、各種 JavaScript ライブラリを使用することで、
- UX の向上
- マルチデバイス対応

が可能となる。

シングルページアプリケーションでは、
- クライアントサイドは各種 JavaScript ライブラリを使用してデータ操作を行い、
- サーバサイドは Web API を使用して RESTful にAction Methodを実行する。
「シングルページアプリケーション」テンプレートを使用すると、
既定で以下の JavaScript ライブラリが使用できる。

項番	JavaScript ライブラリ	説明
1	jQuery	JavaScript のコーディングを支援するライブラリ
2	jQuery UI	jQuery をベースとした UI ライブラリ
3	jQuery Validate	HTML フォームの入力検証を行う jQuery プラグイン
4	knockout.js	JavaScript による MVVM (Model-View-ViewModel?) フレームワーク
5	modernizr.js	HTML5/CSS のブラウザ対応状況を調査するためのライブラリ

調査 †

Web Essentials †

ASP.NET Core SPAテンプレート †

ASP.NET Core Angularテンプレート †

ASP.NET Core React.jsテンプレート †

問題点 †

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

フレームワークやツール †

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

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

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

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

数（変化）が多い †

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

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

AngularJSと1年間付き合ってきたので - Panda Noir
http://panda-noir.hatenablog.jp/entry/2015/12/21/181610

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

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

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

ReactSPAをRailsに戻している話 // Speaker Deck
https://speakerdeck.com/itkrt2y/reactspaworailsnili-siteiruhua

要約すると
- 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

Tags: :.NET開発, :ASP.NET, :ASP.NET Web API, :ASP.NET SPA