Single-page application
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicros...
-[[戻る>SPAとMPA]]
* 目次 [#z57e6020]
#contents
*概要 [#mb630d7e]
**特徴 [#gbc16f3c]
Single-page application（以下、SPAと略す）は、
-単一ページで構成される Ajax アプリケーション。
-HTML5 / CSS や、各種
--JavaScript ライブラリ
--[[ハイブリッド・アプリ開発ツール>https://dotnetdevelopm...
>を使用することで、
--UX の向上
--マルチデバイス対応
>などが可能となる。
**処理方式 [#zcdb8157]
-クライアントサイドは各種 JavaScript ライブラリを使用して...
-サーバサイドは [[WebAPI]] を使用して RESTful にAction Me...
***サーバー・ステートレス [#p37c31be]
リッチ・クライアントとしてのフロントエンド
***コンポーネント指向 [#sfa0ce47]
最近のSPAはコンポーネント指向
-jQueryのように、ページ中のHTMLをDOM処理するような処理は...
-横の繋がりも、縦の繋がりも無い（オブジェクト参照的な意味...
-縦はBindingみたいなことはできる（ReactのFluxでは双方向で...
-コンポーネントの切り方が重要になってくる（下手に切ると上...
*適合 / 不適合 [#a35dc84d]
**適合するケース [#tb2d2f50]
***サーバー・ステートレス [#a89e7a7a]
以下のような、リッチ・クライアントとしてのフロントエンド
-WebAPIをマッシュアップするフロントエンド
-mBaaS（Resource Server）のフロントエンド
-サーバーレスのフロントエンド
***通信環境 [#u60c1c15]
Facebookのようなサービスを
-通信回線の品質が低く、
-且つ、帯域幅の狭い環境に
配信するケース。
***その他の表現 [#q3bbeec5]
-みんなが、様々な場所で使うスマホアプリ
-項目数が少なめのフロントエンドを~
高品質に開発（プロダクトの管理画面）
***参考 [#nf1b3c03]
-結局、WebAPIのフロントエンドUIの使いドコロってさぁ。 - O...
https://www.osscons.jp/jorwrrjui-537/
**適合しないケース [#c3720d07]
***エントリ系 [#me4302f6]
エントリ系で使えそうで使えないらしい。~
（仮想DOMの機構が有効に機能せずに性能劣化するなど）
***エンプラ（SOR） [#yc07f162]
-画面項目の一括の単項目チェックや関連チェックを実装し難い。
--特に、コンポーネントなどで分割すると難しくなっていく。
--これがあったので、[[Update Panel>部分描画とJavaScript#d...
-イベントのチェーンなどはVB（[[Windows Forms]]）でも難し...
*問題点 [#w6ce7627]
流行りのアーキテクチャであるものの、昨今、色々な問題点が...
**フレームワークやツール [#l0f451f9]
***フレームワークの数、ライフサイクル的な変化が多い [#yd8...
knockoutは早々にメインストリームではなくなって、
React、Angularがメインストリームに切り替わっている。
更に最近は、ReactやVueが伸びてきているもよう。
-2016年、ReactがAngularを抜いて1番人気に！~
JSライブラリの利用意向はますます高まっている - Build Insi...
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-i...
--フロントエンドへの複雑化について、一つの視点 - mizchi's...
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
***その中で、１つ１つに、単純な難しさがあるらしい。 [#ndd...
-AngularJSと1年間付き合ってきたので - Panda Noir~
http://panda-noir.hatenablog.jp/entry/2015/12/21/181610
***ライフサイクルと移行パスに、グレー感がある。 [#j31430b0]
-Angularチームは、どうかしちゃった？ | プログラミング | P...
http://postd.cc/have-the-angular-team-lost-their-marbles/
-Angularは、1系と2系が結構違うらしい。さらに4系が出てくる...
--[[» AngularJS 1.5 を使って Angular 2 への移行を楽にしよ...
--Angularの次バージョンは「Angular 4」に、2017年3月リリー...
今後は単に「Angular」と呼んでほしいと － Publickey~
http://www.publickey1.jp/blog/16/angularangular_420173ang...
**項目移送の段数が増加する。 [#he4fbad3]
-ReactSPAをRailsに戻している話 // Speaker Deck~
https://speakerdeck.com/itkrt2y/reactspaworailsnili-sitei...
--要約すると
---[[REST]]が辛い
---理由 : データフローが解り難くなる。
-確かに、.NETの場合も段数が増加する。
***[[ASP.NET Web Forms]] [#s2f5449f]
非常にシンプルに書ける。
-SQL → DataTable → Binding
***[[ASP.NET MVC]] [#ya90f85f]
やり方は数パターンあるが、サボって、DataTableをViewに持っ...
-SQL → DataTable (or [[Dapper]] → POCO) (→ ViewModel) → B...
ただし、サーバサイド技術なので、双方向 Bindingは不可。単...
***[[ASP.NET SPA]] [#d10128b1]
物理的 (クライアント・サーバー) & 言語的 (.NET・JavaScrip...
-SQL → DataTable (or [[Dapper]] → POCO) → JSON → ViewMode...
*参考 [#e091d257]
**[[様々なSPAフレームワーク>VS系コンテンツ#bbf6c1a5]] [#m...
----
Tags: [[:プログラミング]], [[:.NET開発]], [[:.NET Core]],...
終了行:
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicros...
-[[戻る>SPAとMPA]]
* 目次 [#z57e6020]
#contents
*概要 [#mb630d7e]
**特徴 [#gbc16f3c]
Single-page application（以下、SPAと略す）は、
-単一ページで構成される Ajax アプリケーション。
-HTML5 / CSS や、各種
--JavaScript ライブラリ
--[[ハイブリッド・アプリ開発ツール>https://dotnetdevelopm...
>を使用することで、
--UX の向上
--マルチデバイス対応
>などが可能となる。
**処理方式 [#zcdb8157]
-クライアントサイドは各種 JavaScript ライブラリを使用して...
-サーバサイドは [[WebAPI]] を使用して RESTful にAction Me...
***サーバー・ステートレス [#p37c31be]
リッチ・クライアントとしてのフロントエンド
***コンポーネント指向 [#sfa0ce47]
最近のSPAはコンポーネント指向
-jQueryのように、ページ中のHTMLをDOM処理するような処理は...
-横の繋がりも、縦の繋がりも無い（オブジェクト参照的な意味...
-縦はBindingみたいなことはできる（ReactのFluxでは双方向で...
-コンポーネントの切り方が重要になってくる（下手に切ると上...
*適合 / 不適合 [#a35dc84d]
**適合するケース [#tb2d2f50]
***サーバー・ステートレス [#a89e7a7a]
以下のような、リッチ・クライアントとしてのフロントエンド
-WebAPIをマッシュアップするフロントエンド
-mBaaS（Resource Server）のフロントエンド
-サーバーレスのフロントエンド
***通信環境 [#u60c1c15]
Facebookのようなサービスを
-通信回線の品質が低く、
-且つ、帯域幅の狭い環境に
配信するケース。
***その他の表現 [#q3bbeec5]
-みんなが、様々な場所で使うスマホアプリ
-項目数が少なめのフロントエンドを~
高品質に開発（プロダクトの管理画面）
***参考 [#nf1b3c03]
-結局、WebAPIのフロントエンドUIの使いドコロってさぁ。 - O...
https://www.osscons.jp/jorwrrjui-537/
**適合しないケース [#c3720d07]
***エントリ系 [#me4302f6]
エントリ系で使えそうで使えないらしい。~
（仮想DOMの機構が有効に機能せずに性能劣化するなど）
***エンプラ（SOR） [#yc07f162]
-画面項目の一括の単項目チェックや関連チェックを実装し難い。
--特に、コンポーネントなどで分割すると難しくなっていく。
--これがあったので、[[Update Panel>部分描画とJavaScript#d...
-イベントのチェーンなどはVB（[[Windows Forms]]）でも難し...
*問題点 [#w6ce7627]
流行りのアーキテクチャであるものの、昨今、色々な問題点が...
**フレームワークやツール [#l0f451f9]
***フレームワークの数、ライフサイクル的な変化が多い [#yd8...
knockoutは早々にメインストリームではなくなって、
React、Angularがメインストリームに切り替わっている。
更に最近は、ReactやVueが伸びてきているもよう。
-2016年、ReactがAngularを抜いて1番人気に！~
JSライブラリの利用意向はますます高まっている - Build Insi...
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-i...
--フロントエンドへの複雑化について、一つの視点 - mizchi's...
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
***その中で、１つ１つに、単純な難しさがあるらしい。 [#ndd...
-AngularJSと1年間付き合ってきたので - Panda Noir~
http://panda-noir.hatenablog.jp/entry/2015/12/21/181610
***ライフサイクルと移行パスに、グレー感がある。 [#j31430b0]
-Angularチームは、どうかしちゃった？ | プログラミング | P...
http://postd.cc/have-the-angular-team-lost-their-marbles/
-Angularは、1系と2系が結構違うらしい。さらに4系が出てくる...
--[[» AngularJS 1.5 を使って Angular 2 への移行を楽にしよ...
--Angularの次バージョンは「Angular 4」に、2017年3月リリー...
今後は単に「Angular」と呼んでほしいと － Publickey~
http://www.publickey1.jp/blog/16/angularangular_420173ang...
**項目移送の段数が増加する。 [#he4fbad3]
-ReactSPAをRailsに戻している話 // Speaker Deck~
https://speakerdeck.com/itkrt2y/reactspaworailsnili-sitei...
--要約すると
---[[REST]]が辛い
---理由 : データフローが解り難くなる。
-確かに、.NETの場合も段数が増加する。
***[[ASP.NET Web Forms]] [#s2f5449f]
非常にシンプルに書ける。
-SQL → DataTable → Binding
***[[ASP.NET MVC]] [#ya90f85f]
やり方は数パターンあるが、サボって、DataTableをViewに持っ...
-SQL → DataTable (or [[Dapper]] → POCO) (→ ViewModel) → B...
ただし、サーバサイド技術なので、双方向 Bindingは不可。単...
***[[ASP.NET SPA]] [#d10128b1]
物理的 (クライアント・サーバー) & 言語的 (.NET・JavaScrip...
-SQL → DataTable (or [[Dapper]] → POCO) → JSON → ViewMode...
*参考 [#e091d257]
**[[様々なSPAフレームワーク>VS系コンテンツ#bbf6c1a5]] [#m...
----
Tags: [[:プログラミング]], [[:.NET開発]], [[:.NET Core]],...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
