SlideShare a Scribd company logo
1 of 37
Download to read offline
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年連続参加
⾃⼰紹介
3Copyright©2017 NTT corp. All Rights Reserved.
• 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
今⽇の元ネタ(⼀次資料)
4Copyright©2017 NTT corp. All Rights Reserved.
• Thymeleaf 3を使⽤している
• Thymeleaf 2を使⽤している
• JSPを使⽤している
• その他のテンプレートエンジンを使っている
会場アンケート:Thymeleaf 使ってますか
5Copyright©2017 NTT corp. All Rights Reserved.
世界での利⽤状況
Spring Initializrで選択される
テンプレートエンジンのうち
75%程度がThymeleaf
Thymeleaf Freemarker Mustache
Groovy Templates Velocity
⽉間DL数は22万以上
⼀年で7万5千以上の伸び
Spring I/O 2017 Keynoteより
6Copyright©2017 NTT corp. All Rights Reserved.
Spring MVC × Thymeleaf 3 の基本形
greeting.html
実装
出⼒
7Copyright©2017 NTT corp. All Rights Reserved.
Spring MVC × Thymeleaf 3 処理概略
TemplateName
Context
Engine
Model
Template
+α
HTML
Controllerで設定したModel
(Map<String, Object>)
8Copyright©2017 NTT corp. All Rights Reserved.
Spring MVC × Thymeleaf 3 処理概略
TemplateName
Context
Engine
Model
Template
+α
HTML
Controllerから渡された
View名を解決したもの
ServletContextや
パス変数等を追加
9Copyright©2017 NTT corp. All Rights Reserved.
Spring MVC × Thymeleaf 3 処理概略
TemplateName
Context
Engine
Model
Template
+α
HTMLTemplateを取得
TemplateとContextから
HTMLを⽣成
10Copyright©2017 NTT corp. All Rights Reserved.
Spring MVC × Thymeleaf 3 処理概略
TemplateName
Context
Engine
Model
Template
+α
HTML HttpServletResponseに
書き込み
11Copyright©2017 NTT corp. All Rights Reserved.
Reactive化?
TemplateName
Context
Engine
Model
Template
+α
HTML
Blocking! Blocking!
12Copyright©2017 NTT corp. All Rights Reserved.
Reactive化?
TemplateName
Context
Engine
Model
Template
+α
HTML
Blocking! Reactive!
出⼒をPublisherに
13Copyright©2017 NTT corp. All Rights Reserved.
• FULL
• CHUNKED
• DATA-DRIVEN
Reactiveな3つの処理モード
14Copyright©2017 NTT corp. All Rights Reserved.
FULLモード
HTML
Mono<DataBuffer>Engine
ServerHttpResponseに書き込み
HTMLを⼀括⽣成して⼀括出⼒
→ 最もシンプルだがメモリ消費は⼤
15Copyright©2017 NTT corp. All Rights Reserved.
• FULL
• CHUNKED
• DATA-DRIVEN
Reactiveな3つの処理モード
16Copyright©2017 NTT corp. All Rights Reserved.
CHUNKEDモード
<!DOCTYPE html>
…
Flux<DataBuffer>Engine
ServerHttpResponseに書き込み
・・・
…
</html>
HTMLを⼀定のバイト数ごとに区切って⽣成
→ backpressureによって速度調整可能に
17Copyright©2017 NTT corp. All Rights Reserved.
• FULL
• CHUNKED
• DATA-DRIVEN
Reactiveな3つの処理モード
18Copyright©2017 NTT corp. All Rights Reserved.
FULL / CHUNKED に共通の課題
Model Mono
Flux
19Copyright©2017 NTT corp. All Rights Reserved.
FULL / CHUNKED に共通の課題
Context
Engine
Model Mono
Flux
ArrayList
Mono Mono
AbstractView#resolveAsyncAttributes
CollectList
20Copyright©2017 NTT corp. All Rights Reserved.
DATA-DRIVENモード
Context
Engine
Model
ReactiveDataDriverContextVariable
wrapすることでresolutionを回避
… … …
ThymeleafがProcessorのように振る舞う
21Copyright©2017 NTT corp. All Rights Reserved.
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>
・・・
22Copyright©2017 NTT corp. All Rights Reserved.
デモアプリ紹介
試合状況
コメント
23Copyright©2017 NTT corp. All Rights Reserved.
初期画⾯表⽰
Agent Controller
ReavtiveMongoTemplate
ReactiveMongoRepository
match/{matchId}
初期画⾯
リクエスト以前のコメント
対戦チーム情報など
24Copyright©2017 NTT corp. All Rights Reserved.
初期画⾯表⽰の実装 - MatchController
コメントのFluxを取得
コメントのFluxをReactiveDataDriverContextVariableで
warpしてModelに追加 → DATA-DRIVENモード
25Copyright©2017 NTT corp. All Rights Reserved.
デモアプリ紹介
動的に更新
26Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画
Agent Controller
ReavtiveMongoTemplate
ReactiveMongoRepository
match/{matchId}/statusStream
画⾯の⼀部
(SSEで送信)
試合状況
javascriptで画⾯に反映
27Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画
Agent Controller
ReavtiveMongoTemplate
ReactiveMongoRepository
画⾯の⼀部を⽣成
(SSEで送信)
新しい試合状況を取得
javascriptで画⾯に反映
得点や警告などの
イベントをランダム⽣成
新しいイベントを挿⼊
28Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画の実装 -
MatchEventInfoRepository
MongoDBのTailable Cursorを使⽤して
新しくinsertされたデータを取得し続ける
29Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画の実装 - MatchController
SSEで送信
Thymeleafで画⾯の⼀部を⽣成
DATA-DRIVEN モード
30Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画の実装 – match.html (js)
SSEで送信されてきた画⾯の⼀部を使って
画⾯を部分的に書き換える
部分⽣成対象
31Copyright©2017 NTT corp. All Rights Reserved.
デモアプリ紹介
動的に追加
32Copyright©2017 NTT corp. All Rights Reserved.
コメント描画
Agent Controller
ReavtiveMongoTemplate
ReactiveMongoRepository
match/{matchId}/commentStream?
timestamp=xxxxxxxx(初期リクエスト時刻)
json
(SSEで送信)
指定timestampより
後のコメント
javascriptで画⾯に反映
33Copyright©2017 NTT corp. All Rights Reserved.
コメント描画
Agent Controller
ReavtiveMongoTemplate
ReactiveMongoRepository
json
(SSEで送信)
javascriptで画⾯に反映
コメントをランダム⽣成
新しいコメントを取得
新しいコメントを挿⼊
34Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画の実装 -
MatchCommentRepository
MongoDBのTailable Cursorを使⽤して
新しくinsertされたデータを取得し続ける
35Copyright©2017 NTT corp. All Rights Reserved.
コメント描画の実装 - MatchController
jsonをSSEで送信
36Copyright©2017 NTT corp. All Rights Reserved.
試合状況描画の実装 – match.html (js)
SSEで送信されてきたjsonデータを使って
画⾯を部分的に書き換える
37Copyright©2017 NTT corp. All Rights Reserved.
• Thymeleaf 3 × WebFluxでReactiveなView出⼒
• 3つの処理モード
• FULL
• CHUNKED
• DATA-DRIVEN
• ⾒所満載のデモ
まとめ
是⾮⼀次資料(スライド / ソースコード)に
アクセスしてみて下さい!

More Related Content

What's hot

JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話Yahoo!デベロッパーネットワーク
 
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52Yahoo!デベロッパーネットワーク
 
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行gree_tech
 
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjug実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjugYahoo!デベロッパーネットワーク
 
Spring Security 5.0 解剖速報
Spring Security 5.0 解剖速報Spring Security 5.0 解剖速報
Spring Security 5.0 解剖速報Takuya Iwatsuka
 
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれからYahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれからYahoo!デベロッパーネットワーク
 
コンテナ時代にインフラエンジニアは何をするのか
コンテナ時代にインフラエンジニアは何をするのかコンテナ時代にインフラエンジニアは何をするのか
コンテナ時代にインフラエンジニアは何をするのかgree_tech
 
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜Naohiro Yoshida
 
Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...
Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...
Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...Yahoo!デベロッパーネットワーク
 
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Yuichi Hasegawa
 
TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介bitbank, Inc. Tokyo, Japan
 
Spring Security 4.1 の新機能
Spring Security 4.1 の新機能Spring Security 4.1 の新機能
Spring Security 4.1 の新機能正和 井岡
 

What's hot (20)

JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
JSUG 2018/02/05 SpringOnePlatform2017参加報告 プラットフォーム関連のお話
 
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
Yahoo! JAPANのコンテンツプラットフォームを支えるSpring Cloud Streamによるマイクロサービスアーキテクチャ #jsug #sf_52
 
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
 
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjug実運用して分かったRabbit MQの良いところ・気をつけること #jjug
実運用して分かったRabbit MQの良いところ・気をつけること #jjug
 
Apache Big Data Miami 2017 - Hadoop Source Code Reading #23 #hadoopreading
Apache Big Data Miami 2017 - Hadoop Source Code Reading #23 #hadoopreadingApache Big Data Miami 2017 - Hadoop Source Code Reading #23 #hadoopreading
Apache Big Data Miami 2017 - Hadoop Source Code Reading #23 #hadoopreading
 
僕とヤフーと時々Teradata #prestodb
僕とヤフーと時々Teradata #prestodb僕とヤフーと時々Teradata #prestodb
僕とヤフーと時々Teradata #prestodb
 
決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu決済金融から始めるデータドリブンカンパニー #yjmu
決済金融から始めるデータドリブンカンパニー #yjmu
 
Spring Security 5.0 解剖速報
Spring Security 5.0 解剖速報Spring Security 5.0 解剖速報
Spring Security 5.0 解剖速報
 
Keynote
KeynoteKeynote
Keynote
 
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれからYahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
Yahoo! JAPANのサービス開発を10倍早くした社内PaaS構築の今とこれから
 
Ladder of cqrs+es
Ladder of cqrs+esLadder of cqrs+es
Ladder of cqrs+es
 
Design pattern in presto source code
Design pattern in presto source codeDesign pattern in presto source code
Design pattern in presto source code
 
コンテナ時代にインフラエンジニアは何をするのか
コンテナ時代にインフラエンジニアは何をするのかコンテナ時代にインフラエンジニアは何をするのか
コンテナ時代にインフラエンジニアは何をするのか
 
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜Spring Framework / Boot / Data 徹底活用  〜Spring Data Redis 編〜
Spring Framework / Boot / Data 徹底活用 〜Spring Data Redis 編〜
 
Storm の新機能について @HSCR #hadoopreading
Storm の新機能について @HSCR #hadoopreadingStorm の新機能について @HSCR #hadoopreading
Storm の新機能について @HSCR #hadoopreading
 
Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...
Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...
Dataworks Summit 2017 SanJose StreamProcessing - Hadoop Source Code Reading #...
 
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
Application Re-Architecture Technology ~ StrutsからSpring MVCへ ~
 
TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介TypeScript製フレームワーク「Nest」のご紹介
TypeScript製フレームワーク「Nest」のご紹介
 
Spring Security 4.1 の新機能
Spring Security 4.1 の新機能Spring Security 4.1 の新機能
Spring Security 4.1 の新機能
 
10大ニュースで振り返るPGCon2015
10大ニュースで振り返るPGCon201510大ニュースで振り返るPGCon2015
10大ニュースで振り返るPGCon2015
 

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

Dockerコミュニティ近況
Dockerコミュニティ近況Dockerコミュニティ近況
Dockerコミュニティ近況Akihiro Suda
 
Talk 1「データインテグレーションとは何か」
Talk 1「データインテグレーションとは何か」Talk 1「データインテグレーションとは何か」
Talk 1「データインテグレーションとは何か」Takeshi Akutsu
 
PostgreSQL 9.6 新機能紹介
PostgreSQL 9.6 新機能紹介PostgreSQL 9.6 新機能紹介
PostgreSQL 9.6 新機能紹介Masahiko Sawada
 
新しいTERASOLUNA Batch Frameworkとは
新しいTERASOLUNA Batch Frameworkとは新しいTERASOLUNA Batch Frameworkとは
新しいTERASOLUNA Batch Frameworkとはapkiban
 
Cloudera Impalaをサービスに組み込むときに苦労した話
Cloudera Impalaをサービスに組み込むときに苦労した話Cloudera Impalaをサービスに組み込むときに苦労した話
Cloudera Impalaをサービスに組み込むときに苦労した話Yukinori Suda
 
ML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめ
ML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめ
ML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめTetsutaro Watanabe
 
[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...
[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...
[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...Insight Technology, Inc.
 
そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?Atsushi Mitsu
 
Classmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンス
Classmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンスClassmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンス
Classmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンスTakeo Hirakawa
 
次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション
次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション
次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーションNTT Software Innovation Center
 
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 TokyoPrestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 TokyoTreasure Data, Inc.
 
Yahoo! JAPANのOracle構成-2017年版
Yahoo! JAPANのOracle構成-2017年版Yahoo! JAPANのOracle構成-2017年版
Yahoo! JAPANのOracle構成-2017年版Makoto Sato
 
PostgreSQLによるデータ分析ことはじめ
PostgreSQLによるデータ分析ことはじめPostgreSQLによるデータ分析ことはじめ
PostgreSQLによるデータ分析ことはじめOhyama Masanori
 
OpenStack Congress Deep Dive
OpenStack Congress Deep DiveOpenStack Congress Deep Dive
OpenStack Congress Deep Divemasahito12
 
[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向
[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向
[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向Naoki (Neo) SATO
 
[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向
[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向
[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向de:code 2017
 

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

Dockerコミュニティ近況
Dockerコミュニティ近況Dockerコミュニティ近況
Dockerコミュニティ近況
 
Talk 1「データインテグレーションとは何か」
Talk 1「データインテグレーションとは何か」Talk 1「データインテグレーションとは何か」
Talk 1「データインテグレーションとは何か」
 
PostgreSQL 9.6 新機能紹介
PostgreSQL 9.6 新機能紹介PostgreSQL 9.6 新機能紹介
PostgreSQL 9.6 新機能紹介
 
新しいTERASOLUNA Batch Frameworkとは
新しいTERASOLUNA Batch Frameworkとは新しいTERASOLUNA Batch Frameworkとは
新しいTERASOLUNA Batch Frameworkとは
 
Cloudera Impalaをサービスに組み込むときに苦労した話
Cloudera Impalaをサービスに組み込むときに苦労した話Cloudera Impalaをサービスに組み込むときに苦労した話
Cloudera Impalaをサービスに組み込むときに苦労した話
 
ML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめ
ML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめ
ML Ops NYC 19 & Strata Data Conference 2019 NewYork 注目セッションまとめ
 
[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...
[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...
[db tech showcase Tokyo 2016] B31: Spark Summit 2016@SFに参加してきたので最新事例などを紹介しつつデ...
 
そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?そろそろSELinux を有効にしてみませんか?
そろそろSELinux を有効にしてみませんか?
 
Classmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンス
Classmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンスClassmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンス
Classmethod共催IT部門向け Tableauを活用した全社レベルのデータ民主化とガバナンス
 
OpenStack Swift紹介
OpenStack Swift紹介OpenStack Swift紹介
OpenStack Swift紹介
 
次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション
次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション
次世代の高速メモリストレージ利用に向けたソフトウェアのモダナイゼーション
 
stapy_028_talk1
stapy_028_talk1stapy_028_talk1
stapy_028_talk1
 
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 TokyoPrestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
Prestoで実現するインタラクティブクエリ - dbtech showcase 2014 Tokyo
 
Yahoo! JAPANのOracle構成-2017年版
Yahoo! JAPANのOracle構成-2017年版Yahoo! JAPANのOracle構成-2017年版
Yahoo! JAPANのOracle構成-2017年版
 
Yahoo! JAPANのOracle構成-2017年版
Yahoo! JAPANのOracle構成-2017年版Yahoo! JAPANのOracle構成-2017年版
Yahoo! JAPANのOracle構成-2017年版
 
PostgreSQLによるデータ分析ことはじめ
PostgreSQLによるデータ分析ことはじめPostgreSQLによるデータ分析ことはじめ
PostgreSQLによるデータ分析ことはじめ
 
Spring tools4
Spring tools4Spring tools4
Spring tools4
 
OpenStack Congress Deep Dive
OpenStack Congress Deep DiveOpenStack Congress Deep Dive
OpenStack Congress Deep Dive
 
[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向
[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向
[de:code 2017] 並列分散処理の考え方とオープンソース分散処理系の動向
 
[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向
[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向
[DI06] 並列分散処理の考え方とオープンソース分散処理系の動向
 

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

  • 1. Copyright©2017 NTT corp. All Rights Reserved. Spring I/O 2017 報告会 ThymeleafのWebFlux対応 2017年6⽉29⽇ NTT ソフトウェアイノベーションセンタ 岩塚 卓弥
  • 2. 2Copyright©2017 NTT corp. All Rights Reserved. • 名前:岩塚 卓弥 • 所属:NTT ソフトウェアイノベーションセンタ • NTTの研究所のうちソフトウェアを専⾨に扱う • ⾃部署ではソフトウェア⼯学を研究 • Springベースのグループ共通フレームワークの整備を担当 • Spring I/Oには2015年から3年連続参加 ⾃⼰紹介
  • 3. 3Copyright©2017 NTT corp. All Rights Reserved. • 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 今⽇の元ネタ(⼀次資料)
  • 4. 4Copyright©2017 NTT corp. All Rights Reserved. • Thymeleaf 3を使⽤している • Thymeleaf 2を使⽤している • JSPを使⽤している • その他のテンプレートエンジンを使っている 会場アンケート:Thymeleaf 使ってますか
  • 5. 5Copyright©2017 NTT corp. All Rights Reserved. 世界での利⽤状況 Spring Initializrで選択される テンプレートエンジンのうち 75%程度がThymeleaf Thymeleaf Freemarker Mustache Groovy Templates Velocity ⽉間DL数は22万以上 ⼀年で7万5千以上の伸び Spring I/O 2017 Keynoteより
  • 6. 6Copyright©2017 NTT corp. All Rights Reserved. Spring MVC × Thymeleaf 3 の基本形 greeting.html 実装 出⼒
  • 7. 7Copyright©2017 NTT corp. All Rights Reserved. Spring MVC × Thymeleaf 3 処理概略 TemplateName Context Engine Model Template +α HTML Controllerで設定したModel (Map<String, Object>)
  • 8. 8Copyright©2017 NTT corp. All Rights Reserved. Spring MVC × Thymeleaf 3 処理概略 TemplateName Context Engine Model Template +α HTML Controllerから渡された View名を解決したもの ServletContextや パス変数等を追加
  • 9. 9Copyright©2017 NTT corp. All Rights Reserved. Spring MVC × Thymeleaf 3 処理概略 TemplateName Context Engine Model Template +α HTMLTemplateを取得 TemplateとContextから HTMLを⽣成
  • 10. 10Copyright©2017 NTT corp. All Rights Reserved. Spring MVC × Thymeleaf 3 処理概略 TemplateName Context Engine Model Template +α HTML HttpServletResponseに 書き込み
  • 11. 11Copyright©2017 NTT corp. All Rights Reserved. Reactive化? TemplateName Context Engine Model Template +α HTML Blocking! Blocking!
  • 12. 12Copyright©2017 NTT corp. All Rights Reserved. Reactive化? TemplateName Context Engine Model Template +α HTML Blocking! Reactive! 出⼒をPublisherに
  • 13. 13Copyright©2017 NTT corp. All Rights Reserved. • FULL • CHUNKED • DATA-DRIVEN Reactiveな3つの処理モード
  • 14. 14Copyright©2017 NTT corp. All Rights Reserved. FULLモード HTML Mono<DataBuffer>Engine ServerHttpResponseに書き込み HTMLを⼀括⽣成して⼀括出⼒ → 最もシンプルだがメモリ消費は⼤
  • 15. 15Copyright©2017 NTT corp. All Rights Reserved. • FULL • CHUNKED • DATA-DRIVEN Reactiveな3つの処理モード
  • 16. 16Copyright©2017 NTT corp. All Rights Reserved. CHUNKEDモード <!DOCTYPE html> … Flux<DataBuffer>Engine ServerHttpResponseに書き込み ・・・ … </html> HTMLを⼀定のバイト数ごとに区切って⽣成 → backpressureによって速度調整可能に
  • 17. 17Copyright©2017 NTT corp. All Rights Reserved. • FULL • CHUNKED • DATA-DRIVEN Reactiveな3つの処理モード
  • 18. 18Copyright©2017 NTT corp. All Rights Reserved. FULL / CHUNKED に共通の課題 Model Mono Flux
  • 19. 19Copyright©2017 NTT corp. All Rights Reserved. FULL / CHUNKED に共通の課題 Context Engine Model Mono Flux ArrayList Mono Mono AbstractView#resolveAsyncAttributes CollectList
  • 20. 20Copyright©2017 NTT corp. All Rights Reserved. DATA-DRIVENモード Context Engine Model ReactiveDataDriverContextVariable wrapすることでresolutionを回避 … … … ThymeleafがProcessorのように振る舞う
  • 21. 21Copyright©2017 NTT corp. All Rights Reserved. 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> ・・・
  • 22. 22Copyright©2017 NTT corp. All Rights Reserved. デモアプリ紹介 試合状況 コメント
  • 23. 23Copyright©2017 NTT corp. All Rights Reserved. 初期画⾯表⽰ Agent Controller ReavtiveMongoTemplate ReactiveMongoRepository match/{matchId} 初期画⾯ リクエスト以前のコメント 対戦チーム情報など
  • 24. 24Copyright©2017 NTT corp. All Rights Reserved. 初期画⾯表⽰の実装 - MatchController コメントのFluxを取得 コメントのFluxをReactiveDataDriverContextVariableで warpしてModelに追加 → DATA-DRIVENモード
  • 25. 25Copyright©2017 NTT corp. All Rights Reserved. デモアプリ紹介 動的に更新
  • 26. 26Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画 Agent Controller ReavtiveMongoTemplate ReactiveMongoRepository match/{matchId}/statusStream 画⾯の⼀部 (SSEで送信) 試合状況 javascriptで画⾯に反映
  • 27. 27Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画 Agent Controller ReavtiveMongoTemplate ReactiveMongoRepository 画⾯の⼀部を⽣成 (SSEで送信) 新しい試合状況を取得 javascriptで画⾯に反映 得点や警告などの イベントをランダム⽣成 新しいイベントを挿⼊
  • 28. 28Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画の実装 - MatchEventInfoRepository MongoDBのTailable Cursorを使⽤して 新しくinsertされたデータを取得し続ける
  • 29. 29Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画の実装 - MatchController SSEで送信 Thymeleafで画⾯の⼀部を⽣成 DATA-DRIVEN モード
  • 30. 30Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画の実装 – match.html (js) SSEで送信されてきた画⾯の⼀部を使って 画⾯を部分的に書き換える 部分⽣成対象
  • 31. 31Copyright©2017 NTT corp. All Rights Reserved. デモアプリ紹介 動的に追加
  • 32. 32Copyright©2017 NTT corp. All Rights Reserved. コメント描画 Agent Controller ReavtiveMongoTemplate ReactiveMongoRepository match/{matchId}/commentStream? timestamp=xxxxxxxx(初期リクエスト時刻) json (SSEで送信) 指定timestampより 後のコメント javascriptで画⾯に反映
  • 33. 33Copyright©2017 NTT corp. All Rights Reserved. コメント描画 Agent Controller ReavtiveMongoTemplate ReactiveMongoRepository json (SSEで送信) javascriptで画⾯に反映 コメントをランダム⽣成 新しいコメントを取得 新しいコメントを挿⼊
  • 34. 34Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画の実装 - MatchCommentRepository MongoDBのTailable Cursorを使⽤して 新しくinsertされたデータを取得し続ける
  • 35. 35Copyright©2017 NTT corp. All Rights Reserved. コメント描画の実装 - MatchController jsonをSSEで送信
  • 36. 36Copyright©2017 NTT corp. All Rights Reserved. 試合状況描画の実装 – match.html (js) SSEで送信されてきたjsonデータを使って 画⾯を部分的に書き換える
  • 37. 37Copyright©2017 NTT corp. All Rights Reserved. • Thymeleaf 3 × WebFluxでReactiveなView出⼒ • 3つの処理モード • FULL • CHUNKED • DATA-DRIVEN • ⾒所満載のデモ まとめ 是⾮⼀次資料(スライド / ソースコード)に アクセスしてみて下さい!