web アプリケーション パターンと .net - clr/h 88 回 ～雪まつりデイ！～...

Web アプリケーション パターンと .NETCLR/H 88 回 ～雪まつりデイ！～ バージョン

日本マイクロソフト株式会社

デベロッパー & プラットフォーム統括本部

井上 章 (チャック) http://aka.ms/chack

2

Web アプリケーション パターンの進化と One ASP.NET

4

“Web サイトが個々に独立している状態から、交換可能なコンポーネントからなる

インターネットへと移行し、さまざまな デバイスとサービス を組み合わせること

で一貫性のあるユーザー主導のエクスペリエンスを実現する”

5

サービス

ネイティブ アプリケーション

Web アプリケーション

6

サービス

デバイス

+

+

次世代型のパターン(Emerging Patterns)

サーバー

クライアント

従来型のパターン(Established Patterns)

7

8

9

.hoge {color: red;background-color: #b6ff00;border-radius: 8px;

}

10

HTML5/CSS3 の登場 (+ ECMAScript 5)

対応 Web ブラウザーの普及 (モダン Web ブラウザー)

jQuery のデファクト スタンダード

各種 JavaScript ライブラリの登場と普及

従来型 Web アプリケーション

次世代型 Web アプリケーション

(Established)

(Emerging)

11

"More and more of ASP.NET is open source. We want to make ASP.NET more pluggable, more open, more fun."

"We've got big things planned - some that will surprise you."

February 25, 2012by Scott Hanselman

12

One ASP.NET 構想

13

2012

14

2012

15

2013

16

2013

17

18

19

LightSwitch と HTML5 クライアント

柔軟性に優れたモダン Web アプリ向け / 特に Web アプリ UX として SPA が最適

20

REST アプローチ, OData, JSON などの要件の中で最も最適なテクノロジ(まず Web API を試し、ニーズに合わない場合に他のテクノロジの使用を検討)

(WCF Data サービス / Workflow サービスの項目もあり。ガイド参照)

シングルページ アプリケーションアーキテクチャと HTTP サービス

22

クライアント サーバー

ASP.NET

RESTJSONXML

HTML

View Model

HTTPView

Async

Web API

23

SPA

※ SPA テンプレートの利用には Visual Studio 2013 または Visual Studio 2012 Update 2 以降が必要ですhttp://www.microsoft.com/visualstudio/jpn/visual-studio-update

24

/Home/Index

サーバー

Web UI

ASP.NET MVC 4

Data Services

ASP.NET Web API

Entity Framework 5

クライアント

knockout

jQuery

Todo List

Todo Item

/Home/Index

/api/todolist

/api/todo

HTML/CSS/JS

JSON/XML

25

サーバー

Web UI

ASP.NET MVC 5

認証 Services

ASP.NET Web API 2

Entity Framework 6

HTML/CSS/JS

JSON

クライアント

/Home/Index

knockout

jQuery

bootstrap

/Home/Index

/Token

/api/Account/…

26

RESTful HTTP サービス構築のためのフレームワーク

ASP.NET プロジェクト テンプレートとして提供

• URL ルーティング

• モデル バインディング

• スキャフォールディング

• OData クエリパラメータ

27

28

CORS - Cross Origin Resource Sharing

http://www.w3.org/TR/cors/

public static class WebApiConfig {public static void Register(HttpConfiguration config) {

config.EnableCors(); // CORS の有効化

...

[EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]public HttpResponseMessage Get() {

...}

ASP.NET と Web 標準技術

30

各テンプレートの詳細: http://www.asp.net/single-page-application/overview/templates

31

www.breezejs.com

var 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);}

32

Bootstrap http://getbootstrap.com/

http://bootswatch.com/

Web アプリケーションのサービス基盤を支える .NET

34

35

36

Windowsストア

アプリ層

配置先

サービス層

Windowsストア

デスクトップ

WPF

Win Forms

Web

37

Appendix

39

http://www.buildinsider.net/hub/bioff/c3

40

http://www.buildinsider.net/hub/bioff/d2

http://www.buildinsider.net/hub/bioff/a4

http://www.youtube.com/watch?v=mthJafI75Rs

http://www.youtube.com/watch?v=uG8VRK4IeUs

41

OWIN = Open Web Interface for .NET

http://katanaproject.codeplex.com/

http://owin.org/

42

// Web API routesconfig.MapHttpAttributeRoutes();

config.Routes.MapHttpRoute(name: "DefaultApi",routeTemplate: "api/{controller}/{id}",defaults: new { id = RouteParameter.Optional }

);

[RoutePrefix("api/Account")]public class AccountController : ApiController{

// GET api/Account/UserInfo[Route("UserInfo")]public UserInfoViewModel GetUserInfo(){

return ...;}

}

属性で指定されているルーティングをマッピング

デフォルトのルーティング設定

ルートとなるプレフィックスの指定

各アクションメソッド毎のルート名の指定

43

ASP.NETSPA

BackboneBreezeAngular

BreezeKnockout

Durandal Ember Hot Towel

ToDo サンプルベース ✓※ ✓ ✓ ✓

ナビゲーション履歴管理 ✓ ✓ ✓ ✓ ✓

使用

ライ

ブラ

リ

Angular ✓

Backbone ✓

Breeze ✓ ✓ ✓

Durandal ✓ ✓

Ember ✓

Knockout ✓ ✓ ✓ ✓

44

knockoutjs.com

<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"));

45

46

Client CodesHTML/CSS/JavaScript ...

サーバー

Web UIHTML/CSS/JS

MVC

Data ServicesJSON/XML

Web API

Local StorageHTML5

Entity Framework

Breeze.js

DataContext

Cache ManifestHTML5

online/offline EventsHTML5

クライアント

47

Project Silk (シルク)

Client-Side Web Development for Modern Browsers

モダン ブラウザのためのクライアント サイド Web 開発ガイダンス

http://silk.codeplex.com/

Project Liike (リーケ)

Building Modern Mobile Web Apps

モダン モバイル ブラウザのためのクライアント サイド Web 開発ガイダンス

http://msdn.microsoft.com/en-us/library/hh994907