SPAに必要なJavaScriptFrameWork

5,506 views

Published on

html5jエンタープライズ部 第7回ナイトセミナーのスライド(1/27)

Published in: Technology

SPAに必要なJavaScriptFrameWork

  1. 1. SPA (Single-Page-Application)            における JavaScriptFrameWork           のお話
  2. 2. 自己紹介 酒巻 瑞穂 ■業務系のSE屋さん ■活動とか   ◆ HTML5j エンタープライズ部(スタッフ)   ◆ HTML5j Webプラットフォーム部(スタッフ)   ◆ FireFoxOS コードリーティング (わるだくらみ補佐) Twitter:https://twitter.com/SakamakiM Facebook:https://twitter.com/SakamakiM
  3. 3. Single Page Application
  4. 4. 単一のHTMLファイル?
  5. 5. 一度の描画で全部取る?
  6. 6. 「Page」とは何なのか?
  7. 7. SPA描画の流れ
  8. 8. SPA描画の流れ 画面
  9. 9. SPA描画の流れ 画面 コンテンツ
  10. 10. SPA描画の流れ 画面 コンテンツ 断片化したHTMLファイル
  11. 11. SPA描画の流れ View 画面 使用するユーザーや 状況により変わる! コンテンツ Page ほぼ決まっている 基礎フレーム部分 (プレースホルダー) 断片化したHTMLファイル
  12. 12. PageとViewを分ける意味 View Page
  13. 13. 再利用性とパフォーマンス ナビゲーション メニュー Page 常に表示 設定ページ RSS ページ あまり 使わない
  14. 14. 状況/目的による切り分け ナビゲーション メニュー Page Offline でも使う 設定ページ RSS ページ Network 必須
  15. 15. SPAにおけるServerの役割
  16. 16. SPAにおけるServerの役割 UIの処理を持たない
  17. 17. SPAにおけるServerの役割 UIの処理を持たない 状態を持たない
  18. 18. SPAにおけるServerの役割 UIの処理を持たない 状態を持たない リソースの提供
  19. 19. SPAにおけるClientの役割 UIの処理を持たない ルーティング処理 クライアント側で ページ遷移を求められる。 (ページの切り替えはクライアントで!) 状態を持たない リソースの提供
  20. 20. SPAにおけるClientの役割 UIの処理を持たない ルーティング処理 クライアント側で ページ遷移を求められる。 (ページの切り替えはクライアントで!) 状態を持たない ビジネスロジックと状態 クライアント側でビジネスロジックと データ、状態の管理を行う。 リソースの提供
  21. 21. SPAにおけるClientの役割 UIの処理を持たない ルーティング処理 クライアント側で ページ遷移を求められる。 (ページの切り替えはクライアントで!) 状態を持たない ビジネスロジックと状態 クライアント側でビジネスロジックと データ、状態の管理を行う。 リソースの提供 データの取得 Ajax、またはWebSocket等の リソース取得手段が必要
  22. 22. UIとBLS の同期 BLS 描画 (UI) コンテンツ リソース アクセス ルーティング 状態管理
  23. 23. コンテンツを組み合わせると 同じような処理が多数発生!! BLS 通信 BLS 状態管理 通信 Route Route BLS 通信 状態管理 状態管理 処理
  24. 24. ExtJS
  25. 25. 軽い説明 ダウンロード:http://angularjs.org/ APIドキュメント:http://docs.angularjs.org/api/ ライブラリ:http://ngmodules.org ライセンス:MIT ダウンロード、APIドキュメント、ライブラリ:http://backbonejs.org/ ライセンス:MIT ExtJS ダウンロード:https://www.sencha.com/products/extjs/download APIドキュメント:http://docs.sencha.com/extjs ライブラリ:https://market.sencha.com/ ライセンス:GPLv3
  26. 26. 今回のお題! (MVP or MVC) DOM (UI) Template View Data-binding router Presenter Or Controller Model ServerAccess Ajax WebSocket
  27. 27. 今回のお題! (MVP or MVC) DOM (UI) Template Domへのアプローチ View Data-binding router Presenter Or Controller Model ServerAccess Ajax WebSocket
  28. 28. 今回のお題! (MVP or MVC) DOM (UI) Template Domへのアプローチ ルーティング 状態管理 View Data-binding router Presenter Or Controller Model ServerAccess Ajax WebSocket
  29. 29. 今回のお題! (MVP or MVC) DOM (UI) Template Domへのアプローチ ルーティング 状態管理 ビジネスロジック View Data-binding router Presenter Or Controller Model ServerAccess Ajax WebSocket
  30. 30. 今回のお題! (MVP or MVC) DOM (UI) Template Domへのアプローチ ルーティング 状態管理 ビジネスロジック View Data-binding router Presenter Or Controller Model モデルとビューの同期 ServerAccess Ajax WebSocket
  31. 31. 今回のお題! (MVP or MVC) DOM (UI) Template Domへのアプローチ ルーティング 状態管理 ビジネスロジック View Data-binding router Presenter Or Controller Model モデルとビューの同期 外部リソースへのアクセス ServerAccess Ajax WebSocket
  32. 32. DOM (UI) Template (カスタムHTML) Domへのアプローチ ★カスタムHTMLテンプレート Angularでは一度テンプレートと呼ばれる ベースHTMLを読み込み、コンパイル することで、JavaScriptに密接に紐付く Controller DOMツリーし、画面描画します。 (directive) View (compileDOM) ★独自タグでイベントを定義するメリット DataBinding controllerで定義されたビューイベントは命令的です。 viewと完全に切り離されているため、再利用性とテス トコードからのアプローチが容易です ngRouter Presenter (Controller) Model (POJO) 対して directiveで定義されたイベントは宣言的であり HTML自体が宣言的な言語であるため、自然な流れ でHTMLへの独自拡張、欠点を補うことができます。 ServerAccess (Angular.$http) (Factory)
  33. 33. DOM (UI) Template (カスタムHTML) ルーティング AngularJSチームが作成しているngRouteを使う ことでルーティング処理が可能になります。 より高機能なAngularUI Routerと言う サードパーティ製ライブラリもあります。 Controller (directive) View (compileDOM) DataBinding ngRouter Presenter (Controller) 状態管理 cookieについては、AngularJSチームが作成した、 cookie制御用のライブラリAngular-cookieがあり ます。 Model (POJO) localstrageの制御については、 AngularLocalstrageというサードパーティ製ライブ ラリがあります。 ServerAccess (Angular.$http) (Factory)
  34. 34. DOM (UI) Template (カスタムHTML) ビジネスロジック AngularのビジネスロジックはServiceを用いてビジネスロ ジックを実装します。 Serviceには色々ありますが、それぞれ用途に応じて使い分 けます。 格納されるのはJavaScriptObjectです。 Controller (directive) factory シンプルなBusinessLogicの実装、Service登録するまでも ない軽量なBLSの定義ができる。 service サービスの登録ができる、モジュールを横断した使用が可能 provider 初期化時の振る舞いなど、細やかな制御ができるサービス を登録することができます。 View (compileDOM) DataBinding ngRouter Presenter (Controller) Model (POJO) vlaue Moduleを横断してつかえるJavaScriptObjectを定義できま す constant Moduleを横断してつかえる値の定義ですが、valueと違い、 上書きできません。 ServerAccess (Angular.$http) (Factory)
  35. 35. DOM (UI) Template (カスタムHTML) モデルとビューの同期 Angularには双方向バインディング機能があ ります。 そのため、開発者は、ほぼ自然に Controller Viewとロジックの同期を取ること (directive) ができます。 しかしながら、この双方向バインディングはパ フォーマンスなどの問題が発生する可能性が あります。 View (compileDOM) DataBinding ngRouter Presenter (Controller) Model (POJO) ServerAccess (Angular.$http) (Factory)
  36. 36. DOM (UI) Template (カスタムHTML) 外部リソースへのアクセス Ajaxでの遣り取りは、単純なものであれば、 $Httpを使います。 Ajax通信部分を、モジュール内で 再利用可能なコンポーネントとして 定義したい場合、ngResourceを使い プロバイダとして定義できます。 Controller (directive) WebSocketを使用する場合は、Factory等で再 利用可能な形で定義して使用する事が一般的 です。 View (compileDOM) DataBinding ngRouter Presenter (Controller) Model (POJO) ServerAccess (Angular.$http) (Factory)
  37. 37. DOM (UI) Template (html、ejs) Domへのアプローチ DOMの構築はBackbone.VIewを用い て定義します。 Bacbone.View内のrenderでDOM要素 の構築を行うことができます。 View (Backbone.View) しかしながら、より簡単にするために、追 加のライブラリを用いてテンプレートエン ジンを使うことが一般的です。 Backbone.StickIt テンプレートエンジンは様々なものが用 意されており、目的に応じてある程度選 択できます。 Backbone. Router Presenter (JS Object) Model (Backbone.Model) ServerAccess (Backbone.sync)
  38. 38. DOM (UI) Template (html、ejs) ルーティング Backbone.Routerを使うことで 基本的なルーティング処理は実現できます。 しかし、Backbone.Routerには状態管理やネス トしたルーティング管理を持たないため、 状態管理を行いたい場合はサードパーティ製ラ イブラリを用いる必要があります。 状態管理 状態の制御、cookieとLocalstrageの管理です。 制御には、サードパーティ製ライブラリを用いま す。 Jqueryライブラリのjquery.cookieと BackboneLocalstrageが有名です。 View (Backbone.View) Backbone. Router Backbone.StickIt Presenter (JS Object) Model (Backbone.Model) ServerAccess (Backbone.sync)
  39. 39. DOM (UI) Template (html、ejs) ビジネスロジック BackboneはビジネスロジックはModelと Collectionを用いて定義します。 ・Backbone.Mode データのCRUDと保持を担当 View (Backbone.View) Backbone.StickIt ・Backbone.Collection Modelの集合体 簡単なアプリケーションであればプレーンな Backboneでも問題ないですが、 規模のおおきな開発では定形コードの削減や コード全般の汚染を防ぐため Backbone.Marionetteを使うのをお勧めしま す。 Backbone. Router Presenter (JS Object) Model (Backbone.Model) ServerAccess (Backbone.sync)
  40. 40. DOM (UI) Template (html、ejs) モデルとビューの同期 Backboneは単体ではデータバインディ ング機能を持っていません。 もし、データバインディングが必要となる 場合は、サードパーティ製ライブラリ (Backbone.StickIt等)を使うことで実現 できるようになります。 しかし、明示的に定義していかなければ ならないため、AngularJSよりはコードが 煩雑になります。 View (Backbone.View) Backbone. Router Backbone.StickIt Presenter (JS Object) Model (Backbone.Model) ServerAccess (Backbone.sync)
  41. 41. DOM (UI) 外部リソースへのアクセス Template (html、ejs) View (Backbone.View) Ajax通信を行う場合は、Backbone.syncにAjax 通信の機能があるのでそれを使用します。 Backbone.StickIt WebSocket通信を行う場合はBackbone.syncを オーバーライドして使います。 syncの仕様 http://backbonejs.org/#Sync Presenter (JS Object) Model (Backbone.Model) ServerAccess (Backbone.sync)
  42. 42. ExtJS DOM (UI) Template (Ext.Template) Domへのアプローチ DOMの構築はExt.Componentを継承した 様々なレイアウト用クラスが使用できます。 一部例) Ext.button.Button(ボタン) Ext.grid.Panel(Grid) Ext.form.Label(ラベル) Ext.Template DOMを容易に生成する為のクラスです。 文字列、またはJSON形式で定義します。 Ext.XTemplateはExt.Templateを継承したク ラスとなっており、比較演算子や条件分 岐、Ext.view.Viewを中継してExxt.XTemplate とExt.data.Storeとの紐付けも可能です。 View (Ext.Component) Controller (Ext.app.Controller) Model (Ext.data.Model) ServerAccess (Ext.data.Ajax) (Ext.ux.WebSocket)
  43. 43. ExtJS DOM (UI) Template (Ext.Template) ルーティング ExtJSはMVCフレームワークのため、MVP特 有のルーティング機能は提供されていません。 Routerを使用したい場合、ユーザーエクステン ションのExt.ux.Routerと言う軽量ライブラリが 存在します。 View (Ext.Component) Controller (Ext.app.Controller) 状態管理 Cookies、Localstorageを用いて状態管理を行 う場合、ExtJSではExt.state.Providerクラスを 継承した以下の機能を使います。 Ext.state.CookieProvider クッキー用の状態保持クラス Ext.state.LocalStorageProvider Localstrage用の状態保持クラス Model (Ext.data.Model) ServerAccess (Ext.data.Ajax) (Ext.ux.WebSocket)
  44. 44. ExtJS ビジネスロジック (モデルとビューの同期) ExtJSのビジネスロジックはExt.data.Model と、Ext.data.Storeで成り立ちます。 DOM (UI) Template (Ext.Template) View (Ext.Component) Ext.data.Model データの保持とCRUDを担当する。 Controller (Ext.app.Controller) Ext.data.Store Modelの集合体 Ext.Componentを継承したViewに当たる機能 は、内部にStoreManagerを所持してお り、StoreオプションにModel(Store)を設定す るとこでViewとModelの紐付きを行えます。 Model (Ext.data.Model) ServerAccess (Ext.data.Ajax) (Ext.ux.WebSocket)
  45. 45. ExtJS DOM (UI) Template (Ext.Template) 外部リソースへのアクセス ExtJSにはAjax通信用のクラスが用意されて います。 Ext.Ajaxを用いた柔軟な通信の他 に、Ext.data.Readerを用いてModelを生成す るExt.data.AjaxProxyや、Rest通信用の Ext.data.RestProxyなど、目的に応じた様々な クラスが用意されています。 WebSocket通信に関しては、ユーザーエクス テンションでExt.ux.WebSocketがあります。 View (Ext.Component) Controller (Ext.app.Controller) Model (Ext.data.Model) ServerAccess (Ext.data.Ajax) (Ext.ux.WebSocket)
  46. 46. 日本語書籍 ➔ ➔ ➔ AngularJS ✔ はじめてのAngularJS Backbone ✔ Backbone.jsガイドブック ✔ Backbone.jsアプリケーション開発ガイド@ 2/7 Sencha ExtJS ✔ ExtJS 4 実践開発ガイド ✔ ExtJS 4 実践開発ガイド2
  47. 47. 日本語のAPI(Web) ➔ ➔ ➔ AngularJS ✔ 日本語のAPI ✔ http://js.studio-kingdom.com/angularjs Bakcbone ✔ 日本語のAPI ✔ http://backbonejs.apidocs.jp/ ExtJS ✔ xenophyで翻訳されたものがあり ✔ http://docs.xenophy.com/ext-js/4-0/
  48. 48. AngularJS ルール:フレームワーク寄り  学習コスト:高い  MV~:MVP 破壊的なUI/Viewの変更にも対応しやすい。 デザイン等が決まってなく、素早くプロトタイプしながら形を作り出していく場合に有用 全体的に依存性注入などにより、ロジック全体がフレームワークのルールに依存する形になるので、わ りと統制が取れた仕組みになりやすい。 Backbone ルール:プロジェクト内で作る  学習コスト:低い  MV~:MVP & MVC MVP、MVC両方の手段が取れる JSフレームワークなども選択肢が多いため案件に合わせた最適なカスタマイズができるのが良い 既にフロント開発に携わっている場合、そのノウハウを引き継げる為、導入の敷居はさらに低くできる。 ExtJS ルール:フレームワーク重視 学習コスト:高い(xenophyによるトレーニングあり) MV~:MVC MVCパターン重視の為、破壊的なUI/VIew変更がある場合は向かないが、ビジネスロジックが重要に なる場合は堅牢なものが作れるため、とても相性が良い。 学習コストは高め、導入の敷居は高いが、xenophyによるコンサルティングからトレーニングまで有償 でうけられる為、要員が確保できない場合は良い。 サポート付き、かつフレームワークのルールが強いので長期の保守、運用を考えると向いている。
  49. 49. ご清聴ありがとうございました。

×