javascript時代のjava #kansumib7 #kansumi

SummitDevelopers Developers Summit 2013 Kansai Action !

JavaScript時代のJava

山本裕介株式会社サムライズム#kansumiB7

～Java x Webを取り巻く熱いムード～

Tuesday, September 24, 13

@yusuke

#kansumiB7

JavaScript時代のJava• フロントエンドアーキテクチャ変遷

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

• なんでJava?

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

古典的Web

リクエスト(index.html)

レスポンス

リクエスト(about.html)

レスポンス

古典的Web• 利点

• シンプルな仕組み

古典的Web• 利点

• シンプルな仕組み

• 難点

• コンテンツを全部毎回取得

(更新チェックのみの場合も)

21世紀的Web

21世紀的Web• ダイナミックHTML

• JavaScriptで動的にコンテントを書き換え

• フォームのリアルタイムバリデーションなど

リクエスト

レスポンス 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コード例

var html = Mustache.to_html(template,json);$('#result').html(html);

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

その他の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

まとめ

pushStateかっこいい

Javaださくない

javascript時代のjava #kansumib7 #kansumi

Technology

ipv6時代のwebアプリケーション&プラットフォーム...

旧石器時代・縄文時代・弥生時代...中学歴史プリント...

初期歴史時代／鉄器時代における北インドの都市...

jaman heian 平安時代　 (794-1185)

啟示錄 -...

http2 時代の web - web over http2

windows8/8.1時代のwin32プログラミング #sapporocpp

第二課革命的時代

iot 時代の楽しみ方

lightning experience 時代のフロー開発

code2013...

室町時代　（ 1333-1573 ）

サービスデザインの時代_ fits2015

クラウド時代のエンタープライズdevops2015.agilejapan.jp/image/b-3_devops_agilejapan.pdf ·...

クラウド時代をリードする...

microsoft azureによる、...

ずっと昔から続いてきた石にまつわる物語 -...

掌握web2.0時代流通業時代流通業 ... -...

デザインの時代 fab 横

ビッグデータ時代のテキストマイニング...