gwt♥html5

GWT ♥ HTML5@tan_go238

Friday, September 17, 2010

Agenda

・GWTって何？

・GWTを使うメリット

・GWTの最適化処理

・GWTを始めよう

・GWTとHTML5


GWT?

Google Web Toolkit

Java で書かれたソースコードからコンパイルして

Ajax アプリケーションを生成します

JavaCompile

JavaScript


Agenda

・GWTって何？




・GWTとHTML5


・ブラウザ固有の動作への対応を書かずにすむ

・速度やファイルサイズを減らす処理を最適化

GWTを使うメリット

特にスピードに関してはスゴいこだわりがあるex) ImageResource, Inliner


・ブラウザ固有の動作への対応を書かずにすむ

GWTを使うメリット


Agenda

・GWTって何？




・GWTとHTML5


・Deferred Binding

・Code Splitting

・Perfect Caching

GWTの最適化処理


Deferred Binding


“Deferred Binding is Google Web Toolkit's answer to Java reflection.”

Deferred Binding

http://code.google.com/webtoolkit/doc/1.6/FAQ_Client.html#What_is_Deferred_Binding?




Deferred Binding

Single JavaCode Base

http://www.youtube.com/watch?v=nvti32k4xyU

Your Code

FireFox 1.0.x

en_US

Your Code

IE6

en_UK

Your Code

Safari 2.0.x

fr_FR

Your Code

Opera 9

fr_CA

Download exactly what you need in a single, optimized,

can’t-go-wrong chunk

Then cache it on the clientuntil the sun explodes

1D04ADDA.cache.html 15F361B8.cache.html

7EFE4D24.cache.html D415D917.cache.html




Deferred Binding

<module>  <replace-with class="com.google.gwt.user.client.ui.impl.PopupImpl"> <when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl"/> </replace-with>

 <replace-with class="com.google.gwt.user.client.ui.impl.PopupImplMozilla"> <when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl" /> <any> <when-property-is name="user.agent" value="gecko"/> <when-property-is name="user.agent" value="gecko1_8" /> </any> </replace-with>

 <replace-with class="com.google.gwt.user.client.ui.impl.PopupImplIE6"> <when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl"/> <when-property-is name="user.agent" value="ie6" /> </replace-with></module>

private static final PopupImpl impl = GWT.create(PopupImpl.class);

Code Splitting


Code Splitting

最初のロード時にはダウンロードしないが

実行されたときに初めてダウンロード・実行する

Button b = new Button("Click me", new ClickHandler() { public void onClick(ClickEvent event) { GWT.runAsync(new RunAsyncCallback() { public void onFailure(Throwable caught) { Window.alert("Code download failed"); } public void onSuccess() { Window.alert("Hello, AJAX"); } }); } });


How GWT Loads Code

Browser Server

Host Page (Module.html)

Selection Script(module.nocache.html)

Permutation Script(Strongly-named.cache.html)

onload

Module starts running

runAsync Fragments

Code Splitting


Code Splitting


Perfect Caching


・ファイルがキャッシュされているかどうか　気にしなくてもよい

Perfect Caching

・Bootstrapスクリプトは <app_name>.nocache.js として生成（キャッシュしない、ファイルサイズは小さい）

・それ以外のファイルは <md5>.cache.html として生成　（ファイルサイズは大きいがキャッシュされる）　※コードに変更があればmd5の値が変わるので再度キャッシュされる


Agenda

・GWTって何？




・GWTとHTML5


必要なモノ

・Eclipse

・Goole Plugin for Eclipse

・GWT SDK

http://code.google.com/webtoolkit/usingeclipse.html




プロジェクトの作成1. File→New→Web Application Project を選択2. Project name を gwtdemo とする3. Use Google Web Toolkit と　Use Google App Engine の両方に　チェックを入れて Finish をクリック

※Google App Engineは必須では無いが簡単に試すには　ちょうどいいので今回使用した


プロジェクトの実行

1. 生成されたプロジェクトを右クリック Run As → Web Application

2. 表示されたURL（http://127.0.0.1:8888/Gwtdemo.html?gwt.codesvr=127.0.0.1:9997）

　をブラウザで確認する　※開発モードの場合はブラウザにプラグインのインストールが必要


http://127.0.0.1:8888/Gwtdemo.html?gwt.codesvr=127.0.0.1:9997

http://127.0.0.1:8888/Gwtdemo.html?gwt.codesvr=127.0.0.1:9997

コンパイルの実行

1. ツールバーから　　　　　　をクリックする

2. プロジェクトとEntry Point を指定して Compile を実行


Agenda

・GWTって何？




・GWTとHTML5


GWT+HTML5

HTML5とは何か？

・Audio and Video elements

・Canvas

・WebGL

・WebSockets

・CSS3

・Local Storage


GWT+HTML5

GWT support for HTML5

・Javaのラッパークラスを書くのはとても簡単

・既にたくさんのオープンソースプロジェクトがある

・それらは将来GWTに取り込まれる予定(～2.2)

・GWTのコアにはまだ取り込まれていない

　　→ クロスブラウザ対策

　　→ HTML5の機能を全てのブラウザが実装していない


GWT+HTML5

GWT support for HTML5

本格的なゲームをGWTで書くとどうなるのか？


GWT+HTML5Jake2とは

Quake2というゲームエンジンのJava版

レンダリングにはLWJGL(Light Weight Java OpenGL)

を使用している


GWT+HTML5

Demo

Quake II in the Browser


GWT+HTML5

問題点

Quake II in the Browser

詳しくは http://code.google.com/events/io/2010/sessions/gwt-html5.html を参照


http://code.google.com/events/io/2010/sessions/gwt-html5.html


GWT+HTML5

Problems porting Jake2 to GWT

・LWJGLをWebGLに変換しないといけない

　→ LWJGLはOpenGL 1.x を元に作られていてデータ通信に

　　 Java nio buffersを使用する

　→ WebGLは OpenGL ES 2.0ベースでデータ通信に

　　 WebGL arrays, buffersを使用する


GWT+HTML5


LWJGLをWebGLへのポーティング

・ OpenGL 1.xのエミュレートすることは可能

・しかし、WebGLのDOMベースの画像ローディングは使用できない

・ピクセルレベルの画像の扱いはJavaScriptでは非力


GWT+HTML5






GWT+HTML5


　その他の問題

・No file system in the browser

　

・XHRs are asynchronous & No UDP support

　

　


GWT+HTML5


その他の問題


　→ シンプルなファイルシステムをLocal Storageを使って実装


　

　


GWT+HTML5


その他の問題


　→ シンプルなファイルシステムをLocal Storageを使って実装


　→ UDPの代わりに WebSocket を使用

　→ リソースを非同期に取得（ローディング中はフレームをスキップするようにする）


GWT+HTML5


他にも問題は山積み...

Mesh animation:　Quake II animations based on keyframes　Point-cloud linear interpolation: terrible in Javascript 　Move this to the vertex shader

GWT compiler optimizations:　Initializing small arrays is too complex　Lazy static initializers hit too oftenBrowser improvements:

　Parsing binary data is incredibly slow in Javascript 　Make WebGL TypedArrays general mechanism for operating on binary data Spec and 　　　FPS depending on window size hints at potential frame buffer handling improvements

LocalStore is synchronous but has limited capacity


GWT+HTML5

Wrapping Up

・HTML5で”native”なアプリを作れる日は遠くない

・将来的にGWTはHTML5関連のAPIをCoreに入れるはず

・それを使うとブラウザ互換とか気にせずガンガン

　HTML5なアプリが作れる！

・更に最適化の処理もコンパイル時に自動的にしてくれる！


Links

Google Web Toolkit

http://code.google.com/webtoolkit/overview.html

http://code.google.com/events/io/2010/sessions.html#GWT

Google I/O 2010 Sessions






ご清聴ありがとうございました


gwt♥html5

Technology