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