テンプレートエンジンの話 #jjug
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 6,827 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,827
On Slideshare
6,366
From Embeds
461
Number of Embeds
7

Actions

Shares
Downloads
25
Comments
0
Likes
25

Embeds 461

http://kikutaro777.hatenablog.com 368
https://twitter.com 80
http://cloud.feedly.com 5
http://s.deeeki.com 4
http://tweetedtimes.com 2
http://summary 1
https://www.chatwork.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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