Web アプリケーション パターンと .NET - CLR/H 88 回 ～雪まつりデイ！～...
48
Web アプリケーション パターンと .NET CLR/H 88 回 ～雪まつりデイ！～ バージョン 日本マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 井上 章 ( チャック ) http://aka.ms/chack
-
Upload
akira-inoue -
Category
Technology
-
view
3.436 -
download
3
Transcript of 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
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
