1. テンプレートエンジンの話

2. @yusuke
山本 裕介

3. Webアーキテクチャの変遷

4. 古典的なHTTPサーバ
リクエスト
レスポンス HTML
リクエスト
レスポンス HTML

6. 古典的Web
• 利点
• シンプルな仕組み
• 難点
• コンテンツを全部毎回取得
(更新チェックのみの場合も)

7. AJAX
リクエスト
レスポンス HTML
リクエスト
レスポンス XML / JSON

8. AJAX
• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
• 難点
• URLが変わらない: ブックマーク、戻る不可

9. HashBang
リクエスト /#!yusuke
レスポンス HTML
リクエスト
レスポンス XML / JSON

10. HashBang
• 利点
• ブックマーク可
• 難点
• 初期ロード遅い(アンカー部分はサーバに伝わらない)
• 美しくないURL

11. モダンなアーキテクチャ

13. 何が起きているか

15. GitHubのアーキテクチャ
• onclickをフック
• onclickイベントでpushState
• URL書き換え
• 画面更新

17. HTML5のpushState
• history.pushState(状態,タイトル,URL)
• 状態を保存、URL書き換えも可能
• popState
• windowオブジェクトのイベント
• 戻るボタンを押した際に発生、状態復帰

18. push/popStateが使えるか
if (window.history.pushState){
// pushState対応ブラウザ
} else {
// pushState非対応ブラウザ
}
IE 10+ / Firefox 21+ / Chrome 27+
Safari 5.1+ / Opera 15+ / IOS Safari 5.0+
Android Browser 2.2, 2.3, 4.2+

19. 旧来Web AJAX HashBang pushState
初期 ロード
パフォーマンス ○ ○ △ ○
更新
パフォーマンス △ ○ ○ ○
ブックマーク
○ × ○ ○
戻る
○ × × ○

20. Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates

21. テンプレートエンジン
• テンプレートに従って動的コンテンツ作成
• メール文面
• Webページ
• 帳票

22. HTML5時代の
テンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる

23. mustacheという選択
http://mustache.github.io/

24. mustacheの良いところ
• 多目的: Web、メール等々
• 場所を問わない
• サーバサイド: Java / Ruby / Node..
• クライアント: JavaScript

25. mustacheの良いところ
• エディタ、IDEサポート
• Vim
• Emacs
• Sublime Text 2
• IntelliJ IDEA

26. mustache Javaコード例
MustacheFactory mf = new
DefaultMustacheFactory();
Mustache mustache =
mf.compile("template.mustache");
mustache.execute(writer, context)
.flush();

27. mustache JavaScriptコード例
<script type="text/javascript" src="http://
cdnjs.cloudflare.com/ajax/libs/mustache.js/
0.7.2/mustache.min.js"></script>
var html = Mustache.to_html(template,json);
$('#result').html(html);

28. Mustacheプラグイン
• Play Framework 1.x
• Play Framework 2.x
• Grails Mustache Plugin
https://github.com/julienba/play2-mustache
http://www.playframework.com/modules/mustache
http://grails.org/plugin/mustache

29. demo!

30. の時間はなさそうなので機会
があればJJUG CCCなどで？