Google Web ToolkitIntroductionDidier Girard – girard.d@sfeir.com04 juillet 2007

Sommaire

• Comment GWT fonctionne ?

• Les fonctionnalités

Composants graphiques plus évolués

• Des composants tous plus beaux les uns que les autres

Serveur sans état

• Client avec état

• Meilleure scalability

ApplicationApplication

IHM+MétierIHM+Métier

+ Session+ Session

Base de donnéesBase de donnéesDonnéesDonnées

Au début, Ajax c’est cool

• C’est beau

• Efficace

• Les clients en redemandent

Les difficultés

• Cross-navigateur

• Fuite mémoire

• Lourdeur du chargement

• Peu de « Docteur es Javascript »

• Pas de bons IDE

• Bug (javascript est un langage interprété)

• Pas de debug

• Sécurité

• …

COMMENT GWT FONCTIONNE ?

L’objectif

• Permettre de développer simplement, des applications

– Cross navigateurs

– Efficaces

– Stables

• Dans un environnement amical pour les développeurs

– Support des IDE, Debugging, refactoring, typage fort,…

L’approche

• Développer en Java

• Compiler le Java en Javascript/CSS

Hello World

• Démonstration

BrowserIE, Firefox, Safari, Opera

BrowserIE, Firefox, Safari, Opera

RWA in JavaRWA in Java

Java Runtime LibraryJava Runtime Library

Architecture

java.langjava.lang

java.utiljava.util

Java.ioJava.io

Code de l’application

GWT GUI LibraryGWT GUI Library

Panels

PopupStack

AbsoluteVertical

…

WidgetsButton MenuBar

Radio TreeCheck Table

TextArea ….

Javascript Application

GWT Runtime100Ko

GWTCompiler

GWTCompiler

TOUR D’HORIZON

Des widgets « 100% java »

• Démonstration (Kitchen Sink)

Support de l’historique

• « Single Page Interface », mais gestion de l’historique !

• Démonstration (Kitchen Sink)

• Le code

History.addHistoryListener(myCommand);

Support de RPC (JSON/XML-RPC)

• AJAX est d’abord une histoire de requêtes asynchrones

– Avec GWT, c’est simple !

Support de I18N/L10N

• Puissant et original

Absolute Panel

• Permet de développer efficacement

– Un vrai bonheur !

• Il y a bien d’autres Panel : Grid, Row, Flex, Vertical, Tab,…

Support multi-navigateuret multi-plateforme

• Et ça marche…

Support des CSS

• Tous les composants GWT supportent nativement les CSS

Support du debug

Support de javascript

• JSNI, une API astucieuse

• Beaucoup de bibliothèques de javascript populaires sont déjà « wrappées » : scriptaculous, yui, timeline,…

• Démonstration

public static native void alert(String msg) /*-{ $wnd.alert(msg); }-*/;

Optimisation du code

• Le javascript est optimisé durant la compilation

• Seul le javascript nécessaire est téléchargé par le navigateur

– Javascript pour la plateforme cible

– Seule l’API effectivement utilisée est téléchargée

Très bonne scalabilité

• Avec GWT les serveurs sont stateless

• Il est donc très facile d’augmenter la puissance CPU des serveurs

– Plus de « session affinity »

Des outils

• GWT est supporté par tous les grands IDE Java : Eclipse, NetBeans, IntelliJ IDEA, Jdeveloper,…

• Publicité : GWT Designer pour Eclipse (payant)

La communauté GWT

• Plus de 1000000 téléchargements

• Plus de 9000 inscrits sur le forum

• Des ouvrages

• De nombreux articles/tutoriaux

• Des formations

• Des blogs

GWT 1.4

• GWT 1.4 arrive avec son lot de nouveautés

– Par exemple : ImageBundle (téléchargement optimisé d’images), une espèce de base d’images

– Passage de 12 requêtes HTTP à une seule…

ClippedImage timeIcon = new ClippedImage("icons.png", 22, 0, 22, 22);

http://roberthanson.blogspot.com/2007/02/gwt-clippedimage-optimizing-image.html

GWT Gears

• Gears permet d’accéder à une base local depuis javascript.

• Il existe une API pour GWT :

– http://code.google.com/p/gwt-google-apis/

• Demo

27 Google Confidential

GWT est efficace

• Il est couramment admis que développer avec GWT permet d’être 5 fois plus efficace

– Refactoring

– Debugging

– Serveur Stateless

– Cross-navigateurs

– I18N

– Hosted mode

– JSNI

QUELQUES TRUCS

Attention, un langage peut en cacher un autre

• Le code qui s’exécute n’est pas du java, mais du javascript.

• Par exemple « long » n’existe pas en javascript !

30 Google Confidential

En vrac

• La manipulation du DOM est coûteuse

– Vos utilisateurs vont avoir des messages : « slow script » 

– -> utilisez « IncrementalCommand » 

– Tous les navigateurs ont un nombre limité de connexions HTTP, par défaut c’est deux : pas la peine d’envoyer des tonnes de requêtes asynchrones…

• Sous classez la classe AsyncCallback pour gérer de manière centrale les erreurs

• Oubliez javascript, codez vos widgets en Java

31 Google Confidential

LES IDEES REÇUES

Java est nécessaire sur le serveur

• Non, GWT n’impose pas de technologie sur le serveur

• GWT est simplement plus pratique à utiliser avec Java sur le serveur

Le code Javascript généré est difficile à débugger

• Il est possible, via les options du compilateur, d’avoir un code javascript lisible.

Les widgets GWT ? Bof….

• Les widgets GWT sont des widgets de bases.

• Il existe beaucoup de projet qui proposent des widgets évolués

– GWT Ext

– GWT Rialto

– Tatami

– GWT Widget

– GWTaculous

– …

35 Google Confidential

Les applications GWT sont lourdes

• Le code généré est optimisé et gzippable

– KitchenSink pèse autour de 60Ko !

GWT ne supporte pas l’existant

• Faux

– Il est tout à fait possible d’intégrer des composants GWT dans une page HTML classique.

GWT c’est des applets

• Des applets, non merci :-)

– Le code java est compilé en javascript durant la phase de développement !

GWT est propriétaire

• Mais non

– GWT est sous licence opensource Apache depuis la version 1.3 (12/2006)

MISC

• Version de JDK ?

– Codez le code serveur en java 5/6, codez le code client en java 1.4

• Intégration avec Spring ?

– Facilité avec GWT 1.4

• Intégration avec Hibernate ?

– Facilité avec GWT 1.4 : danger !

• Intégration avec les EJBs

– Naturel avec les entity beans

– Nécessite un wrapper pour les session beans

– Normalement full support avec GWT 1.5

Ressources

GWT :http://code.google.com/webtoolkit/

Forum pour les développeurs :http://groups.google.com/group/Google-Web-Toolkit

Blog officiel : http://googlewebtoolkit.blogspot.com/

onGWT, Tracking news on GWT : http://www.ongwt.com/

GWT 1.4:http://code.google.com/p/google-web-toolkit/wiki/DevPlan_1_4