0
Summit
Developers
Developers Summit 2013 Kansai Action !
JavaScript時代のJava
山本 裕介
株式会社サムライズム
#kansumiB7
B7
∼Java x Webを取り巻く...
@yusuke
Tuesday, September 24, 13
#kansumiB7
Tuesday, September 24, 13
JavaScript時代のJava
• フロントエンドアーキテクチャ変遷
• サーバサイドアーキテクチャ変遷
• なんでJava?
Tuesday, September 24, 13
フロントエンドアーキテクチャ変遷
Tuesday, September 24, 13
古典的Web
Tuesday, September 24, 13
Tuesday, September 24, 13
古典的Web
リクエスト(index.html)
レスポンス
リクエスト(about.html)
レスポンス
Tuesday, September 24, 13
古典的Web
• 利点
• シンプルな仕組み
Tuesday, September 24, 13
古典的Web
• 利点
• シンプルな仕組み
• 難点
• コンテンツを全部毎回取得
(更新チェックのみの場合も)
Tuesday, September 24, 13
21世紀的Web
Tuesday, September 24, 13
21世紀的Web
• ダイナミックHTML
• JavaScriptで動的にコンテントを書き換え
• フォームのリアルタイムバリデーションなど
Tuesday, September 24, 13
AJAX
Tuesday, September 24, 13
AJAX
Tuesday, September 24, 13
AJAX
リクエスト
レスポンス HTML
リクエスト
レスポンス XML / JSON
Tuesday, September 24, 13
AJAX
• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
Tuesday, September 24, 13
AJAX
• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
• 難点
• URLが変わらない: ブックマーク不可
• 戻るボタン不可
Tuesday, September 24, 13
HashBang
• 利点
• ブックマーク可
Tuesday, September 24, 13
HashBang
リクエスト /#!yusuke
レスポンス HTML
リクエスト #!yusuke
レスポンス XML / JSON
Tuesday, September 24, 13
HashBang
• 利点
• ブックマーク可
• 難点
• 初期ロードが遅い
• (アンカー部分はサーバに伝わらない)
• 美しくないURL
Tuesday, September 24, 13
モダンなアーキテクチャ
Tuesday, September 24, 13
pushState
Tuesday, September 24, 13
Tuesday, September 24, 13
何が起きているか
Tuesday, September 24, 13
Tuesday, September 24, 13
GitHubのアーキテクチャ
• onclickをフック
• onclickイベントでpushState
• URL書き換え
• 画面更新
Tuesday, September 24, 13
Tuesday, September 24, 13
HTML5のpushState
• history.pushState(状態,タイトル,URL)
• 状態を保存、URL書き換えも可能
• popState
• windowオブジェクトのイベント
• 戻るボタンを押した際に発生、状態復帰
Tu...
旧来Web AJAX HashBang pushState
初期 ロード
パフォーマンス ○ ○ △ ○
更新
パフォーマンス △ ○ ○ ○
ブックマーク
○ × ○ ○
戻る
○ × × ○
Tuesday, September 24, 13
pushState
• 利点
• ブックマーク可
• 戻る/進む可
• 難点
• ない
Tuesday, September 24, 13
push/popStateが使えるか
if (window.history.pushState){
// pushState対応ブラウザ
} else {
// pushState非対応ブラウザ
}
IE 10+ / Firefox 21+ /...
サーバサイドアーキテクチャ変遷
Tuesday, September 24, 13
サーバサイドアーキテクチャ変遷
• 全て静的
• cgi :プロセス起動、動的コンテンツが可能に
• fast-cgi : プロセス常駐
• JServ / J2EE / JavaEE : APサーバ
• (mod_) Ruby / Pytho...
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
モダンアーキテクチャ
Webサーバ APサーバ DBサーバ
Tuesday, September 24, 13
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• RDBMS
• 動的言語
ボトルネックはDBにある
言語はパフォーマンスよりも
気持ちよさ!!
Tuesday, September 24, 13
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• NoSQL、検索エンジン
• 動的言語
さらに
Tuesday, September 24, 13
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• NoSQL、検索エンジン
• 動的言語
さらに
ボトルネックになるのでは?
Tuesday, September 24, 13
オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• NoSQL、検索エンジン
• 静的言語
さらにさらに
JITコンパイル、ネイティブ並
Tuesday, September 24, 13
オシャレなWebアーキテクチャ
• AJAX / pushState 
• NoSQL、検索エンジン
• 静的言語
さらにさらにさらに
Tuesday, September 24, 13
pushStateを使う際の課題
• レンダリング担当
• クライアント
Tuesday, September 24, 13
pushStateを使う際の課題
• レンダリング担当
• クライアント
• サーバ
Tuesday, September 24, 13
pushStateを使う際の課題
• レンダリング担当
• クライアント
• サーバ
テンプレートエンジンが肝
Tuesday, September 24, 13
Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates
Tuesday, September 24, 13
Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates
デザイナフレンドリ?
Tuesday, September 24, 13
ベストなテンプレートエンジン
• Webデザイナフレンドリ
• 用意な文法
• サーバレスでレンダリング結果確認可能
Tuesday, September 24, 13
テンプレートエンジン
• Web画面以外にも必要
• メール文面
• 帳票出力
Tuesday, September 24, 13
HTML5時代の
テンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる
Tuesday, September 24, 13
HTML5時代の
テンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる
JavaScriptベース
Tuesday, September 24, 13
mustacheという選択
http://mustache.github.io/
Tuesday, September 24, 13
mustacheの良いところ
• 多目的: Web、メール等々
• 場所を問わない
• サーバサイド: Java / Ruby / Node..
• クライアント: JavaScript
Tuesday, September 24, 13
mustacheの良いところ
• エディタ、IDEサポート
• Vim
• Emacs
• Sublime Text
• IntelliJ IDEA
Tuesday, September 24, 13
mustache Javaコード例
MustacheFactory mf = new
DefaultMustacheFactory();
Mustache mustache =
mf.compile("template.mustache");
...
mustache JavaScriptコード例
<script type="text/javascript" src="http://
cdnjs.cloudflare.com/ajax/libs/mustache.js/
0.7.2/must...
Mustacheプラグイン
• Play Framework 1.x
• Play Framework 2.x
• Grails Mustache Plugin
https://github.com/julienba/play2-mustach...
その他のJavaScriptテンプレートエンジン
• Handlebars.js (Mustache + ロジック)
Tuesday, September 24, 13
その他のJavaScriptテンプレートエンジン
• Hogan.js (Mustacheコンパイラ)
http://twitter.github.io/hogan.js/
Tuesday, September 24, 13
その他のJavaScriptテンプレートエンジン
• AngularJS(フルスタック?JSフレームワーク)
http://angularjs.org
Tuesday, September 24, 13
JavaでJavaScriptを動かす
• Javaに付属のJavaScriptエンジン
• Rhino: Java 6∼7
• Nashorn: Java 8∼
Tuesday, September 24, 13
Java(JVM)+AngularJSの例
https://github.com/hhariri/wasabi
Tuesday, September 24, 13
まとめ
Tuesday, September 24, 13
pushStateかっこいい
Tuesday, September 24, 13
Javaださくない
Tuesday, September 24, 13
Upcoming SlideShare
Loading in...5
×

JavaScript時代のJava #kansumiB7 #kansumi

11,312

Published on

Javaださくない!

Published in: Technology
3 Comments
41 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,312
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
39
Comments
3
Likes
41
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript時代のJava #kansumiB7 #kansumi"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×