IBM Cloud Social Visual Guidelines

Size: px

Start display at page:

Download "IBM Cloud Social Visual Guidelines"

さあしゃすわ
5 years ago
Views:

1 IBM Business Process Manager 連載 : 事例に学ぶパフォーマンスの向上第 4 回 SPARK UI Toolkit 活用による画面描画の高速化

2 概要第 3 回画面描画の高速化では CoachView の数に起因するパフォーマンス問題についてその原因と改善策を解説しました本ドキュメントでは SPARK UI Toolkit を用いて CoachView の描画コストを削減する具体的な実装アプローチについて説明します (Toolkit の種類と SPARK UI Toolkit の位置づけについては前回の記事を参照下さい ) IBM BPM8.5.7 の CF で Salient Process SPARK UI toolkit をベースとした BPM UI toolkit が提供されました詳細はこちらを参照してください whatsnew-cf html このドキュメントは Salient Process SPARK UI toolkit を利用して開発した事例をベースに記述しています Page 2

3 事象と事例ヒューマンサービスを URL 公開し以下のような画面を呼び出す際その初期表示に時間がかかる可能性があります画面構成は共通メニューとメインの入力画面から成る入力画面は複数のタブで構成されておりそれぞれのタブが 100 個程度項目を持っている画面遷移時の処理として DB アクセスが必要 ( 数十回の SQL Select が必要 ) メニュー稟議申請購買申請社員番号申請日最終更新日 A /06/ /06/23 申請者姓山田申請者名太郎 Tab1 Tab2 Tab3 所属コード X15J3 新規 aaa@yyy.com 例外申請共通メニュー CCC DDD Type XXX Button1 Button2 YYYYY ZZZZZ Column2 Column3 Column4 CellContent21 CellContent31 CellContent41 CellContent22 CellContent32 CellContent42 CellContent23 CellContent33 CellContent43 : : : CellContent29 CellContent39 CellContent49 メインの入力画面 Button3 Button4 Page 3

4 問題の背景 1. 初期データ取得画面遷移時の処理で DB アクセスが必要な場合その SQL 量が増えるに従ってサービス実行に費やす時間がかかるため結果的に Coach 画面表示に遷移するまでの時間がかかるようになります 2. Coach 画面表示画面表示完了まで ( 読み込み開始から画面表示が行われた瞬間まで ) には主に以下のようなステップが存在します前号第 3 回画面描画の高速化で紹介した通り画面の描画コストはCoachView1つあたりのコストとCoachViewの数に依存するため画面項目数が増えるにしたがって特にレンダリング時間に影響が出ます Onload イベント発生までページ読み込み開始時点から読み込み完了までの時間 JavaScript 実行パース時間同期実行の JavaScript HTML および CSS のパース実行時間レンダリング時間ブラウザが実行する画面描画そのもの 1. 初期データ取得 2. Coach 画面表示画面表示完了 SQL 実行リクエスト送信受信 JavaScript 実行パース時間レンダリング時間 Page 4 Onload イベント発生

5 SPARK UI Toolkit による実装アプローチ以降では SPARK UI Toolkit を用いた具体的な実装アプローチ Good Practice について説明します (1) SPARK UI Control の活用 Modal Section や初期表示しない Tab Section は Deferred Section を用いて Lazy-load Table 内で編集不要の column は Simple HTML を使用編集不要の Table は Service Data Table を使用 (2) 並列処理 Navigation Event と Deferred Section を用いてメインの入力画面の描画と SQL を並列で実行する (3) 画面の分離共通メニューは全画面で共通の為メインの入力画面を別ヒューマンサービスとして定義初期画面への遷移時にはメインの入力画面のみを iframe で表示する Page 5

6 参考 SPARK UI Toolkit とは SPARK UI Toolkit で提供される CoachView は Dojo や AngularJS などの他のフレームワークを使用しておらずシンプルな HTML/CSS で記述されているためパフォーマンスが優れています超軽量で独立したライブラリの提供 HTML5/CSS3 ベース 90 以上のコントロール部品を提供 (Enterprise 版 ) Salient Process サポート Web サイト IBM BPM8.5.7 の CF より BPM UI toolkit として製品に統合されています詳細は P2 のリンクご参照下さい Page 6

7 (1) SPARK UI Control の活用 - Deferred Section Deferred Section を用いて遅延ロード (Lazy-load) させることにより適切なタイミングで読み込みを実施します特に初期表示する必要のない Tab Section と Modal Section に適用することで初期表示の体感速度を早める効果が得られます構成オプションプロパティ説明選択使用例 Lazy-load automatically Delay for auto-loading 指定した時間後に自動で遅延ロードするかの設定ロードまでの待ち時間 ( ミリ秒 ) Event On lazy-loaded event Lazy-load 完了後のイベント処理 On/Off 5,000 Page 7

常時編集可 Seamless Coach View と同等 Seamless Coach View セルをクリックして編集 Coach View と同等 Simple HTML 編集不可 Coach

8 (1) SPARK UI Control の活用 - Table Table 内の編集不要 /Coach View が不要な column には Coach View ではなく Simple HTML を使用することで表全体の表示待ち時間の改善が見込めます Columns オプションにて列毎のレンダリングオプションが選択可能 Coach View ( 常時編集可 ) render As 編集可否表示速度 Coach View 常時編集可 Seamless Coach View と同等 Seamless Coach View セルをクリックして編集 Coach View と同等 Simple HTML 編集不可 Coach View/Seamless Coach View より高速 Custom ( 定義による ) ( 定義による ) Seamless Coach View ( セルをクリックして編集可 ) Simple HTML ( 編集不可 ) Page 8

(1) SPARK UI Control の活用 - Table また Table の行の構築の間に同期処理を止める期間を設けることで行の描画開始を早める効果が期待できます特に Table に height を設定して height を超えてスクロールしないと表示されない行が存在する場合この設定が有効です (1 度の同期処理で処理する行数 =Async Batch Size を

9 (1) SPARK UI Control の活用 - Table また Table の行の構築の間に同期処理を止める期間を設けることで行の描画開始を早める効果が期待できます特に Table に height を設定して height を超えてスクロールしないと表示されない行が存在する場合この設定が有効です (1 度の同期処理で処理する行数 =Async Batch Size を height 分 + アルファにする ) Performance オプションにて Async Loading と Async Batch Size が設定可能 Async Loading データを複数回に分けてロード表示することで表示開始の待ち時間を減少大量行のテーブル表示時の体感を改善可能 Async Batch Size Async Loading 時に一度にロードする行数表示開始待ち時間表示完了待ち時間を最適化する行数を設定する Page 9

10 (1) SPARK UI Control の活用 - Service Data Table Table 全体が Coach View 不要な場合は Service Data Table を使用することでパフォーマンス改善が見込めます (Service Data Table では Table に表示するデータを BO で保持する必要が無くなるため ) Behavior オプションにて Data Service が設定可能 Data Service Service Data Table で使用するデータを提供する Ajax サービスを定義 Page 10

$UI の初期処理をブロックすることなく非同期に行う Deferred Section を併用し SQL で取得したデータ項目をメイン入力画面に遅延ロード Navigation Event の構成 > Events > Onload event に以下を指定 me.fire();${deferred_section1}.$

11 (2) 並列処理ヒューマンサービス内では最初の Coach 表示までの時間をなるべく速くすることが重要です Navigation Event と Deferred Section を用いてメインの入力画面の描画と SQL を並列で実行することで初期画面表示までのユーザーの体感速度が向上します Navigation Event を用いて SQL によるデータ取得を UI の初期処理をブロックすることなく非同期に行う Deferred Section を併用し SQL で取得したデータ項目をメイン入力画面に遅延ロード Navigation Event の構成 > Events > Onload event に以下を指定 me.fire();${deferred_section1}.lazyload(100); メインの入力画面 Page 11

12 (3) 画面の分離共通メニューは全画面で共通の為メインの入力画面を別ヒューマンサービスとして定義し初期画面への遷移時にはメインの入力画面のみを iframe で表示し必要な画面のみをロードするような構成としますヒューマンサービス 1 メニュー稟議申請購買申請 CCC DDD 社員番号申請日最終更新日 A /06/ /06/23 申請者姓山田申請者名太郎所属コード X15J3 新規 aaa@yyy.com 例外申請ヒューマンサービス 2 Tab1 Tab2 Tab3 Type XXX Button1 Button2 YYYYY ZZZZZ Column2 Column3 Column4 CellContent21 CellContent31 CellContent41 CellContent22 CellContent32 CellContent42 iframe CellContent23 CellContent33 CellContent43 : : : CellContent29 CellContent39 CellContent49 Button3 Button4 Page 12

13 パフォーマンス改善例前述の実装を適用することで以下のような改善効果が期待できます <Before> 画面表示完了 SQL 実行リクエスト送信受信 JavaScript 実行パース時間レンダリング時間 Onload イベント発生 <After> Page 13 リクエスト送信受信 Onload イベント発生 (2) 遅延ロード開始 JavaScript 実行パース時間 (1)-a SQL 実行 JavaScript 実行パース時間レンダリング時間画面表示完了 (1)-b レンダリング時間遅延ロード分の表示完了 (1)-b 効果 (1)SPARK UI Control の活用 a. Deferred Section の遅延ロードにより初期画面表示までのユーザーの体感速度向上 b. Table のオプション Service Data Table 利用による CoachView レンダリング時間の短縮 (2) 並列処理データ取得を UI の初期処理をブロックすることなく非同期に実行しユーザーの待ち時間削減 (3) 画面の分離画面の分離により必要な画面のみロードし SQL 実行以外の時間を全体的に短縮

14 まとめ BPM の画面描画を高速化するためには CoachView の描画コストを減らすアプローチが有効です CoachView の描画コストを減らすには軽量な SPARK UI Toolkit の CoachView を採用することで一定のパフォーマンス効果が期待できます SPARK UI Toolkit はカスタム CoachView を開発せずに UI パフォーマンスを最適化する部品やオプションが標準で用意されています Page 14

15 参考 [Redbooks] Deliver Modern UI for IBM BPM with the Coach Framework and Other Approaches SPARK UI Toolkit - Salient Process What's new in IBM Business Process Manager V8.5.7 cumulative fix Page 15

IBM Cloud Social Visual Guidelines

IBM Cloud Social Visual Guidelines IBM Business Process Manager 連載 : 事例に学ぶパフォーマンスの向上第 3 回画面描画の高速化概要 IBM BPM は Coach フレームワークと呼ばれる画面のフレームワークを提供し CoachView と呼ばれる画面部品を組み合わせることによって効率よく画面を実装していくことが可能ですしかしながら 1 画面に数百の単位の CoachView を配置した場合