• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web アプリケーション パターンと .NET - CLR/H 88 回 ~雪まつりデイ!~ バージョン
 

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

on

  • 1,240 views

 

Statistics

Views

Total Views
1,240
Views on SlideShare
1,150
Embed Views
90

Actions

Likes
5
Downloads
8
Comments
0

1 Embed 90

https://twitter.com 90

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 のデファクト スタンダード 各種 JavaScript ライブラリの登場と普及 次世代型 Web アプリケーション (Emerging) 10
    • "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
    • 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 サービスの項目もあり。ガイド参照) 20
    • シングルページ アプリケーション アーキテクチャと 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/visualstudio/jpn/visual-studio-update 23
    • /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
    • /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
    • RESTful HTTP サービス構築のためのフレームワーク ASP.NET プロジェクト テンプレートとして提供 • URL ルーティング • モデル バインディング • スキャフォールディング • OData クエリパラメータ 26
    • 27
    •  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
    • 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() .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
    •  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=mthJafI75Rs http://www.youtube.com/watch?v=uG8VRK4IeUs 40
    •  OWIN = Open Web Interface for .NET  http://owin.org/ http://katanaproject.codeplex.com/         41
    • 属性で指定されている ルーティングをマッピング デフォルトの ルーティング設定 ルートとなる プレフィックスの指定 各アクションメソッド毎の ルート名の指定 // 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
    • ASP.NET SPA ToDo サンプル ベース ✓※ ナビゲーション 履歴管理 ✓ Breeze Knockout ✓ ✓ Durandal Hot Towel ✓ ✓ ✓ ✓ ✓ Backbone ✓ Breeze ✓ ✓ ✓ ✓ Durandal ✓ Ember Knockout Ember ✓ Angular 使用 ライブラリ Breeze Angular ✓ Backbone ✓ ✓ ✓ ✓ 43
    •   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
    • 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
    • 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