Web アプリケーション パターンと .NET
CLR/H 88 回 ~雪まつりデイ!~ バージョン

日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
井上 章 (チャック) http://aka.ms/chack








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

4
Web アプリケーション

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

サービス

5
+
デバイス

クライアント

+
サーバー

サービス

従来型のパターン

次世代型のパターン

(Established Patterns)

(Emerging Patterns)

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

9
従来型 Web アプリケーション
(Established)

HTML5/CSS3 の登場 (+ ECMAScript 5)
対応 Web ブラウザーの普及 (モダン Web ブラウザー)
jQuery のデファクト スタンダード

各種 J...
"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 t...
One ASP.NET 構想

12
2012

13
2012

14
2013

15
2013

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

LightSwitch と HTML5 クライアント

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

(WCF Data サービス / Workflow サービスの項目もあり...
シングルページ アプリケーション
アーキテクチャと HTTP サービス
ASP.NET
View
Async
View
Model

クライアント

HTML
HTTP

REST
JSON
XML

Web API

サーバー
22


SPA




※ SPA テンプレートの利用には Visual Studio 2013 または Visual Studio 2012 Update 2 以降が必要です
http://www.microsoft.com/visuals...
/Home/Index
Todo List

HTML/CSS/JS
/Home/Index

Web UI
ASP.NET MVC 4

Todo Item

knockout
jQuery

クライアント

/api/todolist

J...
/Home/Index

HTML/CSS/JS
/Home/Index

Web UI
ASP.NET MVC 5

bootstrap
knockout

JSON

jQuery

/Token

ASP.NET Web API 2
/a...
RESTful HTTP サービス構築のためのフレームワーク
ASP.NET プロジェクト テンプレートとして提供

• URL ルーティング
• モデル バインディング

• スキャフォールディング
• OData クエリパラメータ
26
27
 CORS - Cross Origin Resource Sharing



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



public static class WebApiConfig {
public stat...
ASP.NET と Web 標準技術







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

30
www.breezejs.com







var manager =
new breeze.EntityManager('api/northwind');
var query = new breeze.EntityQuery(...
 Bootstrap

http://getbootstrap.com/






http://bootswatch.com/

32
Web アプリケーションの
サービス基盤を支える .NET
34
35
デスクトップ
アプリ層

Windows
ストア

Windows
ストア

Web

WPF
Win Forms
サービス層

配置先
36
37
Appendix
http://www.buildinsider.net/hub/bioff/c3

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

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

http://www.youtube.com/watch?v=mthJafI...
 OWIN = Open Web Interface for .NET


http://owin.org/

http://katanaproject.codeplex.com/











41
属性で指定されている
ルーティングをマッピング
デフォルトの
ルーティング設定
ルートとなる
プレフィックスの指定
各アクションメソッド毎の
ルート名の指定

// Web API routes
config.MapHttpAttributeR...
ASP.NET
SPA

ToDo サンプル
ベース

✓※

ナビゲーション
履歴管理

✓

Breeze
Knockout

✓

✓

Durandal

Hot Towel

✓
✓

✓

✓

✓

Backbone

✓

Br...



knockoutjs.com


<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: la...
45
Client Codes
HTML/CSS/JavaScript ...

Cache
Manifest
HTML5

online/offline Events
HTML5

DataContext

Web UI
HTML/CSS/JS

...
Project Silk

(シルク)

Client-Side Web Development for Modern Browsers

モダン ブラウザのための
クライアント サイド Web 開発ガイダンス
http://silk.code...
Web アプリケーション パターンと .NET - CLR/H 88 回 ~雪まつりデイ!~ バージョン
Upcoming SlideShare
Loading in...5
×

Web アプリケーション パターンと .NET - CLR/H 88 回 ~雪まつりデイ!~ バージョン

3,535

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,535
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Web アプリケーション パターンと .NET - CLR/H 88 回 ~雪まつりデイ!~ バージョン

  1. 1. Web アプリケーション パターンと .NET CLR/H 88 回 ~雪まつりデイ!~ バージョン 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 井上 章 (チャック) http://aka.ms/chack
  2. 2.       2
  3. 3. Web アプリケーション パターンの 進化と One ASP.NET
  4. 4. “Web サイトが個々に独立している状態から、交換可能なコンポーネントからなる インターネットへと移行し、さまざまな デバイスとサービス を組み合わせること で一貫性のあるユーザー主導のエクスペリエンスを実現する” 4
  5. 5. Web アプリケーション ネイティブ アプリケーション サービス 5
  6. 6. + デバイス クライアント + サーバー サービス 従来型のパターン 次世代型のパターン (Established Patterns) (Emerging Patterns) 6
  7. 7. 7
  8. 8. 8
  9. 9. .hoge { color: red; background-color: #b6ff00; border-radius: 8px; } 9
  10. 10. 従来型 Web アプリケーション (Established) HTML5/CSS3 の登場 (+ ECMAScript 5) 対応 Web ブラウザーの普及 (モダン Web ブラウザー) jQuery のデファクト スタンダード 各種 JavaScript ライブラリの登場と普及 次世代型 Web アプリケーション (Emerging) 10
  11. 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. 12. One ASP.NET 構想 12
  13. 13. 2012 13
  14. 14. 2012 14
  15. 15. 2013 15
  16. 16. 2013 16
  17. 17. 17
  18. 18. 18
  19. 19. 柔軟性に優れたモダン Web アプリ向け / 特に Web アプリ UX として SPA が最適 LightSwitch と HTML5 クライアント 19
  20. 20. REST アプローチ, OData, JSON などの要件の中で最も最適なテクノロジ (まず Web API を試し、ニーズに合わない場合に他のテクノロジの使用を検討) (WCF Data サービス / Workflow サービスの項目もあり。ガイド参照) 20
  21. 21. シングルページ アプリケーション アーキテクチャと HTTP サービス
  22. 22. ASP.NET View Async View Model クライアント HTML HTTP REST JSON XML Web API サーバー 22
  23. 23.  SPA   ※ SPA テンプレートの利用には Visual Studio 2013 または Visual Studio 2012 Update 2 以降が必要です http://www.microsoft.com/visualstudio/jpn/visual-studio-update 23
  24. 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. 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. 26. RESTful HTTP サービス構築のためのフレームワーク ASP.NET プロジェクト テンプレートとして提供 • URL ルーティング • モデル バインディング • スキャフォールディング • OData クエリパラメータ 26
  27. 27. 27
  28. 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. 29. ASP.NET と Web 標準技術
  30. 30.          各テンプレートの詳細: http://www.asp.net/single-page-application/overview/templates 30
  31. 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. 32.  Bootstrap http://getbootstrap.com/    http://bootswatch.com/ 32
  33. 33. Web アプリケーションの サービス基盤を支える .NET
  34. 34. 34
  35. 35. 35
  36. 36. デスクトップ アプリ層 Windows ストア Windows ストア Web WPF Win Forms サービス層 配置先 36
  37. 37. 37
  38. 38. Appendix
  39. 39. http://www.buildinsider.net/hub/bioff/c3 39
  40. 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. 41.  OWIN = Open Web Interface for .NET  http://owin.org/ http://katanaproject.codeplex.com/         41
  42. 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. 43. ASP.NET SPA ToDo サンプル ベース ✓※ ナビゲーション 履歴管理 ✓ Breeze Knockout ✓ ✓ Durandal Hot Towel ✓ ✓ ✓ ✓ ✓ Backbone ✓ Breeze ✓ ✓ ✓ ✓ Durandal ✓ Ember Knockout Ember ✓ Angular 使用 ライブラリ Breeze Angular ✓ Backbone ✓ ✓ ✓ ✓ 43
  44. 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. 45
  46. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×