9. 9
Ajax Web アプリケーションの普及と課題
Asynchronous JavaScript + XML Application
目的
• Web アプリの UX 向上(ページ遷移非依存)
• マルチデバイス 対応
実装
• XMLHttpRequest と DOM 操作
• Raw JSON データの操作
課題
• JavaScript コードの増加とスパゲッティ化
• ブラウザー履歴や更新ボタン、ブックマークが機能しない
• SEO (検索エンジン最適化) に弱い
• オフライン実行に未対応 (オンライン前提の実装)
10. 10
HTML5 とモダン Web ブラウザー
Web Standards and Modern Web Browsers
HTML5/CSS3 の登場 (+ ECMAScript 5)
対応 Web ブラウザーの普及 (モダン Web ブラウザー)
jQuery のデファクト スタンダード
各種 JavaScript の登場と普及
Ajax Web アプリケーション
モダン Web アプリケーション
11. 11
モダン Web アプリ エクスペリエンス
Single Page Application Architecture
クライアント サーバー
ASP.NET
REST
JSON
XML
HTML
View
Model
HTTP
View
Async
Web API
14. 14
ASP.NET シングル ページ アプリケーション
ASP.NET Single Page Application (SPA)
• 単一ページ構成の Ajax アプリケーション
• HTML5/CSS3 や JavaScript ライブラリを活用
• 優れた Web UX の実現とマルチデバイス対応
SPA
※ SPA テンプレートの利用には Visual Studio 2012 Update 2 が必要です
http://www.microsoft.com/visualstudio/jpn/visual-studio-update
15. 15
ASP.NET シングル ページ アプリケーション構成
ASP.NET Single Page Application Architecture
/Home/Index
サーバー
Web UI
ASP.NET MVC
Data Services
ASP.NET Web API
Entity Framework
クライアント
knockout
jQuery
Todo List
Todo Item
/Home/Index
/api/todolist
/api/todo
HTML/CSS/JS
JSON/XML
16. 16
ASP.NET SPA サーバー サイド構成 #1
Server Side Technologies in ASP.NET SPA
• ASP.NET MVC 4 – メイン ビュー (Home/Index) の生成
• コントローラー : HomeController クラス, AccountController クラス
• メイン ビュー : Index.cshtml + _Layout.cshtml
• 部分ビュー : _Login.chstml + _Register.cshtml
• 認証 : ASP.NET 認証、OAuth/OpenID 認証 (DotNetOpenAuth)
• CSRF 対策 : Html.AntiForgeryToken, ValidateAntiForgeryToken 属性
public class HomeController : Controller
{
public ActionResult Index(string returnUrl)
{
ViewBag.ReturnUrl = returnUrl;
return View();
}
}
Index のみ
(シングル ページ) OAuth/OpenID 認証
(AuthConfig.cs)
17. 17
ASP.NET SPA サーバー サイド構成 #2
Server Side Technologies in ASP.NET SPA
• ASP.NET Web API – HTTP REST サービス インターフェース
• コントローラー : ToDoListController クラス, ToDoController クラス
• api/TodoList : Todo リストの 参照・追加・更新・削除
• api/Todo : Todo アイテムの 追加・更新・削除
• API ヘルプページの自動生成、Authorize 属性による API 呼び出しの認証フィルター
• Entity Framework 5 – O/R マッピング フレームワーク
• DB コンテキスト : TodoItemContext クラス
• エンティティ : TodoList モデル クラス, TodoItem モデル クラス
• データ転送オブジェクト : TodoListDto クラス、TodoItemDto クラス
18. 18
ASP.NET SPA クライアント サイド構成
Client Side Technologies in ASP.NET SPA
• jQuery, jQuery UI, jQuery Validation, Knockout JS
• CSS3 メディア クエリ によるレイアウト変更
• Todo アプリケーション JavaScript ライブラリ
• todo.datacontext.js : Web API アクセス 層
• todo.viewmodel.js : TodoList ビュー モデル
• todo.model.js : TodoList, TodoItem モデル
• todo.bindings.js : knockout カスタム バインディング
• ScriptBundle / StyleBundle によるペイロード削減
bundles.Add(new ScriptBundle("~/bundles/todo").Include(
"~/Scripts/app/todo.bindings.js",
"~/Scripts/app/todo.datacontext.js",
"~/Scripts/app/todo.model.js",
"~/Scripts/app/todo.viewmodel.js"));
スクリプトの
結合と縮小化