タグ別アーカイブ: Spring

ダブルMVCルーティングを追え!

| コメントをどうぞ

クライアントサイドのフレームワークが使いたい。
とくに、AngularJSなどは素敵だ。
使おうとなってみたところで、おい待てよと。
クライアントにもルーティングがあるよと。
サーバでルーティングしている場合どうなるんですかと。

よし、今日はレッドオクトーバーダブルMVCのルーティングを追ってみることにしよう。
どうも、DiceK Mikamiです。

 

0. 検証理由

チームで開発すると明確なローカル規約や仕様書が存在しない場合、ソース構成が驚きの汚さになります。
また、内容も属人的になってしまい、「これ作った奴、ちょっと俺に謝れ」となります。(なりませんか?
こうした問題を解決するため、構成の見通しの良さからサーバサイド、クライアントサイドとフレームワークを使いたくなるのも人情と言うもの。
で、その前段階として今回の検証をしてみようと思った次第であります。
 

1. 準備

今回は、サーバをSpring Bootで作り、クライアントをAngularJSで作ります。
サーバをRESTサーバにして、クライアントと完全に分離すると検証の意味がないので、サーバに内包する形でAngularJSを使います。
(というか、それが今回の肝。サーバのVがクライアントに繋がっていないとルーティングの謎を追えない)
イメージとしては、Spring BootのView部分がAngularJSで出来ていると言う感じ。

2. 仮説

仮説として、以下のようなフローになると考えています。

  1. ブラウザからの要求からサーバコントローラーが起動する。
  2. サーバコントローラーに紐づいているサーバビューが返却される。
  3. サーバビューがJSP(HTML)とした場合、まずビューが起動する。
  4. ビューに紐づいているクライアントコントローラーが動く。
  5. クライアントコントローラーによって計算された値が、クライアントビューに返却される。
  6. クライアントビューが表示が完了する。

ポイントは、サーバビューとはクライアント側の基底HTML(JSP)であること。
また、クライアントビューは、この基底HTMLの上にインジェクトされるHTMLであることです。
ちょっと煩雑ですね。
 

3. 実装

まずは、Spring Bootでサーバ側をさくっと作ります。

doublemvc02

できました。
Sample Controllerがサーバコントローラーで、index.jspがサーバコントローラーに紐づいているビューです。
上図は、まだAngularJSを導入していない状態です。
これにAngularJSのクライアントを投入します。

doublemvc03

できました。
webapp/sample 配下が、AngularJSでできています。
また、WEB-INF/jsp/sample/dist 配下のindex.jspがAngularJS用のサーバビューになります。
ここでポイントは、「 /sample/dist/index.jsp = サーバビュー 」であり、「 /sample/dist/index.jsp = AngularJSの基底HTML 」だということです。
ですので、サーバコントローラーからは、このindex.jspを呼び出すことになります。
 

4. 実験

さて、いよいよ実験です。

doublemvc04

最終的な表示画面に各所の通過タイム(new Date()によるミリ秒表示)を表示してみました。
仮説の通りになりました。
client viewの時間は、AngularJSの基底HTMLを通過した時間です。
時間を見る限りやはりここがエントリーポイントのようです。
 

5. さいごに

時間検証を行うことで、ダブルMVCであってもそれぞれの干渉することなく動作させることが出来ることがわかりました。
しかし、クライアントは基底HTMLによって閉じることになりますので、例えば、サーバ側で複数のルーティングを持つ場合、クライアントではそれぞれの関連を持つことが出来ないことになります。
これが開発を行っていく上で余計な手間を増やさないかが気になるところです。
反面、接合点さえ決めておけば、パラレルに作業を進めることができ、またそれぞれでテストを行うことができるのは魅力的ではないでしょうか?
実際に適用してみた事例がもっと出てきてくれれば、こうした事例におけるベストプラクティスが見つかるかもしれませんね。

これにて任務完了。
 

おまけ

今回、検証に利用したソースはGitHubにあげておきました。
corestrike/RoutingSample