Apache Wicketを利用したWebシステムで Reactiveプログラミングを取り入れた事例の紹介

1. Reactive Programming
with Wicket
2016/04/28
Reactive Programming “Object Oriented Approach”を
Websシステム開発にとり⼊れた実践事例の紹介

2. ⾃⼰紹介
仕事はJava
Scalaが好き
Wicket歴３年
Twitter: rysh@cactaceae

3. 話すこと
Apache Wicket
ViewとModelの分離
Object-Oriented Reactive Programming

4. 話さないこと
Reactive Streams
Functional Reactive Programming
Reactive Extensions
Reactive Application

5. Wicketとは
2004年開発スタート
2015年まで⽣き残った14のJava製Web FWの⼀つ
コミニュティもまだまだ活発

6. なぜWicketでReactive？
⼊社時にWicketが使われていた
諸事情あり
Wicketを使ったプログラミングの効率を追求

7. Wicketの特徴
Swing likeなAPIでオブジェクト指向らしく書ける
Viewに使うHTMLは単体でも正しく表⽰できる
再利⽤性が⾼いComponent
AjaxにはJavaScriptを⾃動⽣成して対応
画⾯の差分更新もFWがやってくれる

8. Hello World

9. アーキテクチャ
コンポーネントベース
ステイトフル
J2EEのフィルタ上に実装され、AP Serverで動作
HTTPプロトコルをラップ(隠蔽)して意識させない

10. Wicketプログラミングの基本
あらゆるコンポーネントは継承による拡張が前提
Overrideして振る舞いを変える
Behaivorによる委譲も使える
匿名クラスを多⽤

11. WicketのComponent
HTMLタグや画⾯部品に対応したクラス
必ずComponentクラスを継承している
メンバにIDとModelを持つ
コンポジットパターンでDOMのTree構造を表現している

12. WicketのModel
データのWrapper
Componentに対応するViewにデータバインドで表⽰

13. WicketのModel
Wrapperとしての利⽤例

14. よくあるGUIの問題
ModelがただのWrapperなのでComponentクラス内
でデータ取得することになる
Viewのあちこちにビジネスロジックが埋め込まれる

15. Reactive Programming
データフロー (data flows) に着⽬
変更を伝播 (propagation of change)

16. Imperative Programming
b = 1
c= 2
a = b + c
b = 10
print(a) // 3が出⼒
・aは代⼊された時点の値を保持する

17. Reactive Programming
b = 1
c= 2
a = b + c
b = 10
print(a) // 12が出⼒
・右辺の値が変わると左辺に伝播される
(いつ伝播されるかは実装による)

18. SPEEDAのデモ

19. GUIのデータフロー

20. GUIのデータフロー
データフロー を グラフで表現

21. 変更の伝播
データモデル間の伝播
データモデルから画⾯への伝播
ユーザーインプットをデータモデルに伝播

22. 変更の伝播
データモデル間の伝播
データモデルから画⾯への伝播
ユーザーインプットをデータモデルに伝播
Wicketが標準機能でサポート

23. 変更の伝播
普通は遅延評価を使って常に最新の値がとれるようにする
Javaの⾔語機能には遅延評価はない
Wicketの標準コンポーネントには
LoadableDetacheableModelというクラスがあり、
これはレンダリング時にモデルの内容を読み込むという
遅延評価を⾏っている
この遅延評価を⾏うモデルをチェインして伝播を実現

24. 遅延評価を⾏うモデル
Wrapperとしての利⽤例
遅延評価を⾏うモデルの例

25. 遅延評価のメリット
Wrapperの場合、初期化時に全データをロードする
遅延評価を⾏うと表⽰に使われないデータはロード
されない
制御コードを書かなくていいので可視性も向上

26. グラフ実装の課題と対策
愚直にグラフを実装すると全貌が⾒えづらくなる
データ同⼠の関連は画⾯の要求に基づいているた
め、バックエンドのデータモデルと乖離
MVVMパターンを適⽤しバックエンドのデータモデ
ルをそのまま利⽤。
⼀部のケースではEventを併⽤

27. 実現できたこと
ViewとModelの⾃然な分離
⾃律的なComponentの実装
全てのComponent階層で再利⽤可能
簡潔でトレーサビリティの⾼いコード

28. 終わり

29. 追加のTopic

30. Wicketの Pros/Cons
快適にオブジェクト指向プログラミングできる
デフォルトでオンメモリキャッシュが効いているようなものなので速い
スケール/Continuous Deliveryしずらい
起源が古くAjaxやEventは後付けの設計
ドキュメントやサンプルコードは古いスタイルの物が多い
デフォルトの設定も昔の常識に沿ったままなのでいろいろ設定が必要
Wicketʼs request processing is delicate monster…

31. Wicketのスケールアウト
ステイトフルなのでsession情報を共有が必要
スケールしようとするとステイトフルだったメリッ
トがデメリットになって襲いかかってくる
UZABASEではSessionサーバーをnettyベースで⾃作

32. Eventを使うケース
Ajaxによって再描画するコンポーネントを
AjaxRequestTargetにAddする時
特定のアクションがあった時だけ評価式が変わる 時
(グラフの構造が変わる)

33. Wicketの⼈気は？

34. Wicketの⼈気は？
wicketには、英語では「⼩さな⾨」「（銀⾏などの）
格⼦窓⼝」の意味の他、クリケットで使⽤される「3本
の杭と、杭の上部に2本の横⽊を乗せた柱状のもの」
（三柱⾨）の意味がある。
Wikipediaより

35. Wicketの⼈気は？

36. Wicketの⼈気は？
察してください

37. 終わり