Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
設計例 (ODC) : EventでUIから重たい処理を切り離す
Search
Junji Watanabe
July 26, 2024
Technology
0
310
設計例 (ODC) : EventでUIから重たい処理を切り離す
OutSystems東京開発者コミュニティ 2024/07/25
Junji Watanabe
July 26, 2024
Tweet
Share
More Decks by Junji Watanabe
See All by Junji Watanabe
OutSystems CoEチームの技術的サポート
junjiwatanabe
0
110
生成AIのODC周辺開発(External Logic)への適用例
junjiwatanabe
0
190
Mentor 生成アプリの構造解析
junjiwatanabe
0
130
Web Developer Specialist (ODC)
junjiwatanabe
0
130
ODC向けAI Mentor System
junjiwatanabe
0
170
認定資格の取り方
junjiwatanabe
0
750
Other Decks in Technology
See All in Technology
Developer Advocate / Community Managerなるには?
tsho
0
120
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
370
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
130
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
150
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
350
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
140
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
370
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
170
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
700
『バイトル』CTOが語る! AIネイティブ世代と切り拓くモノづくり組織
dip_tech
PRO
1
110
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
339
57k
4 Signs Your Business is Dying
shpigford
185
22k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Invisible Side of Design
smashingmag
301
51k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
RailsConf 2023
tenderlove
30
1.2k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Bash Introduction
62gerente
615
210k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
設計例 (ODC) : EventでUI から重たい処理を切り離す OutSystems東京開発者コミュニティ 2024/07/25 OutSystems MVP 渡部
潤司 : https://qiita.com/jyunji_watanabe : https://twitter.com/JyunjiW : https://www.linkedin.com/in/watanabejyunji/ Qiita X LinkedIn
本日の内容 1. ODCのEventとはなにか 2. Eventを使った設計例
1. ODCのEventとはなにか
ODCにおけるEventとは(イメージ) 他App イベントハンドラー (Server Action) 他App イベントハンドラー (Server Action) ②Action
FlowでEvent を発生させる (処理はそのまま継続 ⇨つまり非同期) ①ODC Studioの Eventsタブの下で作成 するプログラミング要素 ③Eventを参照し、発生 時のイベントハンドラー をApp毎に作成できる
ODCにおけるEventとは • App内で何らかの事象が発生したことを示すプログラミング要素(Eventsタブの下にある) • Eventを参照しておくと、そのEventが発生したときに自動で実行されるServer Action (Event Handler 。タイムアウトは2分と短め)を指定できる(これをSubscribeと呼ぶ) •
Subscribeは複数のAppから行える • Eventを発生させるにはTrigger EventをAction Flowに配置 • 重要なのは、 ◦ Eventを発生させる側と、Eventを受け取って動く側を切り離して非同期に処理できる ◦ 他のApp等のEvent Handlerに対してPushで操作を起動できる(なお、試してみた範囲では、起動にかかる時 間はOutSystems 11におけるLight BPTと遜色なく、ほぼ一瞬だった) Light BPTはEntityのCreateに呼応する Actionを書ける機能
Eventの使い所例 • 非同期で発生するイベントを待ち受ける • 小さなバッチ(タイムアウトが2分であることに注意) • Sagaパターン(コレオグラフィー) ◦ Sagaパターンは、複数のサービスにまたがるトランザクションを、ローカルトランザクションのつながりとして実現する ◦
コレオグラフィーは、この複数サービス間のやりとりをMessage Broker経由で行うので、まさにEventはODC上でこ の仕組みを実現するのにうってつけ ◦ Sagaが必要な設計をすると、構築・保守共に大変になりそうなので避けたいところではある • UIから重たい処理を分離し、非同期で処理する 今日は個々の例を見ていきたい
2. Eventを使った設計例
こんなアプリケーションを運用していたとする Excelからレコードを読み取る レコードをループして処理 1レコードあたりおよそ100ms 処理結果を返す Server Action Excelファイル をアップロード Excelファイルには大体200レコード
1レコードあたり100msなので、200 x 100ms ≒ 20秒 余裕を持ってServer Request Timeoutは30秒に設定
実装例 Sleepで「重たい処理」をシミュレート
「最近アップロードに失敗することがある。その場合は繰り返し てもだめなのでファイルを分割して対応している」という問い合 わせ ⇨調べてみると、アップロードされるファイルサイズは拡大傾向 で、今後も増えることが想定される こんな状況になったらどうするか? Server Request Timeoutは上限1分
Eventを使った対応例 Excelからレコードを読み取る レコードをDBに登録しEvent をTrigger 1レコードあたりおよそ100ms 処理状況EntityのIdを返す Server Action1 ①Excelファイ ルをアップロー
ド 処理状況 Entity Excelレコード Entity ②Excelの中身はDBに 登録し、すぐに制御をUI に戻す ③UIでは定期的(5秒と か)で処理状況を確認 Server Action2 ④Subscribeし ているハンドラ ーが起動 ⑤登録され ているデー タを処理
実装例①:事前準備 処理状況 Entity Excelレコード Entity Excelファイル内の各行が1レコードに対 応する Excelファイルのアップロードが行われた ことを通知するEvent イベントハンドラーが処理
対象のレコードを知るた め、参照を持たせておく
実装例 Entityにレコードを登録し、 EventをTriggerしたらす ぐに終わる イベントハンドラー:Entityか らレコードを取り出し、ループ で処理する 適当なところでステータスを 更新してコミットする
もちろん他の修正案もある 1. Eventの代わりにTimerを利用 ◦ 定期実行で複数のアップロードファイルを一括処理でいいとき 2. アップロードしたデータをEntityに登録するまではEvent案と同じだが、登録した結果は画面に 表示し、それを確認したユーザーが別のボタンをクリックすると取り込み処理を起動する ◦ Entityへの登録と、その後のループ処理が同じような処理時間であれば、この方法でもうまくいくかもしれない
3. クライアント側でファイルを分割し、ループ処理する ◦ Excelのまま読むなら、何らかのライブラリが必要になるかもしれない ◦ アップロードするファイルをCSVにできるならもっと楽かもしれない 選択肢を把握して、要件に合わせた方法で 実装するのが大切
以上