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

@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などで？