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

Like this? Share it with your network

Share

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

on

  • 1,500 views

 

Statistics

Views

Total Views
1,500
Views on SlideShare
1,410
Embed Views
90

Actions

Likes
6
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 回 ~雪まつりデイ!~ バージョン Presentation Transcript

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