Upload
yusuke-yamamoto
View
10.530
Download
4
Embed Size (px)
DESCRIPTION
Javaださくない!
Citation preview
SummitDevelopers Developers Summit 2013 Kansai Action !
JavaScript時代のJava
山本 裕介株式会社サムライズム#kansumiB7
B7
~Java x Webを取り巻く熱いムード~
Tuesday, September 24, 13
@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オブジェクトのイベント
• 戻るボタンを押した際に発生、状態復帰
Tuesday, September 24, 13
旧来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+ / Chrome 27+
Safari 5.1+ / Opera 15+ / IOS Safari 5.0+
Android Browser 2.2, 2.3, 4.2+
Tuesday, September 24, 13
サーバサイドアーキテクチャ変遷
Tuesday, September 24, 13
サーバサイドアーキテクチャ変遷
• 全て静的
• cgi :プロセス起動、動的コンテンツが可能に
• fast-cgi : プロセス常駐
• JServ / J2EE / JavaEE : APサーバ
• (mod_) Ruby / Python / PHP : プロセッサ内蔵
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サーバ 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.execute(writer, context) .flush();
Tuesday, September 24, 13
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
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
その他の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/wasabiTuesday, September 24, 13
まとめ
Tuesday, September 24, 13
pushStateかっこいい
Tuesday, September 24, 13
Javaださくない
Tuesday, September 24, 13