テンプレートエンジンの話
@yusuke山本 裕介
Webアーキテクチャの変遷
古典的なHTTPサーバ
リクエスト
レスポンス HTML
リクエスト
レスポンス HTML
古典的Web• 利点• シンプルな仕組み
• 難点• コンテンツを全部毎回取得
(更新チェックのみの場合も)
AJAX
リクエスト
レスポンス HTML
リクエスト
レスポンス XML / JSON
AJAX• 利点• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
• 難点• URLが変わらない: ブックマーク、戻る不可
HashBang
リクエスト /#!yusuke
レスポンス HTML
リクエスト
レスポンス XML / JSON
HashBang• 利点• ブックマーク可• 難点• 初期ロード遅い(アンカー部分はサーバに伝わらない)
• 美しくないURL
モダンなアーキテクチャ
何が起きているか
GitHubのアーキテクチャ• onclickをフック
• onclickイベントでpushState
• URL書き換え
• 画面更新
HTML5のpushState• history.pushState(状態,タイトル,URL)
• 状態を保存、URL書き換えも可能
• popState
• windowオブジェクトのイベント
• 戻るボタンを押した際に発生、状態復帰
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+
旧来Web AJAX HashBang pushState
初期 ロードパフォーマンス ○ ○ △ ○
更新
パフォーマンス △ ○ ○ ○ブックマーク ○ × ○ ○戻る ○ × × ○
Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates
テンプレートエンジン
• テンプレートに従って動的コンテンツ作成• メール文面• Webページ
• 帳票
HTML5時代のテンプレートエンジンの要件• サーバ・クライアント両方でレンダリング• テンプレートを使い回せる
mustacheという選択
http://mustache.github.io/
mustacheの良いところ• 多目的: Web、メール等々
• 場所を問わない• サーバサイド: Java / Ruby / Node..
• クライアント: JavaScript
mustacheの良いところ• エディタ、IDEサポート
• Vim
• Emacs
• Sublime Text 2
• IntelliJ IDEA
mustache Javaコード例
MustacheFactory mf = new DefaultMustacheFactory();Mustache mustache = mf.compile("template.mustache");mustache.execute(writer, context) .flush();
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);
Mustacheプラグイン• Play Framework 1.x
• Play Framework 2.x
• Grails Mustache Pluginhttps://github.com/julienba/play2-mustache
http://www.playframework.com/modules/mustache
http://grails.org/plugin/mustache
demo!
の時間はなさそうなので機会があればJJUG CCCなどで?