• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
テンプレートエンジンの話 #jjug
 

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

on

  • 6,393 views

 

Statistics

Views

Total Views
6,393
Views on SlideShare
5,961
Embed Views
432

Actions

Likes
25
Downloads
25
Comments
0

6 Embeds 432

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

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • テンプレートエンジンの話
    • @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 Plugin https://github.com/julienba/play2-mustache http://www.playframework.com/modules/mustache http://grails.org/plugin/mustache
    • demo!
    • の時間はなさそうなので機会 があればJJUG CCCなどで?