Spring I/O 2017 報告 ThymeleafのWebFlux対応

Copyright©2017 NTT corp. All Rights Reserved.
Spring I/O 2017 報告会
ThymeleafのWebFlux対応
2017年6⽉29⽇
NTT ソフトウェアイノベーションセンタ
岩塚卓弥

2Copyright©2017 NTT corp. All Rights Reserved.
• 名前：岩塚卓弥
• 所属：NTT ソフトウェアイノベーションセンタ
• NTTの研究所のうちソフトウェアを専⾨に扱う
• ⾃部署ではソフトウェア⼯学を研究
• Springベースのグループ共通フレームワークの整備を担当
• Spring I/Oには2015年から3年連続参加
⾃⼰紹介

• Getting Thymeleaf Ready for Spring 5 and
Reactive
• Daniel Fernández – Thymeleaf lead
• スライド
• https://speakerdeck.com/dfernandez/o-2017-getting-
thymeleaf-ready-for-spring-5-and-reactive
• デモ
• https://github.com/danielfernandez/reactive-matchday
今⽇の元ネタ(⼀次資料)

• Thymeleaf 3を使⽤している
• Thymeleaf 2を使⽤している
• JSPを使⽤している
• その他のテンプレートエンジンを使っている
会場アンケート：Thymeleaf 使ってますか

世界での利⽤状況
Spring Initializrで選択される
テンプレートエンジンのうち
75%程度がThymeleaf
Thymeleaf Freemarker Mustache
Groovy Templates Velocity
⽉間DL数は22万以上
⼀年で7万5千以上の伸び
Spring I/O 2017 Keynoteより

Spring MVC × Thymeleaf 3 の基本形
greeting.html
実装
出⼒

Spring MVC × Thymeleaf 3 処理概略
TemplateName
Context
Engine
Model
Template
+α
HTML
Controllerで設定したModel
(Map<String, Object>)

TemplateName
Context
Engine
Model
Template
+α
HTML
Controllerから渡された
View名を解決したもの
ServletContextや
パス変数等を追加

TemplateName
Context
Engine
Model
Template
+α
HTMLTemplateを取得
TemplateとContextから
HTMLを⽣成

TemplateName
Context
Engine
Model
Template
+α
HTML HttpServletResponseに
書き込み

Reactive化？
TemplateName
Context
Engine
Model
Template
+α
HTML
Blocking! Blocking!

Reactive化？
TemplateName
Context
Engine
Model
Template
+α
HTML
Blocking! Reactive!
出⼒をPublisherに

• FULL
• CHUNKED
• DATA-DRIVEN
Reactiveな3つの処理モード

FULLモード
HTML
Mono<DataBuffer>Engine
ServerHttpResponseに書き込み
HTMLを⼀括⽣成して⼀括出⼒
→ 最もシンプルだがメモリ消費は⼤

• FULL
• CHUNKED
• DATA-DRIVEN

CHUNKEDモード
<!DOCTYPE html>
…
Flux<DataBuffer>Engine
ServerHttpResponseに書き込み
・・・
…
</html>
HTMLを⼀定のバイト数ごとに区切って⽣成
→ backpressureによって速度調整可能に

• FULL
• CHUNKED
• DATA-DRIVEN

FULL / CHUNKED に共通の課題
Model Mono
Flux

FULL / CHUNKED に共通の課題
Context
Engine
Model Mono
Flux
ArrayList
Mono Mono
AbstractView#resolveAsyncAttributes
CollectList

DATA-DRIVENモード
Context
Engine
Model
ReactiveDataDriverContextVariable
wrapすることでresolutionを回避
… … …
ThymeleafがProcessorのように振る舞う

DATA-DRIVEN & SSE
DATA-DRIVENモードの場合はデータ1件ごとに
部分的なHTMLをSSEで送信可能
<table>
<tr data-th-each=“name : ${names}”>
<td>[[${name}]]</td>
</tr>
</table>
+
Alice Bob Carol
event: head
id: 0
data: <table>
event: body
id: 1
data: <tr>
data: <td>Alice</td>
data: <tr>
event: tail
id: 4
data: </table>
・・・

デモアプリ紹介
試合状況
コメント

初期画⾯表⽰
Agent Controller
ReavtiveMongoTemplate
ReactiveMongoRepository
match/{matchId}
初期画⾯
リクエスト以前のコメント
対戦チーム情報など

初期画⾯表⽰の実装 - MatchController
コメントのFluxを取得
コメントのFluxをReactiveDataDriverContextVariableで
warpしてModelに追加 → DATA-DRIVENモード

動的に更新

試合状況描画
Agent Controller
match/{matchId}/statusStream
画⾯の⼀部
(SSEで送信)
試合状況
javascriptで画⾯に反映

試合状況描画
Agent Controller
画⾯の⼀部を⽣成
(SSEで送信)
新しい試合状況を取得
得点や警告などの
イベントをランダム⽣成
新しいイベントを挿⼊

試合状況描画の実装 -
MatchEventInfoRepository
MongoDBのTailable Cursorを使⽤して
新しくinsertされたデータを取得し続ける

試合状況描画の実装 - MatchController
SSEで送信
Thymeleafで画⾯の⼀部を⽣成
DATA-DRIVEN モード

試合状況描画の実装 – match.html (js)
SSEで送信されてきた画⾯の⼀部を使って
画⾯を部分的に書き換える
部分⽣成対象

動的に追加

コメント描画
Agent Controller
match/{matchId}/commentStream?
timestamp=xxxxxxxx(初期リクエスト時刻)
json
(SSEで送信)
指定timestampより
後のコメント

コメント描画
Agent Controller
json
(SSEで送信)
コメントをランダム⽣成
新しいコメントを取得
新しいコメントを挿⼊

試合状況描画の実装 -
MatchCommentRepository
MongoDBのTailable Cursorを使⽤して
新しくinsertされたデータを取得し続ける

コメント描画の実装 - MatchController
jsonをSSEで送信

試合状況描画の実装 – match.html (js)
SSEで送信されてきたjsonデータを使って
画⾯を部分的に書き換える

• Thymeleaf 3 × WebFluxでReactiveなView出⼒
• ３つの処理モード
• FULL
• CHUNKED
• DATA-DRIVEN
• ⾒所満載のデモ
まとめ
是⾮⼀次資料（スライド / ソースコード）に
アクセスしてみて下さい！

Spring I/O 2017 報告 ThymeleafのWebFlux対応

More Related Content

What's hot (20)

Similar to Spring I/O 2017 報告 ThymeleafのWebFlux対応 (20)

Spring I/O 2017 報告 ThymeleafのWebFlux対応