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