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

4,061 views
3,864 views

Published on

Published in: Technology

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

×