View
8.212
Download
0
Category
Preview:
Citation preview
ASP.NET シングル ページアプリケーション (SPA) 詳説
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上 章 (いのうえ あきら)
http://aka.ms/chack
2
自己紹介
井上 章 (チャック)
日本マイクロソフト株式会社（2008 年 3 月入社）
デベロッパー & プラットフォーム統括本部
テクニカル エバンジェリスト
Blog: aka.ms/chack Twitter: @chack411
専門分野
現在：ASP.NET, HTML, JavaScript, Web Technology ...
過去：C++/MFC/ATL, Z80, DSP, Hardware Design ...
WebMatrix マン
3
セッションのゴールSession Takeaways
SPA 登場の背景を学ぶ
SPA アーキテクチャを理解する
Web 開発トレンドを体感する
4
AJAXWeb アプリケーション
5
6
7
8
9
Ajax Web アプリケーションの普及と課題Asynchronous JavaScript + XML Application
目的•Web アプリの UX 向上（ページ遷移非依存）
•マルチデバイス 対応
実装• XMLHttpRequest と DOM 操作
• Raw JSON データの操作
課題
• JavaScript コードの増加とスパゲッティ化
•ブラウザー履歴や更新ボタン、ブックマークが機能しない
• SEO (検索エンジン最適化) に弱い
•オフライン実行に未対応 (オンライン前提の実装)
10
HTML5 とモダン Web ブラウザーWeb Standards and Modern Web Browsers
HTML5/CSS3 の登場 (+ ECMAScript 5)
対応 Web ブラウザーの普及 (モダン Web ブラウザー)
jQuery のデファクト スタンダード
各種 JavaScript の登場と普及
Ajax Web アプリケーション
モダン Web アプリケーション
11
モダン Web アプリ エクスペリエンスSingle Page Application Architecture
クライアント サーバー
ASP.NET
RESTJSONXML
HTML
View Model
HTTPView
Async
Web API
12
ASP.NETシングル ページ アプリケーション
13
One ASP.NETASP.NET Web Stack
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
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
ASP.NET SPA サーバー サイド構成 #1Server 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
ASP.NET SPA サーバー サイド構成 #2Server 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
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"));
スクリプトの結合と縮小化
19
Knockout JSJavaScript Library for Data Binding
• JavaScript MVVM ライブラリ
• 双方向データ バインディング & UI の自動更新
• View (HTML) ⇔ View Model (JavaScript)
<p>First name: <input data-bind="value: firstName" /></p><p>Last name: <input data-bind="value: lastName" /></p><p>Full name: <span data-bind="text: fullName"></span></p>
var ViewModel = function(firstName, lastName) {this.firstName = ko.observable(firstName);this.lastName = ko.observable(lastName);this.fullName = ko.computed(function() {
return this.firstName() + " " + this.lastName();}, this);
};ko.applyBindings(new ViewModel("Akira, "Inoue"));
knockoutjs.com
20
さまざまな JS ライブラリとSPA テンプレートの強化
21
さまざまな SPA テンプレートCommunity-Created SPA Templates
• Visual Studio 2012 Update 2 より標準で利用可能
• ASP.NET SPA (Knockout) テンプレート
• その他の SPA テンプレート
• Backbone テンプレート
• Breeze/Angular テンプレート
• Breeze/Knockout テンプレート
• Durandal テンプレート
• Ember テンプレート
• Hot Towel テンプレート
各テンプレートの詳細: http://www.asp.net/single-page-application/overview/templates
22
SPA テンプレート比較Community-Created SPA Templates
ASP.NETSPA
BackboneBreezeAngular
BreezeKnockout
Durandal Ember Hot Towel
ToDo サンプルベース ✓ ✓ ✓ ✓
ナビゲーション履歴管理 ✓ ✓ ✓ ✓ ✓
使用
ライ
ブラ
リ
Angular ✓
Backbone ✓
Breeze ✓ ✓ ✓
Durandal ✓ ✓
Ember ✓
Knockout ✓ ✓ ✓ ✓
23
Breeze JSデータ管理 JavaScript ライブラリ
• シンプルなデータアクセスとクエリ
• クライアント キャッシング
• 自己追跡エンティティ
• データ バインディング(Knockout/Angular)
• Promise 非同期パターン
• ...
www.breezejs.comvar manager =
new breeze.EntityManager('api/northwind');
var query = new breeze.EntityQuery().from("Employees").orderBy("LastName").where("LastName", "startsWith", "P");
manager.executeQuery(query).then(function(data){
ko.applyBindings(data);}).fail(function(e) { alert(e); });
if (manager.hasChanges()) {manager.saveChanges()
.then(saveSucceeded)
.fail(saveFailed);}
24
ナビゲーション/履歴管理 #1SPA (Ajax) の弱点
• SPA (Ajax) では各操作が履歴に残らない（URL が変わらない）
• [戻る] ボタンなどが意図した動作をしない
• ブラウザー ナビゲーションを考慮した実装が必要
• [戻る] [進む] ボタンと [F5] キー、ブックマークへの対応
• SEO (検索エンジン最適化) 対策
Ajax 操作
同じ URL
履歴に残らない
25
ナビゲーション/履歴管理 #2SPA 弱点への対応
• ハッシュ フラグメント (#, #!) による Ajax コンテンツの固定リンク化
• jQuery Back Button & Query (BBQ) Librarybenalman.com/projects/jquery-bbq-plugin
• Sammy.jssammyjs.org
• Hash.jsgithub.com/blasten/hash.js
• HTML5 pushState / popState の利用
• pjax (pushState + ajax)github.com/defunkt/jquery-pjax
http://www.example.com/#/details
ベース URL ハッシュ フラグメント
26
SPA のオフライン実行への対応 #1HTML5 Application Cache と Local Data Store
Client CodesHTML/CSS/JavaScript ...
サーバー
Web UIHTML/CSS/JS
MVC 4
Data ServicesJSON/XML
Web API
Local StorageHTML5
Entity Framework
Breeze.js
DataContext
Cache ManifestHTML5
クライアント
online/offline EventsHTML5
27
SPA のオフライン実行への対応 #2Online/Offline events と Breeze Export/Import API
• Online/Offline イベント
• Breeze Export/Import API と localStorage
// Save changes offline; restore latervar changes = manager.getChanges();var exportData = manager.exportEntities(changes);window.localStorage.setItem("changes", exportData);
...
var importData = window.localStorage.getItem("changes");manager.importEntities(importData);
window.addEventListener("online", function () { ... }, false);
window.addEventListener("offline", function () { ... }, false);
28
Web 開発のトレンドとプラットフォーム
29
Web アプリ開発のトレンドこれからの Web アプリケーションで考えなければならないこと
• マルチデバイス対応
• クロス デバイス、クロス プラットフォーム、クロス ブラウザー
• レスポンシブ Web デザイン、jQuery Mobile、デバイス判別
• モダン Web アプリケーション
• Single Page Application (SPA) アーキテクチャ
• HTTP REST サービス (Web API)
• リアルタイム コミュニケーション
• クラウド環境の活用とサービス品質の向上
• アプリケーション スケーラビリティの確保
• 運用・保守・管理コストの削減
30
ASP.NET プラットフォームASP.NET Web Stack and Web Standards
Recommended