テンプレートエンジンの話
@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+ /...
旧来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 JavaScriptコード例
<script type="text/javascript" src="http://
cdnjs.cloudflare.com/ajax/libs/mustache.js/
0.7.2/must...
Mustacheプラグイン
• Play Framework 1.x
• Play Framework 2.x
• Grails Mustache Plugin
https://github.com/julienba/play2-mustach...
demo!
の時間はなさそうなので機会
があればJJUG CCCなどで?
テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
Upcoming SlideShare
Loading in...5
×

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

6,187

Published on

0 Comments
27 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,187
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
28
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×