Enviar búsqueda
Cargar
テンプレートエンジンの話 #jjug
•
28 recomendaciones
•
9,183 vistas
Yusuke Yamamoto
Seguir
Denunciar
Compartir
Denunciar
Compartir
1 de 30
Descargar ahora
Descargar para leer sin conexión
Recomendados
Passenger
Passenger
Shunichi Arai
とあるApi
とあるApi
Wataru Shinohara
Web 01
Web 01
XMLProJ2014
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
サーバーレスでアンケートフォームを作ってみた
サーバーレスでアンケートフォームを作ってみた
ryutakatori
通信プロトコルから見る艦隊これくしょん on 第十回 カーネル/VM探検隊
通信プロトコルから見る艦隊これくしょん on 第十回 カーネル/VM探検隊
Kazuhiro Fujieda
Yesod(at FPM2012)
Yesod(at FPM2012)
Seizan Shimazaki
serverless
serverless
Kohei Misu
Recomendados
Passenger
Passenger
Shunichi Arai
とあるApi
とあるApi
Wataru Shinohara
Web 01
Web 01
XMLProJ2014
ActionCableのクライアントはRails外から利用できるのか
ActionCableのクライアントはRails外から利用できるのか
Yoichi Toyota
サーバーレスでアンケートフォームを作ってみた
サーバーレスでアンケートフォームを作ってみた
ryutakatori
通信プロトコルから見る艦隊これくしょん on 第十回 カーネル/VM探検隊
通信プロトコルから見る艦隊これくしょん on 第十回 カーネル/VM探検隊
Kazuhiro Fujieda
Yesod(at FPM2012)
Yesod(at FPM2012)
Seizan Shimazaki
serverless
serverless
Kohei Misu
テンプレート・エンジンVelocity
テンプレート・エンジンVelocity
隆行 神戸
Mustache入門
Mustache入門
ina job
Thymeleafでハマったこと
Thymeleafでハマったこと
eiryu
Thymeleafのすすめ
Thymeleafのすすめ
eiryu
JJUG CCC 2014 Fall LT
JJUG CCC 2014 Fall LT
Takashi Makino
失敗から学ぶAPI設計 #ccc_h4 #jjug #jjug_ccc JJUG CCC 2013 Spring
失敗から学ぶAPI設計 #ccc_h4 #jjug #jjug_ccc JJUG CCC 2013 Spring
Yusuke Yamamoto
JetBrains IDEハンズオン
JetBrains IDEハンズオン
Yusuke Yamamoto
JDK9 Features (Summary, 31/Jul/2015) #JJUG
JDK9 Features (Summary, 31/Jul/2015) #JJUG
Yuji Kubota
Introduction to AWS X-Ray
Introduction to AWS X-Ray
Keisuke Nishitani
What's new with Serverless
What's new with Serverless
Keisuke Nishitani
JavaOne 2016総括 #jjug
JavaOne 2016総括 #jjug
Yusuke Suzuki
第3回Twitter API勉強会 - ストリーミングAPI #twtr_hack
第3回Twitter API勉強会 - ストリーミングAPI #twtr_hack
Yusuke Yamamoto
Tune Up AWS Lambda
Tune Up AWS Lambda
Keisuke Nishitani
AWSでアプリ開発するなら 知っておくべこと
AWSでアプリ開発するなら 知っておくべこと
Keisuke Nishitani
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
株式会社サムライズム 新製品発表会 物理イカリングのご紹介 #gbdaitokai
株式会社サムライズム 新製品発表会 物理イカリングのご紹介 #gbdaitokai
Yusuke Yamamoto
これからはじめるGit、GitHub #stapy
これからはじめるGit、GitHub #stapy
Yusuke Yamamoto
誰も知らない IntelliJ IDEA凄技100選 #kotlin_sansan
誰も知らない IntelliJ IDEA凄技100選 #kotlin_sansan
Yusuke Yamamoto
Java Küche 2016 LT 在室状況自動通知ボット #JavaKueche
Java Küche 2016 LT 在室状況自動通知ボット #JavaKueche
Yusuke Yamamoto
Java Küche 2016 #JavaKueche
Java Küche 2016 #JavaKueche
Yusuke Yamamoto
JavaOne2016 #CON5929 Time-Saving Tips and Tricks for Building Quality Java Ap...
JavaOne2016 #CON5929 Time-Saving Tips and Tricks for Building Quality Java Ap...
Yusuke Yamamoto
WebStormから始まる快適Web開発ワークフロー #html5jk
WebStormから始まる快適Web開発ワークフロー #html5jk
Yusuke Yamamoto
Más contenido relacionado
Destacado
テンプレート・エンジンVelocity
テンプレート・エンジンVelocity
隆行 神戸
Mustache入門
Mustache入門
ina job
Thymeleafでハマったこと
Thymeleafでハマったこと
eiryu
Thymeleafのすすめ
Thymeleafのすすめ
eiryu
JJUG CCC 2014 Fall LT
JJUG CCC 2014 Fall LT
Takashi Makino
失敗から学ぶAPI設計 #ccc_h4 #jjug #jjug_ccc JJUG CCC 2013 Spring
失敗から学ぶAPI設計 #ccc_h4 #jjug #jjug_ccc JJUG CCC 2013 Spring
Yusuke Yamamoto
JetBrains IDEハンズオン
JetBrains IDEハンズオン
Yusuke Yamamoto
JDK9 Features (Summary, 31/Jul/2015) #JJUG
JDK9 Features (Summary, 31/Jul/2015) #JJUG
Yuji Kubota
Introduction to AWS X-Ray
Introduction to AWS X-Ray
Keisuke Nishitani
What's new with Serverless
What's new with Serverless
Keisuke Nishitani
JavaOne 2016総括 #jjug
JavaOne 2016総括 #jjug
Yusuke Suzuki
第3回Twitter API勉強会 - ストリーミングAPI #twtr_hack
第3回Twitter API勉強会 - ストリーミングAPI #twtr_hack
Yusuke Yamamoto
Tune Up AWS Lambda
Tune Up AWS Lambda
Keisuke Nishitani
AWSでアプリ開発するなら 知っておくべこと
AWSでアプリ開発するなら 知っておくべこと
Keisuke Nishitani
今からでも遅くない! React事始め
今からでも遅くない! React事始め
ynaruta
Destacado
(15)
テンプレート・エンジンVelocity
テンプレート・エンジンVelocity
Mustache入門
Mustache入門
Thymeleafでハマったこと
Thymeleafでハマったこと
Thymeleafのすすめ
Thymeleafのすすめ
JJUG CCC 2014 Fall LT
JJUG CCC 2014 Fall LT
失敗から学ぶAPI設計 #ccc_h4 #jjug #jjug_ccc JJUG CCC 2013 Spring
失敗から学ぶAPI設計 #ccc_h4 #jjug #jjug_ccc JJUG CCC 2013 Spring
JetBrains IDEハンズオン
JetBrains IDEハンズオン
JDK9 Features (Summary, 31/Jul/2015) #JJUG
JDK9 Features (Summary, 31/Jul/2015) #JJUG
Introduction to AWS X-Ray
Introduction to AWS X-Ray
What's new with Serverless
What's new with Serverless
JavaOne 2016総括 #jjug
JavaOne 2016総括 #jjug
第3回Twitter API勉強会 - ストリーミングAPI #twtr_hack
第3回Twitter API勉強会 - ストリーミングAPI #twtr_hack
Tune Up AWS Lambda
Tune Up AWS Lambda
AWSでアプリ開発するなら 知っておくべこと
AWSでアプリ開発するなら 知っておくべこと
今からでも遅くない! React事始め
今からでも遅くない! React事始め
Más de Yusuke Yamamoto
株式会社サムライズム 新製品発表会 物理イカリングのご紹介 #gbdaitokai
株式会社サムライズム 新製品発表会 物理イカリングのご紹介 #gbdaitokai
Yusuke Yamamoto
これからはじめるGit、GitHub #stapy
これからはじめるGit、GitHub #stapy
Yusuke Yamamoto
誰も知らない IntelliJ IDEA凄技100選 #kotlin_sansan
誰も知らない IntelliJ IDEA凄技100選 #kotlin_sansan
Yusuke Yamamoto
Java Küche 2016 LT 在室状況自動通知ボット #JavaKueche
Java Küche 2016 LT 在室状況自動通知ボット #JavaKueche
Yusuke Yamamoto
Java Küche 2016 #JavaKueche
Java Küche 2016 #JavaKueche
Yusuke Yamamoto
JavaOne2016 #CON5929 Time-Saving Tips and Tricks for Building Quality Java Ap...
JavaOne2016 #CON5929 Time-Saving Tips and Tricks for Building Quality Java Ap...
Yusuke Yamamoto
WebStormから始まる快適Web開発ワークフロー #html5jk
WebStormから始まる快適Web開発ワークフロー #html5jk
Yusuke Yamamoto
データクラスから始めるKotlin / JetBrainsに行ってきました #kotlin_kansai #jkug
データクラスから始めるKotlin / JetBrainsに行ってきました #kotlin_kansai #jkug
Yusuke Yamamoto
Troubleshooting Slowdowns, Freezes, Deadlocks : Introduction to Thread Dump #...
Troubleshooting Slowdowns, Freezes, Deadlocks : Introduction to Thread Dump #...
Yusuke Yamamoto
カジュアルにスレッドダンプ - @yusuke #javacasual
カジュアルにスレッドダンプ - @yusuke #javacasual
Yusuke Yamamoto
Excel方眼紙アプリケーションサーバと侍の新機能 #jjug
Excel方眼紙アプリケーションサーバと侍の新機能 #jjug
Yusuke Yamamoto
Twitter4jハンズオン 5/1 #twtr_hack
Twitter4jハンズオン 5/1 #twtr_hack
Yusuke Yamamoto
株式会社サムライズム@samuraismがcoincheck for ECを使ってビットコイン決済に対応した話 #gbdaitokai
株式会社サムライズム@samuraismがcoincheck for ECを使ってビットコイン決済に対応した話 #gbdaitokai
Yusuke Yamamoto
Botを使った業務効率化 / Java8を使ったBot実装効率化 @yusuke #jjug
Botを使った業務効率化 / Java8を使ったBot実装効率化 @yusuke #jjug
Yusuke Yamamoto
Twitter API最新事情 - API Meetup Tokyo #1 #apijp
Twitter API最新事情 - API Meetup Tokyo #1 #apijp
Yusuke Yamamoto
Java デバッガ活用術 ~勘デバッグ・print デバッグから抜けだそう~ #jjug_ccc #ccc_h4
Java デバッガ活用術 ~勘デバッグ・print デバッグから抜けだそう~ #jjug_ccc #ccc_h4
Yusuke Yamamoto
貧乏人のHeroku活用術 #herokujp
貧乏人のHeroku活用術 #herokujp
Yusuke Yamamoto
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
Yusuke Yamamoto
JavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumi
Yusuke Yamamoto
HerokuでJava7 #herokujp #waza
HerokuでJava7 #herokujp #waza
Yusuke Yamamoto
Más de Yusuke Yamamoto
(20)
株式会社サムライズム 新製品発表会 物理イカリングのご紹介 #gbdaitokai
株式会社サムライズム 新製品発表会 物理イカリングのご紹介 #gbdaitokai
これからはじめるGit、GitHub #stapy
これからはじめるGit、GitHub #stapy
誰も知らない IntelliJ IDEA凄技100選 #kotlin_sansan
誰も知らない IntelliJ IDEA凄技100選 #kotlin_sansan
Java Küche 2016 LT 在室状況自動通知ボット #JavaKueche
Java Küche 2016 LT 在室状況自動通知ボット #JavaKueche
Java Küche 2016 #JavaKueche
Java Küche 2016 #JavaKueche
JavaOne2016 #CON5929 Time-Saving Tips and Tricks for Building Quality Java Ap...
JavaOne2016 #CON5929 Time-Saving Tips and Tricks for Building Quality Java Ap...
WebStormから始まる快適Web開発ワークフロー #html5jk
WebStormから始まる快適Web開発ワークフロー #html5jk
データクラスから始めるKotlin / JetBrainsに行ってきました #kotlin_kansai #jkug
データクラスから始めるKotlin / JetBrainsに行ってきました #kotlin_kansai #jkug
Troubleshooting Slowdowns, Freezes, Deadlocks : Introduction to Thread Dump #...
Troubleshooting Slowdowns, Freezes, Deadlocks : Introduction to Thread Dump #...
カジュアルにスレッドダンプ - @yusuke #javacasual
カジュアルにスレッドダンプ - @yusuke #javacasual
Excel方眼紙アプリケーションサーバと侍の新機能 #jjug
Excel方眼紙アプリケーションサーバと侍の新機能 #jjug
Twitter4jハンズオン 5/1 #twtr_hack
Twitter4jハンズオン 5/1 #twtr_hack
株式会社サムライズム@samuraismがcoincheck for ECを使ってビットコイン決済に対応した話 #gbdaitokai
株式会社サムライズム@samuraismがcoincheck for ECを使ってビットコイン決済に対応した話 #gbdaitokai
Botを使った業務効率化 / Java8を使ったBot実装効率化 @yusuke #jjug
Botを使った業務効率化 / Java8を使ったBot実装効率化 @yusuke #jjug
Twitter API最新事情 - API Meetup Tokyo #1 #apijp
Twitter API最新事情 - API Meetup Tokyo #1 #apijp
Java デバッガ活用術 ~勘デバッグ・print デバッグから抜けだそう~ #jjug_ccc #ccc_h4
Java デバッガ活用術 ~勘デバッグ・print デバッグから抜けだそう~ #jjug_ccc #ccc_h4
貧乏人のHeroku活用術 #herokujp
貧乏人のHeroku活用術 #herokujp
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
リーンスタートアップ x Java #jjug #jjug_ccc #ccc_h4
JavaScript時代のJava #kansumiB7 #kansumi
JavaScript時代のJava #kansumiB7 #kansumi
HerokuでJava7 #herokujp #waza
HerokuでJava7 #herokujp #waza
テンプレートエンジンの話 #jjug
1.
テンプレートエンジンの話
2.
@yusuke 山本 裕介
3.
Webアーキテクチャの変遷
4.
古典的なHTTPサーバ リクエスト レスポンス HTML リクエスト レスポンス HTML
5.
6.
古典的Web • 利点 • シンプルな仕組み •
難点 • コンテンツを全部毎回取得 (更新チェックのみの場合も)
7.
AJAX リクエスト レスポンス HTML リクエスト レスポンス XML
/ JSON
8.
AJAX • 利点 • 動的なWebサイト •
更新箇所のみサーバより取得: 高速 • 難点 • URLが変わらない: ブックマーク、戻る不可
9.
HashBang リクエスト /#!yusuke レスポンス HTML リクエスト レスポンス
XML / JSON
10.
HashBang • 利点 • ブックマーク可 •
難点 • 初期ロード遅い(アンカー部分はサーバに伝わらない) • 美しくないURL
11.
モダンなアーキテクチャ
12.
13.
何が起きているか
14.
15.
GitHubのアーキテクチャ • onclickをフック • onclickイベントでpushState •
URL書き換え • 画面更新
16.
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などで?
Descargar ahora