Google Web Toolkit 2.0

Google Web Toolkit 2.0

Kyoto GTUG http://kyoto-gtug.org/

Daisuke Yamashita [email protected]

Google Web Toolkit とは？

• Google Web Toolkit (GWT) は、ブラウザベースのAjaxアプリケーションをJavaでコーディングできる開発ツールです。

• ブラウザ間の非互換性を埋め、JavaScriptおよびXMLHttpRequestの専門家でないと開発

が難しい高性能なウェブアプリケーションの生産的な開発を可能にすることを目標に開発されました。

Google Web Toolkit とは？

• また、GWTはオープンソースで、完全に無料

で利用することができ、すでに世界中の何千もの開発者によって利用されています。

GWTはどこで使われているの？

• 新しいバージョンのAdWordsやGoogle Waveといった数多くのGoogle製品がGWTによって開発されています。

GWTの仕組み

• GWTは、Javaで書いたプログラムをJavaScriptにコンパイルします。

• コンパイルされたJavaScriptのコードは、さまざ

まなブラウザで最適に動作するように出力されます。もちろん、AndroidやiPhoneでも最適に動作します。

Google Developer Day 2008の資料

最適の意味は・・・

• 同じ作業を実現する方法が複数ある場合、各ブラウザで最速に動作するAPIをGoogleが調査しました。

• そのページにアクセスしたブラウザで最速に動作するようにAPIが選択されます。

GWTによる開発

GWTによる開発

実行

最適化

デバッグ

コーディング

GWTによる開発

• GWT SDKではJava APIとWidgetのセットが提供されます。

– このWidgetを組み合わせて画面を構築します。

GWTによる開発

• DOM操作やXMLHttpRequestコミュニケーショ

ンを直接コーディングするよりも、高いレベルの抽象化になっているために、生産性が非常に高いです。

GWTによる開発

• また、Widgetは組み込みのもの以外も使うことができ、現在では多数のWidgetプロジェクトが立ち上がっています。

GWTによるデバッグ

• GWT developer pluginを使うことで、好きなIDEでAjaxアプリケーションをデバッグできます。

• GWT developer pluginは、JavaScriptとJavaバイトコードとの間をつないでいるので、Javaのプログラムを事前にコンパイルする必要はありません。

• これは、従来のようにJavaScriptを直接、「編集ーリロード」するのと同じように扱えます。

GWTによる最適化

• GWTには、ウェブアプリを最適化するための２つのパワフルなツールが含まれています。

• GWTコンパイラ – 不要なコードの除去 – コードの分割

• １つのソースコードを複数のJavaScriptに分割し、ページの表示を高速化する

• Speed Tracer – Chrome Extension – ボトルネックはJavaScriptに限りません。ブラウザのレイアウト処理やCSSはしばしば奇妙な動きをします。Speed Tracerはボトルネックとなっている処理を見つけるのに役立ちます。

実行

• GWTは、Javaのソースコードをコンパイルし、

さまざまなブラウザで最適に動作するような、JavaScriptファイルを生成します。

• もちろん、AndroidやiPhone向けにも最適化されます。

SDKの入手

• SDKは以下から入手可能です。

– http://goo.gl/e2j0

http://goo.gl/e2j0

http://goo.gl/e2j0

What’s New in GWT 2.0?

• Development Mode

• Speed Tracer Performance Analysis

• Developer Guided Code Splitting

• Compiler Optimizations

• Draft Compile

• Declarative User Interfaces

• Layout Panels

• Bundled Resources via ClientBundle

• HtmlUnit for Testing

• Bug Fixes…

Development Mode

• GWTの最も大きな変更の１つはDevelopment Modeの追加です。 – これは、かつてHosted Modeと呼ばれていたものの拡張です。

• 2.0以前のGWTでは、アプリケーションをデバッグするためのHosted Modeは、”hosted browser”と呼ばれる専用のブラウザが提供されていました。

• GWT2.0では、”Google Web Toolkit Developer Plugin”がサポートしている一般的なブラウザを利用する事ができます。 – これからのデバッグでは、Safari, Firefox, Internet Explorer,

Chromeなど好きなブラウザを利用する事ができます。

Development Mode

• これの意味する所は、ブラウザと同じマシン上にソースコードが存在する必要がない！という事です。

– Linux上で開発をしている開発者は、アプリケーションをInternet Explorerでテストする時でもLinux上で開発を続け、別のWindowsマシンでテストをする事ができます。

– http://goo.gl/QV26

http://goo.gl/QV26

Development Mode

• これの意味する所は、 Firebugs(Firefox)やInspector(Safari)といった各ブラウザに実装さ

れている素晴らしいツールを利用する事ができるという事です。

Development Mode

• さらに！Development Modeでは、マルチブラウザ・デバッギングをサポートしています。

– １つのデバッグセッションに複数のブラウザから接続する事ができます。

Development Mode

• 新しいGoogle Plugin for Eclipseはストリームラインをサポートしました。

– Development Modeの起動・制御

–ログの表示

• また、手動でDevelopment Modeを起動することも可能です。

– Eclipse以外のIDEを利用する場合には、このSwingベースのユーティリティを使います。