JavaScript時代のJava #kansumiB7 #kansumi

Summit
Developers
Developers Summit 2013 Kansai Action !
JavaScript時代のJava
山本裕介
株式会社サムライズム
#kansumiB7
B7
∼Java x Webを取り巻く熱いムード∼
Tuesday, September 24, 13

@yusuke

#kansumiB7

JavaScript時代のJava
• フロントエンドアーキテクチャ変遷
• サーバサイドアーキテクチャ変遷
• なんでJava?

フロントエンドアーキテクチャ変遷

古典的Web

古典的Web
リクエスト(index.html)
レスポンス
リクエスト(about.html)
レスポンス

古典的Web
• 利点
• シンプルな仕組み

古典的Web
• 利点
• シンプルな仕組み
• 難点
• コンテンツを全部毎回取得
(更新チェックのみの場合も)

21世紀的Web

21世紀的Web
• ダイナミックHTML
• JavaScriptで動的にコンテントを書き換え
• フォームのリアルタイムバリデーションなど

AJAX

AJAX
リクエスト
レスポンス HTML
リクエスト
レスポンス XML / JSON

AJAX
• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速

AJAX
• 利点
• 動的なWebサイト
• 更新箇所のみサーバより取得: 高速
• 難点
• URLが変わらない: ブックマーク不可
• 戻るボタン不可

HashBang
• 利点
• ブックマーク可

HashBang
リクエスト /#!yusuke
レスポンス HTML
リクエスト #!yusuke
レスポンス XML / JSON

HashBang
• 利点
• 難点
• 初期ロードが遅い
• (アンカー部分はサーバに伝わらない)
• 美しくないURL

モダンなアーキテクチャ

pushState

何が起きているか

GitHubのアーキテクチャ
• onclickをフック
• onclickイベントでpushState
• URL書き換え
• 画面更新

HTML5のpushState
• history.pushState(状態,タイトル,URL)
• 状態を保存、URL書き換えも可能
• popState
• windowオブジェクトのイベント
• 戻るボタンを押した際に発生、状態復帰

旧来Web AJAX HashBang pushState
初期ロード
パフォーマンス ○ ○ △ ○
更新
パフォーマンス △ ○ ○ ○
ブックマーク
○ × ○ ○
戻る
○ × × ○

pushState
• 利点
• 戻る/進む可
• 難点
• ない

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+

サーバサイドアーキテクチャ変遷

サーバサイドアーキテクチャ変遷
• 全て静的
• cgi :プロセス起動、動的コンテンツが可能に
• fast-cgi : プロセス常駐
• JServ / J2EE / JavaEE : APサーバ
• (mod_) Ruby / Python / PHP : プロセッサ内蔵

モダンアーキテクチャ
Webサーバ APサーバ DBサーバ

オシャレなWebアーキテクチャ
• 一部動的HTML、AJAX
• RDBMS
• 動的言語
ボトルネックはDBにある
言語はパフォーマンスよりも
気持ちよさ！！

• NoSQL、検索エンジン
• 動的言語
さらに

• 動的言語
さらに
ボトルネックになるのでは？

• 静的言語
さらにさらに
JITコンパイル、ネイティブ並

• AJAX / pushState
• 静的言語
さらにさらにさらに

pushStateを使う際の課題
• レンダリング担当
• クライアント

• サーバ

• サーバ
テンプレートエンジンが肝

Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates

Javaのテンプレートエンジン
• Velocity
• FreeMarker
• JSP
• JSF
• Scala Templates
デザイナフレンドリ？

ベストなテンプレートエンジン
• Webデザイナフレンドリ
• 用意な文法
• サーバレスでレンダリング結果確認可能

テンプレートエンジン
• Web画面以外にも必要
• メール文面
• 帳票出力

HTML5時代の
テンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる

HTML5時代の
テンプレートエンジンの要件
• サーバ・クライアント両方でレンダリング
• テンプレートを使い回せる
JavaScriptベース

mustacheという選択
http://mustache.github.io/

mustacheの良いところ
• 多目的: Web、メール等々
• 場所を問わない
• サーバサイド: Java / Ruby / Node..
• クライアント: JavaScript

mustacheの良いところ
• エディタ、IDEサポート
• Vim
• Emacs
• Sublime Text
• IntelliJ IDEA

mustache Javaコード例
MustacheFactory mf = new
DefaultMustacheFactory();
Mustache mustache =
mf.compile("template.mustache");
mustache.execute(writer, context)
.flush();

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);

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

その他のJavaScriptテンプレートエンジン
• Handlebars.js (Mustache + ロジック)

• Hogan.js (Mustacheコンパイラ)
http://twitter.github.io/hogan.js/

• AngularJS(フルスタック？JSフレームワーク)
http://angularjs.org

JavaでJavaScriptを動かす
• Javaに付属のJavaScriptエンジン
• Rhino: Java 6∼7
• Nashorn: Java 8∼

Java(JVM)+AngularJSの例
https://github.com/hhariri/wasabi

まとめ

pushStateかっこいい

Javaださくない

JavaScript時代のJava #kansumiB7 #kansumi

More Related Content

What's hot

Viewers also liked

Similar to JavaScript時代のJava #kansumiB7 #kansumi

More from Yusuke Yamamoto

JavaScript時代のJava #kansumiB7 #kansumi