javascript時代のjava #kansumib7 #kansumi
DESCRIPTION
Javaださくない!TRANSCRIPT
![Page 1: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/1.jpg)
SummitDevelopers Developers Summit 2013 Kansai Action !
JavaScript時代のJava
山本 裕介株式会社サムライズム#kansumiB7
B7
~Java x Webを取り巻く熱いムード~
Tuesday, September 24, 13
![Page 2: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/2.jpg)
@yusuke
Tuesday, September 24, 13
![Page 3: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/3.jpg)
#kansumiB7
Tuesday, September 24, 13
![Page 4: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/4.jpg)
JavaScript時代のJava• フロントエンドアーキテクチャ変遷
• サーバサイドアーキテクチャ変遷
• なんでJava?
Tuesday, September 24, 13
![Page 5: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/5.jpg)
フロントエンドアーキテクチャ変遷
Tuesday, September 24, 13
![Page 6: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/6.jpg)
古典的Web
Tuesday, September 24, 13
![Page 7: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/7.jpg)
Tuesday, September 24, 13
![Page 8: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/8.jpg)
古典的Web
リクエスト(index.html)
レスポンス
リクエスト(about.html)
レスポンス
Tuesday, September 24, 13
![Page 9: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/9.jpg)
古典的Web• 利点
• シンプルな仕組み
Tuesday, September 24, 13
![Page 10: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/10.jpg)
古典的Web• 利点
• シンプルな仕組み
• 難点
• コンテンツを全部毎回取得
(更新チェックのみの場合も)
Tuesday, September 24, 13
![Page 11: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/11.jpg)
21世紀的Web
Tuesday, September 24, 13
![Page 12: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/12.jpg)
21世紀的Web• ダイナミックHTML
• JavaScriptで動的にコンテントを書き換え
• フォームのリアルタイムバリデーションなど
Tuesday, September 24, 13
![Page 13: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/13.jpg)
AJAX
Tuesday, September 24, 13
![Page 14: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/14.jpg)
AJAX
Tuesday, September 24, 13
![Page 15: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/15.jpg)
AJAX
リクエスト
レスポンス HTML
リクエスト
レスポンス XML / JSON
Tuesday, September 24, 13
![Page 16: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/16.jpg)
AJAX• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
Tuesday, September 24, 13
![Page 17: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/17.jpg)
AJAX• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
• 難点
• URLが変わらない: ブックマーク不可
• 戻るボタン不可
Tuesday, September 24, 13
![Page 18: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/18.jpg)
HashBang• 利点
• ブックマーク可
Tuesday, September 24, 13
![Page 19: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/19.jpg)
HashBang
リクエスト /#!yusuke
レスポンス HTML
リクエスト #!yusuke
レスポンス XML / JSON
Tuesday, September 24, 13
![Page 20: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/20.jpg)
HashBang• 利点
• ブックマーク可
• 難点
• 初期ロードが遅い
• (アンカー部分はサーバに伝わらない)
• 美しくないURL
Tuesday, September 24, 13
![Page 21: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/21.jpg)
モダンなアーキテクチャ
Tuesday, September 24, 13
![Page 22: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/22.jpg)
pushState
Tuesday, September 24, 13
![Page 23: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/23.jpg)
Tuesday, September 24, 13
![Page 24: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/24.jpg)
何が起きているか
Tuesday, September 24, 13
![Page 25: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/25.jpg)
Tuesday, September 24, 13
![Page 26: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/26.jpg)
GitHubのアーキテクチャ• onclickをフック
• onclickイベントでpushState
• URL書き換え
• 画面更新
Tuesday, September 24, 13
![Page 27: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/27.jpg)
Tuesday, September 24, 13
![Page 28: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/28.jpg)
HTML5のpushState• history.pushState(状態,タイトル,URL)
• 状態を保存、URL書き換えも可能
• popState
• windowオブジェクトのイベント
• 戻るボタンを押した際に発生、状態復帰
Tuesday, September 24, 13
![Page 29: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/29.jpg)
旧来Web AJAX HashBang pushState
初期 ロードパフォーマンス ○ ○ △ ○
更新
パフォーマンス △ ○ ○ ○ブックマーク ○ × ○ ○戻る ○ × × ○
Tuesday, September 24, 13
![Page 30: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/30.jpg)
pushState• 利点
• ブックマーク可
• 戻る/進む可
• 難点
• ない
Tuesday, September 24, 13
![Page 31: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/31.jpg)
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+
Tuesday, September 24, 13
![Page 32: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/32.jpg)
サーバサイドアーキテクチャ変遷
Tuesday, September 24, 13
![Page 33: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/33.jpg)
サーバサイドアーキテクチャ変遷
• 全て静的
• cgi :プロセス起動、動的コンテンツが可能に
• fast-cgi : プロセス常駐
• JServ / J2EE / JavaEE : APサーバ
• (mod_) Ruby / Python / PHP : プロセッサ内蔵
Tuesday, September 24, 13
![Page 34: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/34.jpg)
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
![Page 35: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/35.jpg)
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
![Page 36: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/36.jpg)
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
![Page 37: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/37.jpg)
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
![Page 38: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/38.jpg)
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
![Page 39: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/39.jpg)
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• RDBMS
• 動的言語
ボトルネックはDBにある言語はパフォーマンスよりも
気持ちよさ!!
Tuesday, September 24, 13
![Page 40: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/40.jpg)
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• NoSQL、検索エンジン
• 動的言語
さらに
Tuesday, September 24, 13
![Page 41: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/41.jpg)
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• NoSQL、検索エンジン
• 動的言語
さらに
ボトルネックになるのでは?
Tuesday, September 24, 13
![Page 42: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/42.jpg)
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• NoSQL、検索エンジン
• 静的言語
さらにさらに
JITコンパイル、ネイティブ並
Tuesday, September 24, 13
![Page 43: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/43.jpg)
オシャレなWebアーキテクチャ
• AJAX / pushState
• NoSQL、検索エンジン
• 静的言語
さらにさらにさらに
Tuesday, September 24, 13
![Page 44: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/44.jpg)
pushStateを使う際の課題
• レンダリング担当
• クライアント
Tuesday, September 24, 13
![Page 45: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/45.jpg)
pushStateを使う際の課題
• レンダリング担当
• クライアント
• サーバ
Tuesday, September 24, 13
![Page 46: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/46.jpg)
pushStateを使う際の課題
• レンダリング担当
• クライアント
• サーバ
テンプレートエンジンが肝
Tuesday, September 24, 13
![Page 47: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/47.jpg)
Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates
Tuesday, September 24, 13
![Page 48: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/48.jpg)
Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates
デザイナフレンドリ?
Tuesday, September 24, 13
![Page 49: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/49.jpg)
ベストなテンプレートエンジン
• Webデザイナフレンドリ
• 用意な文法
• サーバレスでレンダリング結果確認可能
Tuesday, September 24, 13
![Page 50: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/50.jpg)
テンプレートエンジン
• Web画面以外にも必要
• メール文面
• 帳票出力
Tuesday, September 24, 13
![Page 51: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/51.jpg)
HTML5時代のテンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる
Tuesday, September 24, 13
![Page 52: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/52.jpg)
HTML5時代のテンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる
JavaScriptベース
Tuesday, September 24, 13
![Page 53: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/53.jpg)
mustacheという選択
http://mustache.github.io/
Tuesday, September 24, 13
![Page 54: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/54.jpg)
mustacheの良いところ• 多目的: Web、メール等々
• 場所を問わない
• サーバサイド: Java / Ruby / Node..
• クライアント: JavaScript
Tuesday, September 24, 13
![Page 55: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/55.jpg)
mustacheの良いところ• エディタ、IDEサポート
• Vim
• Emacs
• Sublime Text
• IntelliJ IDEA
Tuesday, September 24, 13
![Page 56: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/56.jpg)
mustache Javaコード例
MustacheFactory mf = new DefaultMustacheFactory();Mustache mustache = mf.compile("template.mustache");mustache.execute(writer, context) .flush();
Tuesday, September 24, 13
![Page 57: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/57.jpg)
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);
Tuesday, September 24, 13
![Page 58: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/58.jpg)
Mustacheプラグイン• Play Framework 1.x
• Play Framework 2.x
• Grails Mustache Pluginhttps://github.com/julienba/play2-mustache
http://www.playframework.com/modules/mustache
http://grails.org/plugin/mustache
Tuesday, September 24, 13
![Page 59: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/59.jpg)
その他のJavaScriptテンプレートエンジン
• Handlebars.js (Mustache + ロジック)
Tuesday, September 24, 13
![Page 60: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/60.jpg)
その他のJavaScriptテンプレートエンジン
• Hogan.js (Mustacheコンパイラ)
http://twitter.github.io/hogan.js/
Tuesday, September 24, 13
![Page 61: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/61.jpg)
その他のJavaScriptテンプレートエンジン
• AngularJS(フルスタック?JSフレームワーク)
http://angularjs.org
Tuesday, September 24, 13
![Page 62: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/62.jpg)
JavaでJavaScriptを動かす• Javaに付属のJavaScriptエンジン
• Rhino: Java 6~7
• Nashorn: Java 8~
Tuesday, September 24, 13
![Page 63: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/63.jpg)
Java(JVM)+AngularJSの例
https://github.com/hhariri/wasabiTuesday, September 24, 13
![Page 64: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/64.jpg)
まとめ
Tuesday, September 24, 13
![Page 65: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/65.jpg)
pushStateかっこいい
Tuesday, September 24, 13
![Page 66: JavaScript時代のJava #kansumiB7 #kansumi](https://reader033.vdocuments.pub/reader033/viewer/2022051313/54939e33ac7959092e8b48ff/html5/thumbnails/66.jpg)
Javaださくない
Tuesday, September 24, 13