Download as PDF, PPTX
テンプレートエンジンの話 #jjug
- 1.
- 2.
- 3.
- 4.
- 6. 古典的Web • 利点 • シンプルな仕組み •難点 • コンテンツを全部毎回取得 (更新チェックのみの場合も)
- 7.
- 8. AJAX • 利点 • 動的なWebサイト •更新箇所のみサーバより取得: 高速 • 難点 • URLが変わらない: ブックマーク、戻る不可
- 9.
- 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 HashBangpushState 初期 ロード パフォーマンス ○ ○ △ ○ 更新 パフォーマンス △ ○ ○ ○ ブックマーク ○ × ○ ○ 戻る ○ × × ○
- 20. Javaのテンプレートエンジン • Velocity • FreeMarker •JSP • JSF • Scala Templates
- 21. テンプレートエンジン • テンプレートに従って動的コンテンツ作成 • メール文面 •Webページ • 帳票
- 22.
- 23.
- 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 Framework1.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.
- 30.