JavaScript時代のJava #kansumiB7 #kansumi
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

JavaScript時代のJava #kansumiB7 #kansumi

on

  • 11,395 views

Javaださくない!

Javaださくない!

Statistics

Views

Total Views
11,395
Views on SlideShare
9,540
Embed Views
1,855

Actions

Likes
40
Downloads
36
Comments
3

12 Embeds 1,855

http://samuraism.jp 1079
http://morizo999.hatenablog.com 500
https://twitter.com 181
http://cloud.feedly.com 55
http://freerss.net 14
http://cockerels11.rssing.com 10
http://reader.aol.com 5
http://www.feedspot.com 4
http://feedly.com 2
http://webcache.googleusercontent.com 2
http://emi 2
http://translate.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • よろしければ伺いますよ!もうちょっと動くものを作ってから・・・
    Are you sure you want to
    Your message goes here
    Processing…
  • こういうトークが、うちの勉強会で欲しいですね!
    Are you sure you want to
    Your message goes here
    Processing…
  • Javaかーって思って帰ってしまった。聞けばよかった。超興味ある~
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript時代のJava #kansumiB7 #kansumi Presentation Transcript

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