JavaScript時代のJava #kansumiB7 #kansumi

SummitDevelopers 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


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/


http://mustache.github.io/mustache.5.html

http://mustache.github.io/mustache.5.html

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


http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js






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


https://github.com/julienba/play2-mustache

https://github.com/julienba/play2-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/wasabiTuesday, September 24, 13

https://github.com/hhariri/wasabi

https://github.com/hhariri/wasabi

まとめ


pushStateかっこいい


Javaださくない


Technology

JavaScript時代のJava #kansumiB7 #kansumi