Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009

1. JUGL – présentation GWT
Http://www.jugl.ch
5 février 2009

2. Licence
Creative Commons
Contrat Paternité
Pas d'Utilisation Commerciale
Partage des Conditions Initiales à l'Identique
2.0 France
http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
2

3. Information
Cette présentation et les exemple sont disponibles à cette adresse
https://forge.octo.com/svn/jugl/2009-01 Gwt
Pour récupérer l'ensemble des sources et la présentation en local il
suffit de taper la ligne de commande dans le repertoire de destination
> svn co "https://forge.octo.com/svn/jugl/2009-01 Gwt" .
Pour les démonstrations GWT pur (sans maven) il faut avoir GWT
(1.5.3+) dans son PATH, pour les autres il faut avoir
Installé maven
Un jdk 1.5 dans son path (en tapant java –version)
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
3

4. GWT un framework d'application web
Approche GWT
Développer dans le langage Java
Compiler le code Java en JavaScript et Html (au lieu de byte code avec un jdk)
Gwt c'est :
Des outils: compilateur, IDE (Java), scripts
Une partie du Jdk
Un framework de composant: les composants graphiques de base
Une architecture orientée service:
• One page application
• Des services de données sur le serveur
Gwt se propose de simplifier les points suivants
Crossbrowser
Fuite mémoire (DOM / Javascript)
La complexité de développement JavaScript
L'outillage de développement (débugger, designer, roundtrip)
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
4

5. Positionnement GWT
GWT a été mis en opensource (décembre 2006, licence
Apache 2.0)
C'est une communauté fermée (Google) qui avance vite
C'est une nouvelle position (éditeur et opensource) pour
Google
on ne connait pas l'implication de google dans la durée
Vu l'engouement pour GWT, il sera de plus en plus difficile pour
Google de ne plus supporter GWT
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
5

6. Architecture GWT
En terme d'architecture, la technologie de rapproche de
Flex
SilverLight
One page application
Avec support de l'historique (et des bookmark ?)
code Java
Compatible Java 5 (depuis mai 2008)
Version Java 6 en cours d'élaboration
compilateur Html/JavaScript: compilation tardive et conditionnelle
Particularité: GWT n'utilise jamais les *.class, ce sont des reliquats des IDE ou des
outils (ANT, Maven)
Démo
HelloWord compilé avec Gwt
Dissection du code compilé
Navigateur embarqué et débugage
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
6

7. Support de Java 5
Types (boolean, byte, char, short, int, long, float, and double), Object, String, arrays,
user-defined classes, etc.
Par contre tout les types arithmétiques sont mappés sur un double, limitation JavaScript
Le type long est mappé sur 2 entier de 32 bits par un mécanisme GWT (pour >1.5)
•
•
Le type long ne peut pas être utilisé dans des appels natifs
Cela a un impact sur les performances
Exception: support de try/catch/finally
Certaine exception ne peuvent pas survenir (OutOfMemory, etc.)
JavaScriptException est ajoutée
Assertions: elles sont supportées mais doivent activées explicitement
Multithreading and Synchronization: le verbe synchronize est supporté mais est ignoré
(le JavaScript est monothread)
Les méthodes Object.wait(), Object.notify(), et Object.notifyAll() provoque une erreur de
compilation
Réflexion: il n'y a pas de support de la réflexion
Seul existe Object.getClass().getName()
Finalisation: pas de support
Liste des classes supportées
http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkitdoc-1-5&t=RefJreEmulation
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
7

8. Structure d'un projet GWT
Code Java de la partie cliente, compilé par GWT
Code Java de la partie serveur, compilée par le JDK
Ressources statiques de la WebApp
Descripteur du module GWT
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
8

9. Les avantages de GWT pour la partie IHM
Fonctionnalités AJAX
Productivité des développements
Efficience du runtime
Minimisation du trafic
Minimisation des ressources
• Mode obsucate
Elimination du code mort lors de la compilation
Possibilité de se brancher sur du code JavaScript existant
public static native void message(String pMsg) /* { $wdn.alert(pMsg); } */;
Il est très simple de se créer des composants réutilisables
C'est des POJO
Utilisation de CSS
il faut gérer l'affectation d'un ID à la main si on veut l'utiliser dans la CSS
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
9

10. Composants disponibles
GWT = librairie de composants bas niveau (style SWING)
http://code.google.com/intl/fr/docreader/#p=google-web-toolkitdoc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery
Il existe un grand nombre de librairies complémentaires
GWT Ext
MyGWT
GWT Rialto
GWTWidgets
…
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
10

11. Outils disponibles – A la main
GWT 'à la main'
> cd code1-simpleHelloWord
> createHelloWordApplication.cmd
> cd generated
> HelloWord-compile.cmd
Ou
> HelloWord-shell.cmd
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
11

12. Outils disponibles – ANT
Tache ANT
http://braindump.dk/tech/gwt-task-for-ant/
Project creator http://code.google.com/intl/fr/docreader/#p=googleweb-toolkit-doc-1-5&s=google-web-toolkit-doc-15&t=DevGuideProjectCreator
> cd code1-simpleHelloWord
> createEclipseAndAntProject.cmd
> cd generated
> ant -f HelloWord.ant.xml
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
12

13. Outils disponibles – Maven
Plugins Maven
http://code.google.com/p/gwt-maven/
http://mojo.codehaus.org/gwt-maven-plugin/
> cd codecode2-maven
> mvn clean install
ou
> mvn gwt:gwt
ou
> mvn gwt:debug
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
13

14. Outils disponibles
GWT Designer (payant)
Télécharger le plugin Eclipse
• http://download.instantiations.com/WBPro/continuous/latest/update/E-3.3/
ou
• http://download.instantiations.com/WBPro/continuous/latest/update/E-3.4/
Autres Outils disponibles
http://code.google.com/intl/fr/webtoolkit/tools.html
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
14

15. Internationalisation
> cd codecode3-maven-withI18n
> mvn gwt:gwt
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
15

16. Optimisation des images
http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-doc-15&s=google-web-toolkit-doc-1-5&t=DevGuideImageBundles
Les images sont de
plus localizables
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
16

17. Optimisation des images et internationalisation
> cd codecode3-maven-withI18n
> mvn gwt:gwt
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
17

18. Architecture client serveur
> cd codecode4-server
> mvn gwt:gwt
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
18

19. Deffered Binding - Directives de compilation
Gestion de
Crossbrowser
L'internationalisation
Des logs
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
19

20. Création de framework
Il suffit de faire un jar contenant
Les sources Java
Le fichier de configuration du module
De déclarer dans le module les ressources statiques (images, css)
que les clients devront embarquer
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
20

21. GWT et les tests
GwtTestCase
Demo
> cd codecode3-maven-withI18n
> mvn gwt:test
Ou
> mvn clean install
Test selenium
En utilisant selenium RC pour les échanges asynchrones
Cela reste compliqué
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
21

22. Intérêts de faire du Java pour la partie cliente
Simplification du développement
Plus simple
Moins de technologies à maitriser
Roundtrip rapide
Il est facile de faire un 'petit' framework pour
faire des composant réutilisable
Intégration dans le build (intégration continue)
On utilise les outils classique coté serveur
Maven / Ant
Checkstyle & Co
Génération de code et/ou utilisation d'annotation
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
22

23. Pour aller plus loin
Avec GWT plus besoin de connaitre JavaScript et Html, est-ce du
développement 100% Java ?
Pas forcément on peut le voir comme un remplaçant de JS et Html sur le
client et avoir un serveur PHP, Grails, etc.
Faut-il mélanger le code serveur et le code client dans le même projet
?
C'est le fonctionnement par défaut de GWT, ce n'est pas forcément
adapté en entreprise
On peut le séparer en plusieurs module/projet
Quelle alternative à GWT RPC ?
On peut prendre la main sur le protocole pour le remplacer (par exemple
JSON) par contre il faudra gérer plus de chose 'à la main'
Intégration avec Google Gears pour le support du mode déconnecté
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
23

24. Quelques incompréhensions
"Il faut utiliser Java sur le serveur"
Non, on peut utiliser n'importe quel technologie pour mettre à disposition les
données sur le serveur (PHP, etc.)
"Il n'est pas possible de débuguer le code JavaScript généré, il est illisible"
Il n'est pas lisible en mode obfucated, mais on peut le générer en mode
DETAILLED.
La bonne approche est de débuguer le code Java depuis Eclipse
"Les applications GWT sont grosses et longue à télécharger"
Non le code est optimisé et compressé
"On ne peut pas faire de Html / JavaScript dans une application GWT"
Il est possible de mixer les 2, même si ce n'est pas le mode recommandé
"Quel rapport avec les Applets ?"
Aucun, à part le langage Java
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
24

25. Trucs et astuces
Avoir des profils différents pour le dev et la production
Pour diminuer les options de compilation et le temps de
développement
Eviter à tout prix l'intégration de code JavaScript via
l'utilisation de native
Cela court-circuite le mécanisme de libération de la mémoire
JavaScript et créer des fuites mémoire
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
25

26. Ressources
Cette présentation
https://forge.octo.com/svn/jugl/2009-01 Gwt
GWT
http://code.google.com/intl/fr/webtoolkit/
Forum
http://groups.google.com/group/Google-Web-Toolkit
Blog
http://googlewebtoolkit.blogspot.com/
On GWT
http://www.ongwt.com/
Université du SI sur la mise en œuvre de GWT pour une charte d'ergonomie
http://www.universite-du-si.com/Webcast.aspx , Session A5 Ergonomie 2.0 (inscription
obligatoire et gratuite)
Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique
26