勉強会資料 Google Developer Group 京都 2 0

(1)

Google Web Toolkit 2.0

Kyoto GTUG

http://kyoto-gtug.org/

Daisuke Yamashita

[email protected]

(2)

Google Web Toolkit ^？

• Google Web Toolkit (GWT)

Ajax ^ン Java ^コ ^ン

開発

• ^間 ^非互換性 ^埋 ^JavaScript

び XMLHttpRequest ^専門家 ^い ^開発

難い高性能ン

生産的開発可能こ目標開発

(3)

Google Web Toolkit ^？

• ^GWT ^ンソ ^完全 ^無料

利用こ世界中何千

開発者利用い

(4)

GWT ^こ ^使わ ^い ^？

• ^新 ^い ^ン ^AdWords ^や Google Wave

い数多 _Google 製品 _GWT 開

発い

(5)

GWT ^仕組

• GWT ^Java ^書い ^JavaScript

コン

• ^コン ^JavaScript ^コ

最適動作う出力

Android ^や iPhone ^最適

動作

(6)

Google Developer Day 2008 ^資料

(7)

最適意味

• ^作業 ^実現 ^方法 ^複数あ ^場合 ^各

最速動作 _{API Google} 調

査

• ^最速

動作う _API 選択

(8)

GWT ^開発

(9)

GWT ^開発

実行最適化

コン

(10)

GWT ^開発

• GWT SDK Java API Widget

供

– ^こ ^Widget ^組 ^合わ ^画面 ^構築

(11)

GWT ^開発

• DOM ^操作や XMLHttpRequest ^コ

ン直接コン高い

抽象化い生産性非常

高い

(12)

GWT ^開発

• ^Widget ^組 ^込 ^以外 ^使うこ

現多数 _Widget

立い

(13)

GWT

• GWT developer plugin ^使うこ ^好 ^IDE

Ajax ^ン

• GWT developer plugin JavaScript Java

コ間いい _Java

事前コン必要あ

• ^こ ^従来 ^う ^JavaScript ^直接 ^編

集う扱え

(14)

GWT ^最適化

• GWT ^最適化 ^０ ^ワ

含い

• GWT^コン

– ^要 ^コ ^除去

– ^コ ^分割

• ^／ ^ソ ^コ ^複数 ^JavaScript ^分割 ^表示 ^高速化

• Speed Tracer

– Chrome Extension

– ^ネ ^JavaScript ^限 ^処

理や_CSS ばば奇妙動 Speed Tracer

ネい処理見役立

(15)

実行

• GWT ^Java ^ソ ^コ ^コン

最適動作う

JavaScript ^生成

• ^Android ^や ^iPhone ^最適化

(16)

SDK ^入手

• SDK ^以 ^入手可能

– http://goo.gl/e2j0

(17)

What’s Ne i 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…

(18)

• Draft Compile

• Layout Panels

• Bug Fixes…

(19)

Development Mode

• GWT ^最 ^大 ^変更 ^／ Development Mode 追加

– ^こ Hosted Mode ^呼ば ^い ^拡張

• 2.0^以前 ^GWT ^ン

Hosted Mode ”hosted bro ser” ^呼ば

専用供い

• GWT2.0 ”Google Web Toolkit De eloper Plugin”

い一般的利用事

– ^こ Safari, Firefox, Internet Explorer,

Chrome ^好 ^利用 ^事

(20)

Development Mode

• ^こ ^意味 ^所 ^ン

ソコ存必要い！

いう事

– Linux ^開発 ^い ^開発者

ン Internet Explorer ^時 Linux

開発続別 _Windows ン

事

– http://goo.gl/QV26

(21)

Development Mode

• ^こ ^意味 ^所 Firebugs(Firefox) ^や

Inspector(Safari) ^い ^各 ^実装

い素晴い利用事

いう事

(22)

Development Mode

• ^！ Development Mode

ンい

– ^／ ^ン ^複数

接続事

(23)

Development Mode

• ^新 ^い Google Plugin for Eclipse

ン

– Development Mode ^起動 ^制御

– ^表示

• ^手動 Development Mode ^起動

こ可能

– Eclipse^以外 ^IDE ^利用 ^場合 ^こ

Swing ^使い

(24)

• Draft Compile

• Layout Panels

• Bug Fixes…

(25)

Speed Tracer Performance Analysis

• Speed Tracer ^ン

ン問題特定修正助

新い

• ^ン ^走 ^情報

取得用接続ン情報取得視覚

的統計情報表示

• Speed Tracer ^使用 ^あ

ン部分時間い視

覚的確認事

(26)

Speed Tracer Performance Analysis

• Speed Tracer ^以 ^う ^項目 ^い ^分析

– JavaScript^構文解析 ^実行

– ^画

– CSS ^再計算 ^ン

– DOM ^ン ^ン ^ン

– ^ネ ^ワ ^ソ ^読 ^込

– Timer

– XMLHttpRequest^コ – a d ore…

• Speed Tracer ^い http://goo.gl/F8MZ

(27)

• Draft Compile

• Layout Panels

• Bug Fixes…

(28)

Developer Guided Code Splitting

• GWT2.0 ^高速化 ^分割 ^ン ^指

定う

• ^あ ^動画 ^見 ^最後 ^ン

待事想像い耐え

い最近 _Ajax

言えいう？

• ^コ ^分割 ^最初 ^実行 ^必要 ^最 ^コ

片ン残必要応

ン

(29)

• ^えば ^ン ^作成 ^い

想像い

• ^あ ^ン ^読 ^書

機能以外情報設定やコ

ン管理機能あ

う

• ^コ ^分割 ^使う ^ン ^コ ^機能

ンうン

こ速書始

こ

(30)

• ^必要 ^{追加機能部}

分コン

• ^こ ^実装 ^非常 ^複雑

GWT ^コ ^分割 ^使う ^簡単 ^実装

(31)

• ^コ ^分割 ^実装 ^分割 ^ン ^作成 ^魔法

ソ GWT.runAsync() ^利用 ^！

• ^こ ^簡単 ^安全 ^コ ^分割

• GWT^コン ^自動的 ^残 ^コ ^必要 ^応

ンうコ出

• GWT^コン ^手動 ^難 ^い ^依存関係 ^自動

的解消う必要コ片ン

コ出

• ^開発 ^：http://goo.gl/T6yh

(32)

• Draft Compile

• Layout Panels

• Bug Fixes…

(33)

Compiler Optimizations

• ^コ ^分割 ^加え ^こ ^JavaScript ^生成

能力根本的改良加え

• ^最新 ^GWT^コン ^コン ^後

JavaScript ^速 ^う ^従来

強力最適化ンン搭載

• ^古い^GWT ^簡単 ^GWT2.0

へ移行既存 _GWT

再コン実行速度

(34)

Compiler Optimizations

• GWT2.0 ^い ^ン ^あ ^最適

化含い

• ^コン ^JavaScript ^コ

3% 20% ^縮 ^事 ^報告 ^い

(35)

• Draft Compile

• Layout Panels

• Bug Fixes…

(36)

Draft Compile

• ^開発時 ^う ^JavaScript ^コン

必要あ -draftCompile

ン利用う

• ^い ^最適化 ^こ ^高速

コン

– Development Mode ^入

必要性い思い

(37)

• Draft Compile

• Layout Panels

• Bug Fixes…

(38)

Declarative User Interfaces

• GWT UiBinder ^使用 ^こ ^ン

現構築代

わ _XML 構築う

• XML ^以 ^う ^機能

UI^コ ^作 ^読 ^や ^ン ^簡

単何高速開発

– CSS ^衝突 ^心配 ^必要 ^あ

– ^速 ^効率的 ^ン

HTML GWT ^混 ^い

– ^好都合 ^こ ^ソ ^国際化 ^一元管理

う

(39)

• UiBinder ^UI ^共

作業ばい方法え

• XML,HTML,CSS ^使え ^こ ^UI

Java ^悩 ^必要 ^あ

• ^例えば ^作

成 _HTML コ＆

(40)

• ^GWT ^開発者 ^何人

UI ^ン ^実験 ^直接

UiBinder XML ^ン ^編集

Development Mode ^速い ^編集 /

繰返行い見

• HTML ^ン ^ン

使用方楽い

(41)

• ^UiBinder ^コン ^時 .ui.xml .java^間

全参照 _ID _typo う

微妙防助

• ^最新 Google Plugin for Eclipse UiBinder ^便

利利用うコ補完

赤い線問題指摘

ン機能供

• UiBinder ^利用 ^：http://goo.gl/I2dn

• ^開発者 ^： http://goo.gl/aVBY

(42)

• Draft Compile

• Layout Panels

• Bug Fixes…

(43)

Layout Panels

• UI ^い ^正確 ^見 ^目 ^{HTML CSS} ^定

義非常難い

• GWT2.0 ^以前 ^GWT ^標準

え問題頭痛種

• ^GWT2.0 ^実際 ^あ

欲い確実作成可

能

(44)

Layout Panels

• ^ネ ^標準 ^CSS ^予測

constraint ^作成

• CSS ^ン ^ン

ンン中いネ扱わ

JavaScript ^実行 ^必要 ^あ

• ^結果 ^速 ^流動的

ン速気

(45)

Layout Panels

• ^ネ ^UiBinder ^う ^連動

• ^数行 ^XML ^本当 ^洗練

作成

(46)

• Draft Compile

• Layout Panels

• Bug Fixes…

(47)

Bundled Resources via ClientBundle

• GWT ^複数 ^画像 ^ン

分割表示 ImageBundle ^いう仕組

1.4 ^搭載

• ^こ ^／ ^い沢山 ^画像

あ場合通信ン

回避

用意

(48)

Bundled Resources via ClientBundle

• 2.0 ^搭載 ClientBundle ^こ

CSS XML ^拡張

• ^開発 - ClientBundle http://goo.gl/HJpf

(49)

• Draft Compile

• Layout Panels

• Bug Fixes…

(50)

HtmlUnit for Testing

• 2.0 GWTTestCase ^使用

代わ _HtmlUnit 使用

• HtmlUnit Java ^実装 ^い

関わネコあ

完全 _Java 駆動開発

行う事

• ^開発 - HtmlUnit http://goo.gl/SuaF

• ^開発 – Testing with Junit http://goo.gl/6HNf

(51)

• Draft Compile

• Layout Panels

• Bug Fixes…

(52)

Bug Fixes

• GWT 2.0 includes lots of bugfixes (as well as little enhancements that didn't make it into the "New Features" section), including

– Issue 427: TextArea#getSelectedText() returns the wrong value in Internet Explorer – Issue 633: Added File#setEnabled to enable or disable FileUpload widgets

– Issue 1574: Added Cookies#remoteCookie to programmatically remove cookies – Issue 1585: Clicking on a Button in a Form no longer submits the forms automatically – Issue 1633: Loading malformed cookies no longer result an an exception

– Issue 1771: Added RpcRequestBuilder to encapsulate logic needed to build and an RPC request – Issue 3102: HandlerManager#removeHandelr has be de-deprecated by popular request

– Issue 3404: Added support for Class#getSimpleName()

– Issue 3892: Multiple GWT applications on the same page can now preview events

– Issue 3903: Host HTML pages no contain a noscript tag to warn users if JavaScript is disabled – Issue 3936: Empty switch statement no longer causes compilation error

• RichTextArea has also been enhanced:

– Issue 1211: Support for undo/redo in RichTextArea

– Issue 1433: Support for inserting arbitrary HTML into a RichTextArea – Issue 1441: No cursor in RichTextArea until users start typing (Firefox) – Issue 2185: Support for JustifyFull in RichTextArea

– Issue 3176: Ensure that design mode is properly set in Firefox – Issue 3503: Consistent focus behavior across browsers

• These are but a few. For more details, see the full list of issues addressed in 2.0 in the GWT issue tracker.

勉強会 資料 Google Developer Group 京都 2 0

Google Web Toolkit 2.0

Kyoto GTUG

Daisuke Yamashita

• Google Web Toolkit (GWT)

Ajax ン Java コ ン

開発

• 間 非互換性 埋 JavaScript

び XMLHttpRequest 専門家 い 開発

難 い高性能 ン

生産的 開発 可能 こ 目標 開発

• GWT ンソ 完全 無料

利用 こ 世界中 何千

開発者 利用 い

• 新 い ン AdWords や Google Wave

い 数多 Google 製品 GWT 開

発 い

• GWT Java 書い JavaScript

コン

• コン JavaScript コ

最適 動作 う 出力

Android や iPhone 最適

動作

• 作業 実現 方法 複数あ 場合 各

最速 動作 API Google 調

査

• 最速

動作 う API 選択

GWT 開発

• GWT SDK Java API Widget

供

• DOM 操作や XMLHttpRequest コ

ン 直接コ ン 高い

抽象化 い 生産性 非常

高い

• Widget 組 込 以外 使うこ

現 多数 Widget

立 い

• GWT developer plugin 使うこ 好 IDE

Ajax ン

• GWT developer plugin JavaScript Java

コ 間 い い Java

事前 コン 必要 あ

• こ 従来 う JavaScript 直接 編

集 う 扱え

• GWT Java ソ コ コン

最適 動作 う

JavaScript 生成

• Android や iPhone 最適化

• SDK 以 入手可能

• こ 意味 所 ン

ソ コ 存 必要 い！

いう事

• こ 意味 所 Firebugs(Firefox) や

Inspector(Safari) い 各 実装

い 素晴 い 利用 事

いう事

• ！ Development Mode

ン い

• 新 い Google Plugin for Eclipse

ン

• 手動 Development Mode 起動

こ 可能

• 必要 追加機能部

分 コ ン

• こ 実装 非常 複雑

GWT コ 分割 使う 簡単 実装

• GWT2.0 い ン あ 最適

化 含 い

• コン JavaScript コ

3% 20% 縮 事 報告 い

• 開発時 う JavaScript コン

必要 あ -draftCompile

ン 利用 う

• い 最適化 こ 高速

コン

• UiBinder UI 共

作業 ば い方法 え

• XML,HTML,CSS 使え こ UI

Java 悩 必要 あ

勉強会資料 Google Developer Group 京都 2 0

Ajax ^ン Java ^コ ^ン

• ^間 ^非互換性 ^埋 ^JavaScript

び XMLHttpRequest ^専門家 ^い ^開発

難い高性能ン

生産的開発可能こ目標開発

• ^GWT ^ンソ ^完全 ^無料

利用こ世界中何千

開発者利用い

• ^新 ^い ^ン ^AdWords ^や Google Wave

い数多 _Google 製品 _GWT 開

発い

• GWT ^Java ^書い ^JavaScript

• ^コン ^JavaScript ^コ

最適動作う出力

Android ^や iPhone ^最適

• ^作業 ^実現 ^方法 ^複数あ ^場合 ^各

最速動作 _{API Google} 調

• ^最速

動作う _API 選択

GWT ^開発

• DOM ^操作や XMLHttpRequest ^コ

ン直接コン高い

抽象化い生産性非常

• ^Widget ^組 ^込 ^以外 ^使うこ

現多数 _Widget

立い

• GWT developer plugin ^使うこ ^好 ^IDE

Ajax ^ン

コ間いい _Java

事前コン必要あ

• ^こ ^従来 ^う ^JavaScript ^直接 ^編

集う扱え

• GWT ^Java ^ソ ^コ ^コン

最適動作う

JavaScript ^生成

• ^Android ^や ^iPhone ^最適化

• SDK ^以 ^入手可能

• ^こ ^意味 ^所 ^ン

ソコ存必要い！

• ^こ ^意味 ^所 Firebugs(Firefox) ^や

Inspector(Safari) ^い ^各 ^実装

い素晴い利用事

• ^！ Development Mode

ンい

• ^新 ^い Google Plugin for Eclipse

• ^手動 Development Mode ^起動

こ可能

• ^必要 ^{追加機能部}

分コン

• ^こ ^実装 ^非常 ^複雑

GWT ^コ ^分割 ^使う ^簡単 ^実装

• GWT2.0 ^い ^ン ^あ ^最適

化含い

• ^コン ^JavaScript ^コ

3% 20% ^縮 ^事 ^報告 ^い

• ^開発時 ^う ^JavaScript ^コン

必要あ -draftCompile

ン利用う

• ^い ^最適化 ^こ ^高速

• UiBinder ^UI ^共

作業ばい方法え

• XML,HTML,CSS ^使え ^こ ^UI

Java ^悩 ^必要 ^あ

• ^例えば ^作

成 _HTML コ＆

• ^GWT ^開発者 ^何人

UI ^ン ^実験 ^直接

UiBinder XML ^ン ^編集

Development Mode ^速い ^編集 /

繰返行い見

• HTML ^ン ^ン

使用方楽い

• UI ^い ^正確 ^見 ^目 ^{HTML CSS} ^定

義非常難い

• GWT2.0 ^以前 ^GWT ^標準

え問題頭痛種

• ^GWT2.0 ^実際 ^あ

欲い確実作成可

• ^ネ ^UiBinder ^う ^連動