Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaOneで聴いてきたディープなJavaFXセッション

2013/12/13 JavaOne勉強会の発表資料です。

  • Login to see the comments

JavaOneで聴いてきたディープなJavaFXセッション

  1. 1. JavaOneで聴いてきた ディープな JavaFXセッション JavaFX勉強会 2013/12/13 ⻘青江  崇(@aoetk)
  2. 2. ⾃自⼰己紹介 •  •  •  •  ⻘青江  崇 Twitter ID: aoetk / Hatena ID: aoe-tk 潜⽔水艦の名前の会社に所属 RIA開発を⾏行行っていたこともあって JavaFXは個⼈人的な興味で追いかけてます
  3. 3. 本⽇日のお話 •  JavaOneで聴いたセッションの中で少し ディープな内容のセッションを2つ紹介し ます –  Architecting Enterprise JavaFX8 Applications [CON2229] –  Optimizing JavaFX [CON3141] •  セッションの内容そのままではなく、⾃自 分なりに解釈して再構成した内容になり ます
  4. 4. Architecting Enterprise JavaFX8 Applications Adam Bien
  5. 5. セッション概要 •  スピーカーはJava EEの世界でも有名な、 Java ChampionsのAdam Bienさん •  エンタープライズクラスの本格的なアプ リケーションをJavaFXで開発する場合の アーキテクチャについて考察するという 内容
  6. 6. はじめに •  本格的なアプリケーションを構築する場 合、アーキテクチャをきちんと考える必 要がある •  RIAやiPhoneの登場をきっかけにGUIは リッチ化する流流れへ –  プレゼンテーションロジックが複雑化する⼀一 ⽅方 –  プレゼンテーションレイヤでもアーキテク チャパターンの考察が盛んに JavaFXに合ったアーキテクチャは?
  7. 7. MVCパターンについて Send Message Controller View ViewとController はウィジェットご とにペアで存在 ユーザジェスチャ をModelに伝える Model Observe Notify Controller ViewはModelを監視し、 Modelの更更新を反映 (Observerパターン) View Controller Model View
  8. 8. MVCパターンについて(続き) •  (ここではSmalltalk由来の原初のMVCを 指しています) –  Webの世界で使われるMVC Model2ではない •  基本的な考え⽅方は「何を⾒見見せる (Model)」と「どう⾒見見せる(View)」 の分離離 •  JavaFXの場合、NodeがView、 EventHandlerがController、JavaBeanが Modelとなる
  9. 9. MVCで充分なのか? •  GUIのリッチ化に伴い、プレゼンテーショ ンロジック(⾮非ドメインロジック)が複 雑化 –  プレゼンテーション層固有のステート管理理が 必要に –  複雑なGUIアプリケーションでは下⼿手すると プレゼンテーション層のコード量量の⽅方が多い
  10. 10. MVCで充分なのか?(続き) •  ユーザーの⼊入⼒力力をより抽象化した形で扱 いたい 拡⼤大ボタンクリック スライダードラッグ ピンチアウト どれも「ズーム」と して扱いたい
  11. 11. 新しいパターンの考察が盛んに •  Martin Fowler⽒氏が “GUI Architectures”として整理理 –  http://martinfowler.com/eaaDev/uiArchs.html –  Model-ViewPresenter(MVP)パターンや Presentation Modelパターン 等のMVC変形パターンについて 解説している •  アイデアそのものは90年年代から出 ていた
  12. 12. Model-View-Presenter(MVP) パターンとは? •  画⾯面単位のControllerを登場させる (Presenter) •  画⾯面上のウィジェットの集合をViewとして扱う •  ウィジェット上で発⽣生したジェスチャ を”save”や”zoom”といった抽象化したイベン トとして扱う –  Commandパターンを使い、Undo/Redo対応できる となお良良し •  複雑なプレゼンテーションロジックが存在する 場合はPresenterがViewを操作する –  I/F経由でのアクセスだとなお良良し
  13. 13. Model-View-Presenter(MVP) パターンとは?(図解) 抽象度度の⾼高いイベント を送信する 場合によっては直接 Viewを更更新する Event View Presenter Update ウィジェットの集まり をまとめてViewとして 扱う Notify Observerパターンを ⽤用いてModelを監視す るのは同じ Observe 画⾯面単位のController Send Message Model この形、どこかで⾒見見たことありませんか?
  14. 14. Model-View-Presenter(MVP) パターンとは?(図解) FXML Controller FXML Event View Presenter Update Notify JavaBean (JavaFX形式のプロパティを使⽤用) Observe Send Message Model FXMLを使うとこの形にぴったり合う
  15. 15. Presentation Modelパターン とは? •  プレゼンテーション固有のステートを保持する ModelをPresentation Modelとして⽤用意 –  ViewとModelの間に置く –  バインディングとバリデーションを受け持つ –  GUIプラットフォーム側に強⼒力力なバインディング機構 があれば活きる Modelのプロパティを委譲 Observe View Notify Presentation Model Model プレゼンテーション層固有 のプロパティを公開 JavaFXには強⼒力力なバインディング機構がある
  16. 16. JavaFXに向いたアーキテクチャ @FXMLでPresenterの メソッドと結びつける ViewへのPMのステート 反映はバインドで View (FXML) Event Notify Update Presenter (FXML Controller) Get Data Observe Send Message Presentation Model Return Data Service 外部サービスとのやり取りは 専⽤用のサービスクライアント を⽤用意しPresenterがアクセス External Service
  17. 17. afterburner.fx •  http://afterburner.adam-bien.com/ •  Adam Bienさんが開発したJavaFX⽤用MVP フレームワーク •  DIの仕組みを提供する –  JSR-330の@Injectアノテーションを使⽤用 •  FXMLのロード処理理を隠蔽
  18. 18. afterburner.fx(コード例例) public class NoteListView extends FXMLView { //FXMLとCSSを自動的に読み込む } public class AirpadPresenter implements Initializable { @Inject // 外部サービスにアクセスするコンポーネントのインジェクト NotesStore store; @FXML AnchorPane noteList; @Override public void initialize(URL url, ResourceBundle rb) { //FXMLからのViewの生成 NoteListView noteListView = new NoteListView(); //FXMLによって生成されたViewの取得 Parent view = noteListView.getView(); this.noteList.getChildren().add(view); }
  19. 19. まとめ •  このセッションではJavaFXに有効なアー キテクチャとしてMVP + Presentation Modelパターンが提⽰示された •  基本的なAPIの使い⽅方ではなく、アーキテ クチャパターンへの考察の話が出てくる ようになったことが興味深い –  それだけJavaFXが本格的に使われるように なったということ
  20. 20. Optimizing JavaFX Oleg Mazurov
  21. 21. セッション概要 •  JavaFXの描画処理理の内部について解説す るセッション –  特に描画処理理の中核をなす”Pulse”と呼ばれ る仕組みについて詳しく解説 •  描画処理理に関するデバッグに便便利利なツー ルを紹介
  22. 22. JavaFXのスレッドについて •  JavaFXアプリケーションスレッド(FXス レッド) –  イベント処理理 –  後述のPulseを実⾏行行 –  Platform.runLater()に渡した処理理を実⾏行行 •  レンダースレッド –  描画コマンドの実⾏行行 –  シーングラフの変更更を画⾯面に表⽰示する
  23. 23. Pulseとは何か? •  シーングラフの状態を調べて、どう描画すべき かを決定し、描画ジョブを作成実⾏行行するひとか たまりの処理理 •  16ミリ秒ごとのタイマーで起動 •  タイマーチェックの際に次の条件を満たしてい れば実⾏行行される –  アニメーションが実⾏行行中 –  シーン上で変更更が発⽣生している –  明⽰示的にPulseの実⾏行行が要求された –  前のPulseが完了了している
  24. 24. Pulseの中で実⾏行行する処理理 Timer 前回のPulseの終了了を待つ アニメーション 実⾏行行 Nodeの描画情報を同期 CSSの処理理 レンダージョブの追加 FX 描画 表⽰示 Node境界の更更新 Render レイアウトの評価 t
  25. 25. グラフィックスパイプライン (D3D) FX 実装⾮非依存の描画処理理 D3Dに渡して表⽰示処理理 Render t
  26. 26. グラフィックスパイプライン (ソフトウェア) ピクセルをバッファにコピー、FX スレッドに戻してピクセルを更更新 FX Render 実装⾮非依存の描画処理理 t
  27. 27. グラフィックスパイプライン (Mac) FXスレッドでOpenGLのコンテキ ストを使ってテクスチャを描画 FX Render 実装⾮非依存の描画処理理 t
  28. 28. Swing上で描画する場合 FX AWTのComponent#repaint() をコール Render AWTが描画 AWT t
  29. 29. WebViewは? •  WebKitに対して代理理のタイマー (WebEngine.PulseTimer)を渡す –  JavaScriptによるアニメーションをハンドル –  Webページ上でダーティリージョンが発⽣生す ると、レンダリングキューを作り、レンダー スレッドに渡す
  30. 30. パフォーマンス測定に便便利利な ツール達 •  PerformanceTracker –  com.sun.javafx.perfパッケージにある –  getSceneTracker()メソッドにSceneインスタンスを 渡してインスタンスを取得 –  getInstantFPS() や  getAverageFPS() といった性能 測定に必要なメソッドが⽤用意されている •  PulseLogger –  -Djavafx.pulseLogger=true で有効化 –  Pulseの処理理情報、実⾏行行時間、カウンタなどが出⼒力力さ れる
  31. 31. PulseLoggerの出⼒力力例例 PULSE: 18 [48ms:74ms] T10 (3 +0ms): CSS Pass T10 (3 +0ms): Layout Pass T10 (6 +27ms): Waiting for previous rendering T10 (33 +2ms): Copy state to render graph T8 (35 +1ms): Dirty Opts Computed T8 (36 +0ms): Render Roots Discovered T8 : 1 different dirty regions to render T8 (36 +38ms): Painted T8 (74 +0ms): Presentable.present T8 (74 +0ms): Finished Presenting Painter Counters: Nodes rendered: 3087 Nodes visited during render: 3094 PULSE: 19 [48ms:68ms] …
  32. 32. その他の便便利利なツール •  Glass Robot –  com.sun.glass.ui.Robot –  JavaFX専⽤用のRobotクラス –  JemmyFXが使っている •  フルスピードモード –  -Djavafx.animation.fullspeed=true を設定すると有 効化 –  Pulseの待ち時間がなくなる •  60FPS以上を出すことができる
  33. 33. JavaFXアプリケーションのプロ ファイリングについて •  CPUプロファイリングは余り効果的では ない –  多くの処理理をGPUに⾏行行わせている –  CPUを使う処理理も⼤大半はJavaランタイムが 使っている →前述のツールを活⽤用して調査する
  34. 34. まとめ •  JavaFX8は2つのスレッドを持っている •  Pulseという単位で描画処理理を⾏行行っている •  プラットフォームによってグラフィック スパイプラインが異異なる •  仕組み上CPUプロファイリングが効果的 でないので、JavaFXが⽤用意しているツー ルを活⽤用しよう

×