Address
:
[go:
up one dir
,
main page
]
Include Form
Remove Scripts
Accept Cookies
Show Images
Show Referer
Rotate13
Base64
Strip Meta
Strip Title
Session Cookies
More Web Proxy on the site http://driver.im/
Submit Search
テンプレートエンジンの話 #jjug
•
28 likes
•
9,192 views
Yusuke Yamamoto
Follow
1 of 30
Download now
Downloaded 30 times
More Related Content
テンプレートエンジンの話 #jjug
1.
テンプレートエンジンの話
2.
@yusuke 山本 裕介
3.
Webアーキテクチャの変遷
4.
古典的なHTTPサーバ リクエスト レスポンス HTML リクエスト レスポンス HTML
6.
古典的Web • 利点 • シンプルな仕組み •
難点 • コンテンツを全部毎回取得 (更新チェックのみの場合も)
7.
AJAX リクエスト レスポンス HTML リクエスト レスポンス XML
/ JSON
8.
AJAX • 利点 • 動的なWebサイト •
更新箇所のみサーバより取得: 高速 • 難点 • URLが変わらない: ブックマーク、戻る不可
9.
HashBang リクエスト /#!yusuke レスポンス HTML リクエスト レスポンス
XML / JSON
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 HashBang
pushState 初期 ロード パフォーマンス ○ ○ △ ○ 更新 パフォーマンス △ ○ ○ ○ ブックマーク ○ × ○ ○ 戻る ○ × × ○
20.
Javaのテンプレートエンジン • Velocity • FreeMarker •
JSP • JSF • Scala Templates
21.
テンプレートエンジン • テンプレートに従って動的コンテンツ作成 • メール文面 •
Webページ • 帳票
22.
HTML5時代の テンプレートエンジンの要件 • サーバ・クライアント両方でレンダリング • テンプレートを使い回せる
23.
mustacheという選択 http://mustache.github.io/
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 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
29.
demo!
30.
の時間はなさそうなので機会 があればJJUG CCCなどで?
Download