IBM Cloud Social Visual Guidelines

15 

Loading....

Loading....

Loading....

Loading....

Loading....

全文

(1)

© 2017 IBM Corporation

IBM Business Process Manager

連載:事例に学ぶパフォーマンスの向上

(2)

概要

「第3回 画面描画の高速化」では、CoachViewの数に起因するパフォーマンス問題について、 その原因と改善策を解説しました。 本ドキュメントでは、SPARK UI Toolkitを用いてCoachViewの描画コストを削減する具体的 な実装アプローチについて説明します。 (Toolkitの種類とSPARK UI Toolkitの位置づけについては前回の記事を参照下さい)

※IBM BPM8.5.7 のCF2017.06で Salient Process SPARK UI toolkitをベースとしたBPM UI toolkitが提供されました。 詳細はこちらを参照してください。

https://www.ibm.com/support/knowledgecenter/en/SSFTN5_8.5.7/com.ibm.wbpm.main.doc/topics/cbpm_ whatsnew-cf2017.06.html

(3)

Page © 2017 IBM Corporation

事象と事例

ヒューマン・サービスをURL公開し、以下のような画面を呼び出す際、その初期表示に時間が かかる可能性があります。 ・画面構成は、共通メニューとメインの入力画面から成る ・入力画面は複数のタブで構成されており、それぞれのタブが100個程度項目を持っている ・画面遷移時の処理として、DBアクセスが必要(数十回のSQL Selectが必要) 共通メニュー メインの 入力画面 メニュー 稟議申請 購買申請 CCC DDD ✓ 山田 太郎

Column2 Column3 Column4

CellContent21 CellContent31 CellContent41 CellContent22 CellContent32 CellContent42 CellContent23 CellContent33 CellContent43

: : :

CellContent29 CellContent39 CellContent49

社員番号 申請日 新規 申請者姓 申請者名 X15J3 所属コード 最終更新日 例外申請 A03301 2017/06/19 2017/06/23 aaa@yyy.com E-mail ✓ XXX YYYYY ZZZZZ

Tab1 Tab2 Tab3

Button1 Button2 Type

(4)

問題の背景

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

(5)

Page © 2017 IBM Corporation

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で表示する

(6)

【参考】SPARK UI Toolkitとは

SPARK UI Toolkitで提供されるCoachViewは、DojoやAngularJSなどの他のフレームワークを使 用しておらず、シンプルなHTML/CSSで記述されているため、パフォーマンスが優れています。 ・超軽量で独立したライブラリの提供 ・HTML5/CSS3ベース ・90以上のコントロール部品を提供(Enterprise版) Salient Process サポート Web サイト

https://support.salientprocess.com/

※IBM BPM8.5.7の CF2017.06より BPM UI toolkit として 製品に統合されています。詳細はP2のリンクご参照下さい。

(7)

Page © 2017 IBM Corporation

(1) SPARK UI Controlの活用 - Deferred Section

Deferred Sectionを用いて遅延ロード(Lazy-load)させることにより、適切なタイミングで読み 込みを実施します。

特に、初期表示する必要のないTab SectionとModal Sectionに適用することで、初期表示の体感速 度を早める効果が得られます。

構成オプション プロパティ 説明 選択・使用例

Lazy-load automatically 指定した時間後に自動で遅延ロ

ードするかの設定 On/Off

Delay for auto-loading ロードまでの待ち時間(ミリ

秒) 5,000

(8)

(1) SPARK UI Controlの活用 - Table

Table内の編集不要/Coach Viewが不要なcolumnには、Coach ViewではなくSimple HTMLを 使用することで、表全体の表示待ち時間の改善が見込めます。

• Columnsオプションにて列毎のレンダリングオプションが選択可能 ・ Coach View (常時編集可)

・ Seamless Coach View (セルをクリックして編集可)

・ Simple HTML (編集不可)

render As 編集可否 表示速度

Coach View 常時編集可 Seamless Coach Viewと同等

Seamless Coach View セルをクリックして編

集 Coach Viewと同等

Simple HTML 編集不可 Coach View/Seamless Coach View よ

り高速

(9)

Page © 2017 IBM Corporation

(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 時に一度にロードする行数

(10)

(1) SPARK UI Controlの活用 - Service Data Table

Table全体がCoach View不要な場合は、Service Data Tableを使用することでパフォーマンス改善 が見込めます。(Service Data Tableでは、Tableに表示するデータをBOで保持する必要が無くな るため)

• Behaviorオプションにて、Data Serviceが設定可能

• Data Service

(11)

Page © 2017 IBM Corporation

(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);

(12)

(3) 画面の分離

共通メニューは全画面で共通の為、メインの入力画面を別ヒューマン・サービスとして定義し、 初期画面への遷移時にはメインの入力画面のみをiframeで表示し、必要な画面のみをロードする ような構成とします。 メニュー 稟議申請 購買申請 CCC DDD ✓ 山田 太郎

Column2 Column3 Column4

CellContent21 CellContent31 CellContent41 CellContent22 CellContent32 CellContent42 CellContent23 CellContent33 CellContent43

: : :

CellContent29 CellContent39 CellContent49

社員番号 申請日 新規 申請者姓 申請者名 X15J3 所属コード 最終更新日 例外申請 A03301 2017/06/19 2017/06/23 aaa@yyy.com E-mail ✓ XXX YYYYY ZZZZZ

Tab1 Tab2 Tab3

Button1 Button2 Type Button3 Button4 iframe ヒューマン・サービス1 ヒューマン・サービス2

(13)

Page © 2017 IBM Corporation SQL実行

パフォーマンス改善例

リクエスト送信・受信 JavaScript実行・パース時間 レンダリング時間 Onloadイベン ト発生 SQL実行 リクエスト送信・ 受信 JavaScript実行・パース時間 レンダリング時間 レンダリング時間 JavaScript実行・ パース時間 画面表示完了 遅延ロード分 の表示完了 画面表示完了 前述の実装を適用することで、以下のような改善効果が期待できます。 Onloadイベン ト発生 遅延ロード開 始 <Before> <After> (1)-b (2) 効果 (1)SPARK UI Controlの活用 a. Deferred Sectionの遅延ロードにより、初期画面表示までのユー ザーの体感速度向上

b. Tableのオプション、Service Data Table利用によるCoachView レンダリング時間の短縮 (2)並列処理 データ取得をUIの初期処理をブロックすることなく非同期に実行し、 ユーザーの待ち時間削減 (3)画面の分離 画面の分離により、必要な画面のみロードし、SQL実行以外の時間 を全体的に短縮 (1)-a (1)-b

(14)

まとめ

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

(15)

Page © 2017 IBM Corporation

参考

[Redbooks] Deliver Modern UI for IBM BPM with the Coach Framework and Other Approaches

https://www.redbooks.ibm.com/Redbooks.nsf/RedpieceAbstracts/sg248355.html

SPARK UI Toolkit - Salient Process

https://salientprocess.com/spark-ui-toolkit/

What's new in IBM Business Process Manager V8.5.7 cumulative fix 2017.06

https://www.ibm.com/support/knowledgecenter/en/SSFTN5_8.5.7/com.ibm.wbpm.main .doc/topics/cbpm_whatsnew-cf2017.06.html

Updating...

関連した話題 :