1. Web アプリケーション パターンと .NET
CLR/H 88 回 ～雪まつりデイ！～ バージョン
日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
井上 章 (チャック) http://aka.ms/chack

2. 





2

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

4. “Web サイトが個々に独立している状態から、交換可能なコンポーネントからなる
インターネットへと移行し、さまざまな デバイスとサービス を組み合わせること
で一貫性のあるユーザー主導のエクスペリエンスを実現する”
4

5. Web アプリケーション
ネイティブ アプリケーション
サービス
5

6. +
デバイス
クライアント
+
サーバー
サービス
従来型のパターン
次世代型のパターン
(Established Patterns)
(Emerging Patterns)
6

7. 7

8. 8

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

10. 従来型 Web アプリケーション
(Established)
HTML5/CSS3 の登場 (+ ECMAScript 5)
対応 Web ブラウザーの普及 (モダン Web ブラウザー)
jQuery のデファクト スタンダード
各種 JavaScript ライブラリの登場と普及
次世代型 Web アプリケーション
(Emerging)
10

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, 2012
by Scott Hanselman
11

12. One ASP.NET 構想
12

13. 2012
13

14. 2012
14

15. 2013
15

16. 2013
16

17. 17

18. 18

19. 柔軟性に優れたモダン Web アプリ向け / 特に Web アプリ UX として SPA が最適
LightSwitch と HTML5 クライアント
19

20. REST アプローチ, OData, JSON などの要件の中で最も最適なテクノロジ
(まず Web API を試し、ニーズに合わない場合に他のテクノロジの使用を検討)
(WCF Data サービス / Workflow サービスの項目もあり。ガイド参照)
20

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

22. ASP.NET
View
Async
View
Model
クライアント
HTML
HTTP
REST
JSON
XML
Web API
サーバー
22

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

24. /Home/Index
Todo List
HTML/CSS/JS
/Home/Index
Web UI
ASP.NET MVC 4
Todo Item
knockout
jQuery
クライアント
/api/todolist
JSON/XML
/api/todo
Data Services
ASP.NET Web API
Entity Framework 5
サーバー
24

25. /Home/Index
HTML/CSS/JS
/Home/Index
Web UI
ASP.NET MVC 5
bootstrap
knockout
JSON
jQuery
/Token
ASP.NET Web API 2
/api/Account/…
クライアント
認証 Services
Entity Framework 6
サーバー
25

26. RESTful HTTP サービス構築のためのフレームワーク
ASP.NET プロジェクト テンプレートとして提供
• URL ルーティング
• モデル バインディング
• スキャフォールディング
• OData クエリパラメータ
26

27. 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() {
...
}
28

29. ASP.NET と Web 標準技術

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

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

32.  Bootstrap
http://getbootstrap.com/



http://bootswatch.com/
32

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

34. 34

35. 35

36. デスクトップ
アプリ層
Windows
ストア
Windows
ストア
Web
WPF
Win Forms
サービス層
配置先
36

37. 37

38. Appendix

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

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
40

41.  OWIN = Open Web Interface for .NET

http://owin.org/
http://katanaproject.codeplex.com/








41

42. 属性で指定されている
ルーティングをマッピング
デフォルトの
ルーティング設定
ルートとなる
プレフィックスの指定
各アクションメソッド毎の
ルート名の指定
// Web API routes
config.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 ...;
}
}
42

43. ASP.NET
SPA
ToDo サンプル
ベース
✓※
ナビゲーション
履歴管理
✓
Breeze
Knockout
✓
✓
Durandal
Hot Towel
✓
✓
✓
✓
✓
Backbone
✓
Breeze
✓
✓
✓
✓
Durandal
✓
Ember
Knockout
Ember
✓
Angular
使用 ライブラリ
Breeze
Angular
✓
Backbone
✓
✓
✓
✓
43

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

45. 45

46. Client Codes
HTML/CSS/JavaScript ...
Cache
Manifest
HTML5
online/offline Events
HTML5
DataContext
Web UI
HTML/CSS/JS
MVC
Data Services
JSON/XML
Breeze.js
Web API
Entity Framework
クライアント
Local Storage
HTML5
サーバー
46

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
47