Le blog de Mohamed Abdennebi: 2012

Parmi les nouveautés majeures de la version 2.5 de GWT figure le «Super Dev Mode». Le Super Dev Mode est en effet qualifié de majeur, car il a pour but d'améliorer la productivité des développeurs en offrant une alternative au «Dev Mode classique» qui, avouons-le, est contraignant (installation obligatoire de plug-in dans le navigateur), lent et consommateur en mémoire lorsque le code de l'application atteint une taille importante.

Contrairement à ce que l'on pourrait penser, le Super Dev Mode n'est pas un Dev Mode amélioré. En effet :

Dans le Dev Mode l'exécution de l'IHM est distribuée entre la JVM (qui exécute le code Java) et le navigateur (qui exécute le code JavaScript présent dans les méthodes JSNI). La communication entre le code Java et le code JavaScript se fait à l'aide d'un protocole basé sur les messages utilisant une connexion TCP sur le port 9997. Cela génère beaucoup d'aller-retour entre la JVM et le navigateur.
Dans le Super Dev Mode l'IHM ne tourne pas dans une JVM, elle est compilée en mode «Super Draft» sans aucune optimisation. C'est du JavaScript pure. Cela veut dire qu'il n'y plus d'échange verbeux entre la JVM et le navigateur. En revanche, il n'est plus possible de déboguer dans votre IDE préféré, vous le ferez cette fois-ci dans votre navigateur préféré et toujours en Java !

Pour plus de détails sur les différences, je vous invite à consulter l'article de Google Introducing Super Dev Mode.

En résumé, le Super Dev Mode vous permet de compiler et de tester rapidement votre code. Il vous permet, comme dit plus haut, de déboguer et d'inspecter votre code Java directement dans le navigateur si vous utilisez Chrome (Chrome utilise une technique magique appelée Source Maps. Chez Mozilla on est à pied d’œuvre pour l'implémenter dans Firefox).

Nous allons donc vous présenter le Super Dev Mode à l'aide d'un exemple simple. Le tutoriel sera divisé en deux parties : la première concerne le lancement et l'utilisation du Super Dev Mode. La seconde concerne quant à elle le débogage du code Java directement dans le navigateur.

Avertissement:

Ce tutoriel a été réalisé avec la version RC1, il est possible de constater des différences avec la version finale. Il sera éventuellement mis à jour à la sortie de la version finale.
Nous n'expliquerons pas le fonctionnement interne du Super Dev Mode. Un article complet sur le sujet a déjà été publié par Thomas Broyer (contributeur et membre du comité de pilotage du projet open source GWT).
Étant un utilisateur d'Eclipse, j'ai réalisé ce tutoriel avec cet outil. Les principes expliqués dans cet article devraient s'appliquer à n'importe quelle autre IDE.

Partie 1 : Lancement du Super Dev Mode

Avant de commencer, assurez-vous de disposer d'un environnement de développement composé de :

Java 6
Eclipse avec Google Plugin for Eclipse.
Google Chrome si vous voulez expérimenter le débogage Java dans le navigateur (si vous n'avez pas la possibilité de l'installer, la version portable est disponible ici)

Pour illustrer le Super Dev Mode, nous allons nous servir de l'application exemple fournie par GPE (Google Plugin for Eclipse). Préparons d'abord l'environnement de développement :

1 Installez le SDK 2.5 :

Récupérez le version 2.5-rc1 du SDK à cette adresse : http://google-web-toolkit.googlecode.com/files/gwt-2.5.0.rc1.zip
Lancez Eclipse, ouvrez les préférences puis allez dans rubrique « Google > Webtoolkit » pour ajoutez le nouveau SDK.

2 Créez une nouvelle application GWT

Créez une nouvelle application GWT, nommez-la Hello et choisissez comme nom de package hello.
Assurez-vous d'avoir sélectionné le SDK 2.5.0
Décochez "Use Google App Engine"

(cliquez sur l'image pour l'agrandir)

3 Lancez l'application avec le Dev Mode «classique» ou avec n'importe quel Servlet Container

Exécutez l'application avec le Dev Mode « Run As -> Web Application ». Nous utiliserons plus tard l'URL qui est affichée : http://127.0.0.1:8888/Hello.html?gwt.codesvr=127.0.0.1:9997.

Le Dev Mode n'est pas obligatoire nous l'employons juste pour exécuter la partie serveur de l'application. Cela veut dire que vous pouvez utiliser votre serveur habituel, par exemple Tomcat ou Jetty.

4 Préparez le module GWT

Comme vous allez le voir plus loin, le Super Dev Mode est un petit programme serveur qui écoute les demandes de compilation et envoie le résultat sur le port 9876. Ainsi, dans ce mode les ressources statiques sont servies par un serveur autre que le serveur hébergeant les services RPC et la Host Page. Ce scénario est prévu par GWT, mais demande l'utilisation d'un linker spécial nommé xsiframe.

Ceci n'est pas suffisant, il faut que le bootstrap (hello.nocache.js) appel l'autre bootstrap se trouvant sur le serveur du Super Dev Mode c'est-à-dire http://localhost:9876/hello/hello.nocache.js. Ceci est possible en activant la propriété devModeRedirectEnabled.

En résumé, ajoutez au fichier de configuration du module (Hello.gwt.xml) les deux lignes suivantes :

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>

5 Lancez le Super Dev Mode

Pour l'instant GPE ne supporte pas le Super Dev Mode, nous allons donc le lancer manuellement en créant un Launcher Eclipse :

Lancez «Run Configurations», sélectionnez le type «Java Application».
Donnez lui le nom «Hello SuperDevMode» et renseignez les paramètres suivants avec les valeurs correspondantes :

Projet : Hello
Main class : com.google.gwt.dev.codeserver.CodeServer (c'est la classe du serveur qui va écouter sur le port 9786)

Nous devons spécifier à la classe CodeServer le répertoire source ainsi que le nom du module. Dans l'onglet «Arguments» ajoutez au champ «Program Arguments» ce qui suit : -src src/ -workDir workdir/ hello.Hello
Dans l'onglet Classpath ajouter le jar externe gwt-codeserver.jar (il se trouve à la racine du répertoire d'installation du SDK).
Vous pouvez lancer maintenant le Super Dev Mode

Voici une capture d'écran de la sortie du CodeServer. Remarquez le message encadré :

Allez à l'adresse indiquée et suivez la procédure décrite dans la page affichée.

(cliquez sur l'image pour l'agrandir)

1 . Ajouter les deux bookmarklets à votre barre de favoris (Dans la plupart des navigateurs la barre n'est pas affichée, affichez là et glissez-déposez les deux liens dans la barre)

2 - Attention, le message "Visit a web page that use one of these modules : hello" est un peu trompeur, car il nous incite à cliquer sur le nom du module (hello). Ce n'est pas ce lien qu'il faut ouvrir mais plutôt l'URL fournie par le DevMode classique (sans le suffixe) ou par votre servlet container :


http://127.0.0.1:8888/Hello.html

Le lien sur le nom du module vous permet de voir ce qui a été généré ainsi que les messages du compilateur.

(cliquez sur l'image pour l'agrandir)

Cliquez sur maintenant sur la bookmarklet Dev Mode On. Une boite de dialogue s'affiche vous invitant à compiler le module «hello». Vous pouvez à n'importe quel moment désactiver le Super Dev Mode en cliquant sur la bookmarklet Dev Mode Off.

(cliquez sur l'image pour l'agrandir)

Partie 2 : Déboguez le code source Java directement dans Chrome :

Pour cette partie vous êtes obligés d'utiliser Chrome, car il est pour l'instant le seul à supporter le Source Maps.

Qu'est-ce le Source Maps

En production, le code JavaScript est souvent obfusqué et compressé. Ce code est quasiment impossible à déboguer. Le Source Maps est une technique qui permet de rendre cela possible en déboguant directement le code d'origine (grâce à des mappings de source), ce code d'origine peut être du JavaScript, du CoffeScript, du Java (notre cas) ou tout autre langage. Le Souce Maps ne concerne pas uniquement le débogage, il conccerne aussi les messages d'erreurs CSS et JavaScript, les logs, la StackTrace, etc.

1 - Ouvrez Chrome et activez le source maps : Affichez les «Outils de développement» en utilisant le combinaison de touches Ctrl+Shift+I. Affichez ensuite les paramètres en cliquant sur l’icône située en bas à droite de la fenêtre :

(cliquez sur l'image pour l'agrandir)

Allez maintenant dans l'onglet Scripts, dans l'explorateur de scripts (à gauche) vous devriez voir tous les sources utilisées par votre IHM (y compris ceux générées). Vous pouvez maintenant poser des points d'arrêt, inspecter la valeur de variables, voir la stack d'exécution, etc.

Happy Debugging !