Google Web Toolkit(GWT)入門
-
Upload
yuki-naotori -
Category
Technology
-
view
3.228 -
download
1
description
Transcript of Google Web Toolkit(GWT)入門
![Page 1: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/1.jpg)
Google Web Toolkit (GWT)入門
2009/01/21 (株)豆蔵 江川 崇
Ext JS/Ext GWT勉強会
![Page 2: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/2.jpg)
自己紹介(表)
所属 株式会社 豆蔵仕事 業務系システムの要求分析 設計、実装の支援 ・Spring, Hibernate 非機能要件定義
名前 江川 崇(EGAWA Takashi)
![Page 3: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/3.jpg)
自己紹介(裏)所属 日本Androidの会 幹事 Android SDK ワーキンググループ リーダー
![Page 4: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/4.jpg)
GWTとは
Javaを使って簡単にAjaxアプリを作ることができる
ツール
以上
![Page 5: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/5.jpg)
お品書き GWT登場の背景
GWTの適用領域
GWTのウリ・構成要素
GWTでうれしくなること
![Page 6: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/6.jpg)
GWT登場の背景
![Page 7: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/7.jpg)
変遷
C/Sシステム
Webシステム
Ajax
![Page 8: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/8.jpg)
C/Sシステム イメージ
![Page 9: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/9.jpg)
Webシステム イメージ
![Page 10: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/10.jpg)
Ajaxを用いたシステム イメージ
![Page 11: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/11.jpg)
とくにJavaScriptが・・・書くのに慣れていない
JavaやC#なら得意だが・・・prototype.jsなどがあるが・・・サーバーサイドと別の言語になる横断的なテストや統計情報の収集が困難複数の言語の記述能力が必要コードの重複(入力値の妥当性確認など)
クロスブラウザ対応が面倒・・・
この課題を解決するのが
GWT
![Page 12: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/12.jpg)
GWTとは
Javaを使って簡単にAjaxアプリを作ることができる
ツール
![Page 13: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/13.jpg)
GWTのウリ・構成要素
![Page 14: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/14.jpg)
GWTのウリ 好きなJavaの開発ツールを使える
ブラウザ間の非互換な部分を吸収してくれる
NetBeans, Eclipse, InteliJ・・・
商用利用可 オープンソース
Ajaxの代名詞ともいえるGoogleが出している
![Page 15: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/15.jpg)
GWTでの開発の流れJavaでコーディング・デバッグする
JavaからJavaScriptへコンパイルする
各Webブラウザで動作確認する
これらの作業を繰り返す
※Hosted
※Web
![Page 16: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/16.jpg)
ツール類
ライブラリ類
GWTの主要な構成要素
JREエミュレーションライブラリ
GWT Web UIライブラリ
Java to JavaScriptコンパイラ
Hostedブラウザ
![Page 17: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/17.jpg)
GWTの適用領域
![Page 18: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/18.jpg)
PoEAAのレイヤー プレゼンテーションレイヤー
UIの提供ユーザーからのリクエストの処理ユーザーへ情報の表示
ドメインレイヤー入力値や格納値による計算処理値の妥当性確認
データソースレイヤー他システムとの通信RDBMSなどへの永続化
![Page 19: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/19.jpg)
プレゼンテーション
データソース
ドメイン
従来のWebシステムHTML(JSP)/JavaScript
ビジネスロジック実装
Hibernate
クライアント側(Webブラウザ)
Spring
サーバー側
Struts
![Page 20: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/20.jpg)
プレゼンテーション
データソース
ドメイン
GWTを使ったシステム
GWT Client Module
HTML/JavaScript
GWT Server Module
ビジネスロジック実装
Hibernate
クライアント側(Webブラウザ)
サーバー側
Spring
![Page 21: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/21.jpg)
2つのモジュールGWT Client Module
UI部品最終的にはJavaScriptとして動作する
GWT Server ModuleRPC通信を処理するアプリサーバーにデプロイメントする
GWTが対応しているAPIしか使えない
Java SEの機能をフルに使える
![Page 22: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/22.jpg)
GWTの適用範囲プレゼンテーションレイヤーを担うドメインレイヤーやデータソースレイヤーは従来の場合と同じ考え方ただし、クライアント側にリッチなドメインモデルを持たせる場合もある
設計が変わる クライアント全体にフォーカス Ext GWTクライアント側の制約に注意
![Page 23: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/23.jpg)
GWTでうれしくなること
![Page 24: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/24.jpg)
GWTでうれしくなること 全てがJavaで書けるコンパイルタイムリファクタリング
慣れ親しんだIDEがそのまま使える
JUnitが使える非同期RPC部分もテスト可能
![Page 25: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/25.jpg)
GWTでうれしくなること JavaScriptやDOM APIを知らなくてもいい
ブラウザの互換性は気にしなくていい
既存のJavaScriptと連携できるJSNI
![Page 26: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/26.jpg)
GWTでうれしくなること ブラウザの「次へ」「戻る」ボタンに対す
るハンドルが不要
多くの共通的なWidget(UIの部品)が提供されている
国際化対応が考慮されている
![Page 27: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/27.jpg)
御静聴ありがとうございました
![Page 28: Google Web Toolkit(GWT)入門](https://reader033.fdocument.pub/reader033/viewer/2022052618/548fd85fb47959763e8b4e1a/html5/thumbnails/28.jpg)