introduction à google web toolkit (gwt) - philippe kernevez - february 2009

JUGL – présentation GWT

Http://www.jugl.ch5 février 2009

2Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique

Licence

Creative CommonsContrat Paternité

Pas d'Utilisation CommercialePartage des Conditions Initiales à l'Identique

2.0 France

http://creativecommons.org/licenses/by-nc-sa/2.0/fr/


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

� 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)

> svn co "https://forge.octo.com/svn/jugl/2009-01 Gwt" .


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)


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


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


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-toolkit-

doc-1-5&t=RefJreEmulation


Structure d'un projet GWT

Descripteur du module 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


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


Composants disponibles

� GWT = librairie de composants bas niveau (style SWING)� http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-

doc-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� …


Outils disponibles – A la main

� GWT 'à la main'

> cd code\1-simpleHelloWord> createHelloWordApplication.cmd > cd generated

> HelloWord-compile.cmd Ou> HelloWord-shell.cmd


Outils disponibles – ANT

� Tache ANT� http://braindump.dk/tech/gwt-task-for-ant/� Project creator http://code.google.com/intl/fr/docreader/#p=google-

web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideProjectCreator

> cd code\1-simpleHelloWord> createEclipseAndAntProject.cmd> cd generated

> ant -f HelloWord.ant.xml


Outils disponibles – Maven

� Plugins Maven� http://code.google.com/p/gwt-maven/� http://mojo.codehaus.org/gwt-maven-plugin/

> cd code\code\2-maven

> mvn clean installou> mvn gwt:gwtou> mvn gwt:debug


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


Internationalisation

> cd code\code\3-maven-withI18n

> mvn gwt:gwt


Optimisation des images

� http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideImageBundles

� Les images sont de plus localizables


Optimisation des images et internationalisation


> mvn gwt:gwt


Architecture client serveur

> cd code\code\4-server

> mvn gwt:gwt


Deffered Binding - Directives de compilation

� Gestion de � Crossbrowser� L'internationalisation� Des logs


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


GWT et les tests

� GwtTestCase� Demo

� Test selenium� En utilisant selenium RC pour les échanges asynchrones� Cela reste compliqué


> mvn gwt:testOu > mvn clean install


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


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é


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


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


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)