Your SlideShare is downloading. ×
ASP.NET シングル ページ アプリケーション (SPA) 詳説
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

ASP.NET シングル ページ アプリケーション (SPA) 詳説

7,946
views

Published on

Published in: Technology

0 Comments
17 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,946
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
59
Comments
0
Likes
17
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ASP.NET シングル ページアプリケーション (SPA) 詳説日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部エバンジェリスト井上 章 (いのうえ あきら)http://aka.ms/chack
  • 2. 2自己紹介井上 章 (チャック)日本マイクロソフト株式会社(2008 年 3 月入社)デベロッパー & プラットフォーム統括本部テクニカル エバンジェリストBlog: aka.ms/chack Twitter: @chack411専門分野現在:ASP.NET, HTML, JavaScript, Web Technology ...過去:C++/MFC/ATL, Z80, DSP, Hardware Design ...WebMatrix マン
  • 3. 3セッションのゴールSession Takeaways SPA 登場の背景を学ぶ SPA アーキテクチャを理解する Web 開発トレンドを体感する
  • 4. 4AJAXWeb アプリケーション
  • 5. 5
  • 6. 6
  • 7. 7
  • 8. 8
  • 9. 9Ajax Web アプリケーションの普及と課題Asynchronous JavaScript + XML Application目的• Web アプリの UX 向上(ページ遷移非依存)• マルチデバイス 対応実装• XMLHttpRequest と DOM 操作• Raw JSON データの操作課題• JavaScript コードの増加とスパゲッティ化• ブラウザー履歴や更新ボタン、ブックマークが機能しない• SEO (検索エンジン最適化) に弱い• オフライン実行に未対応 (オンライン前提の実装)
  • 10. 10HTML5 とモダン Web ブラウザーWeb Standards and Modern Web BrowsersHTML5/CSS3 の登場 (+ ECMAScript 5)対応 Web ブラウザーの普及 (モダン Web ブラウザー)jQuery のデファクト スタンダード各種 JavaScript の登場と普及Ajax Web アプリケーションモダン Web アプリケーション
  • 11. 11モダン Web アプリ エクスペリエンスSingle Page Application Architectureクライアント サーバーASP.NETRESTJSONXMLHTMLViewModelHTTPViewAsyncWeb API
  • 12. 12ASP.NETシングル ページ アプリケーション
  • 13. 13One ASP.NETASP.NET Web Stack
  • 14. 14ASP.NET シングル ページ アプリケーションASP.NET Single Page Application (SPA)• 単一ページ構成の Ajax アプリケーション• HTML5/CSS3 や JavaScript ライブラリを活用• 優れた Web UX の実現とマルチデバイス対応SPA※ SPA テンプレートの利用には Visual Studio 2012 Update 2 が必要ですhttp://www.microsoft.com/visualstudio/jpn/visual-studio-update
  • 15. 15ASP.NET シングル ページ アプリケーション構成ASP.NET Single Page Application Architecture/Home/IndexサーバーWeb UIASP.NET MVCData ServicesASP.NET Web APIEntity FrameworkクライアントknockoutjQueryTodo ListTodo Item/Home/Index/api/todolist/api/todoHTML/CSS/JSJSON/XML
  • 16. 16ASP.NET SPA サーバー サイド構成 #1Server Side Technologies in ASP.NET SPA• ASP.NET MVC 4 – メイン ビュー (Home/Index) の生成• コントローラー : HomeController クラス, AccountController クラス• メイン ビュー : Index.cshtml + _Layout.cshtml• 部分ビュー : _Login.chstml + _Register.cshtml• 認証 : ASP.NET 認証、OAuth/OpenID 認証 (DotNetOpenAuth)• CSRF 対策 : Html.AntiForgeryToken, ValidateAntiForgeryToken 属性public class HomeController : Controller{public ActionResult Index(string returnUrl){ViewBag.ReturnUrl = returnUrl;return View();}}Index のみ(シングル ページ) OAuth/OpenID 認証(AuthConfig.cs)
  • 17. 17ASP.NET SPA サーバー サイド構成 #2Server Side Technologies in ASP.NET SPA• ASP.NET Web API – HTTP REST サービス インターフェース• コントローラー : ToDoListController クラス, ToDoController クラス• api/TodoList : Todo リストの 参照・追加・更新・削除• api/Todo : Todo アイテムの 追加・更新・削除• API ヘルプページの自動生成、Authorize 属性による API 呼び出しの認証フィルター• Entity Framework 5 – O/R マッピング フレームワーク• DB コンテキスト : TodoItemContext クラス• エンティティ : TodoList モデル クラス, TodoItem モデル クラス• データ転送オブジェクト : TodoListDto クラス、TodoItemDto クラス
  • 18. 18ASP.NET SPA クライアント サイド構成Client Side Technologies in ASP.NET SPA• jQuery, jQuery UI, jQuery Validation, Knockout JS• CSS3 メディア クエリ によるレイアウト変更• Todo アプリケーション JavaScript ライブラリ• todo.datacontext.js : Web API アクセス 層• todo.viewmodel.js : TodoList ビュー モデル• todo.model.js : TodoList, TodoItem モデル• todo.bindings.js : knockout カスタム バインディング• ScriptBundle / StyleBundle によるペイロード削減bundles.Add(new ScriptBundle("~/bundles/todo").Include("~/Scripts/app/todo.bindings.js","~/Scripts/app/todo.datacontext.js","~/Scripts/app/todo.model.js","~/Scripts/app/todo.viewmodel.js"));スクリプトの結合と縮小化
  • 19. 19Knockout JSJavaScript Library for Data Binding• JavaScript MVVM ライブラリ• 双方向データ バインディング & UI の自動更新• View (HTML) ⇔ View Model (JavaScript)<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"));knockoutjs.com
  • 20. 20さまざまな JS ライブラリとSPA テンプレートの強化
  • 21. 21さまざまな SPA テンプレートCommunity-Created SPA Templates• Visual Studio 2012 Update 2 より標準で利用可能• ASP.NET SPA (Knockout) テンプレート• その他の SPA テンプレート• Backbone テンプレート• Breeze/Angular テンプレート• Breeze/Knockout テンプレート• Durandal テンプレート• Ember テンプレート• Hot Towel テンプレート各テンプレートの詳細: http://www.asp.net/single-page-application/overview/templates
  • 22. 22SPA テンプレート比較Community-Created SPA TemplatesASP.NETSPABackboneBreezeAngularBreezeKnockoutDurandal Ember Hot TowelToDo サンプルベース ✓ ✓ ✓ ✓ナビゲーション履歴管理 ✓ ✓ ✓ ✓ ✓使用ライブラリAngular ✓Backbone ✓Breeze ✓ ✓ ✓Durandal ✓ ✓Ember ✓Knockout ✓ ✓ ✓ ✓
  • 23. 23Breeze JSデータ管理 JavaScript ライブラリ• シンプルなデータアクセスとクエリ• クライアント キャッシング• 自己追跡エンティティ• データ バインディング(Knockout/Angular)• Promise 非同期パターン• ...www.breezejs.comvar 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);}
  • 24. 24ナビゲーション/履歴管理 #1SPA (Ajax) の弱点• SPA (Ajax) では各操作が履歴に残らない(URL が変わらない)• [戻る] ボタンなどが意図した動作をしない• ブラウザー ナビゲーションを考慮した実装が必要• [戻る] [進む] ボタンと [F5] キー、ブックマークへの対応• SEO (検索エンジン最適化) 対策Ajax 操作同じ URL履歴に残らない
  • 25. 25ナビゲーション/履歴管理 #2SPA 弱点への対応• ハッシュ フラグメント (#, #!) による Ajax コンテンツの固定リンク化• jQuery Back Button & Query (BBQ) Librarybenalman.com/projects/jquery-bbq-plugin• Sammy.jssammyjs.org• Hash.jsgithub.com/blasten/hash.js• HTML5 pushState / popState の利用• pjax (pushState + ajax)github.com/defunkt/jquery-pjaxhttp://www.example.com/#/detailsベース URL ハッシュ フラグメント
  • 26. 26SPA のオフライン実行への対応 #1HTML5 Application Cache と Local Data StoreClient CodesHTML/CSS/JavaScript ...サーバーWeb UIHTML/CSS/JSMVC 4Data ServicesJSON/XMLWeb APILocal StorageHTML5Entity FrameworkBreeze.jsDataContextCacheManifestHTML5クライアントonline/offline EventsHTML5
  • 27. 27SPA のオフライン実行への対応 #2Online/Offline events と Breeze Export/Import API• Online/Offline イベント• Breeze Export/Import API と localStorage// Save changes offline; restore latervar changes = manager.getChanges();var exportData = manager.exportEntities(changes);window.localStorage.setItem("changes", exportData);...var importData = window.localStorage.getItem("changes");manager.importEntities(importData);window.addEventListener("online", function () { ... }, false);window.addEventListener("offline", function () { ... }, false);
  • 28. 28Web 開発のトレンドとプラットフォーム
  • 29. 29Web アプリ開発のトレンドこれからの Web アプリケーションで考えなければならないこと• マルチデバイス対応• クロス デバイス、クロス プラットフォーム、クロス ブラウザー• レスポンシブ Web デザイン、jQuery Mobile、デバイス判別• モダン Web アプリケーション• Single Page Application (SPA) アーキテクチャ• HTTP REST サービス (Web API)• リアルタイム コミュニケーション• クラウド環境の活用とサービス品質の向上• アプリケーション スケーラビリティの確保• 運用・保守・管理コストの削減
  • 30. 30ASP.NET プラットフォームASP.NET Web Stack and Web Standards

×