JavaScript時代のJava #kansumiB7 #kansumi

13,239 views

Published on

Javaださくない!

Published in: Technology
3 Comments
41 Likes
Statistics
Notes
No Downloads
Views
Total views
13,239
On SlideShare
0
From Embeds
0
Number of Embeds
3,236
Actions
Shares
0
Downloads
40
Comments
3
Likes
41
Embeds 0
No embeds

No notes for slide

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

×