Google Web Toolkit (GWT) est une boîte à outils destinée aux développeurs fournie par Google. Ces outils sont libres et gratuits, et déjà utilisés par de nombreux développeurs à travers le monde.
Google Web Toolkit
Qu’est ce que Google Web Toolkit ?
GWT permet au développeur de créer et d’optimiser des interfaces Web complexes utilisant JavaScript tout en écrivant le code de base en langage Java. L’intérêt de développer ces interfaces en langage Java est d’une part de pouvoir structurer son application en différentes classes et ainsi de répartir les traitements, mais également de pouvoir déboguer cette même application grâce aux outils Java. Ainsi, le développeur peut coder son application dans un langage de base possédant des outils de débogage évolués puis l’application est compilée et traduite en JavaScript par le compilateur GWT. Ceci permet de créer des interfaces Web plus riches et compatibles avec la majorité des navigateurs internet.
Les interfaces GWT sont transformées en JavaScript pour être exécutées par le navigateur mais peuvent aussi interagir avec un serveur distant pour offrir plus de fonctionnalités. En effet, Google Web Toolkit prévoit que les développeurs puissent créer des applications Web du type client/serveur. Le développeur peut créer son interface avec GWT puis la relier avec un serveur d’applications pour enrichir les fonctionnalités disponibles. Cette connexion se fait soit grâce au principe d’appel de procédures distantes, soit grâce à des transferts de données utilisant le protocole HTTP.
Comment ça marche ?
Le compilateur GWT transforme l’application en pur JavaScript et utilise de l’HTML dynamique ainsi que la manipulation du DOM pour effectuer les interactions au sein de l’interface Web. Dans le cas d’une application client/serveur, les échanges entre le navigateur et le serveur se font en AJAX afin de minimiser la quantité de données transférées et de ne recharger que les éléments concernés par les changements dans la page.
Figure 1 : rôle du compilateur GWT
Toutefois, le développeur peut vouloir écrire lui-même le code JavaScript qui sera exécuté dans certaines fonctions. Pour cela, GWT propose une syntaxe de programmation nommée JSNI (JavaScript Native Interface) basée sur le principe des JNI (Java Native Interface) qui permet au développeur d’écrire directement en JavaScript dans le code Java. Voici un exemple de la syntaxe JSNI :
|
1 2 3 4 5 6 7 8 9 10 |
// Déclaration en Java... native String VerifierNom(String nom) /*-{ // ...implémenté en JavaScript If (nom == “” ){ Alert(‘Veuillez entrer un nom valide’); nom = “”; } return nom; }-*/; |
Que peut-on faire avec GWT ?
Google Web Toolkit permet aux développeurs soit de créer des interfaces Web interactives, soit de créer des applications Web plus lourdes en utilisant l’architecture client/serveur.
Pour développer une interface Web ou la partie cliente d’une application client/serveur avec GWT, le code utilisé est le même que pour une application Java standard. Le GWT met à disposition du développeur une petite librairie d’objets graphiques tels que des boutons ou des tableaux modulables qui s’organisent en panel. Le développeur interagit avec ces objets depuis le code Java directement. Il est possible de rajouter des éléments directement via les fichiers HTML, mais cette méthode est plus destinée aux images et autres éléments statiques de la page. Le style de l’interface Web est défini soit par les fichiers standards de Google Web Toolkit, soit par des fichiers remplis par le développeur. Voici un aperçu du rendu d’une interface Web développée avec GWT :
Figure 2 : exemple d’interface GWT
Pour réaliser une interface Web, le développeur doit simplement coder ses classes Java dans un package client en utilisant les APIs Java ou la librairie Java proposée par GWT.
Pour développer des applications client/serveur, GWT propose deux solutions :
- en utilisant des appels vers des procédures distantes (‘RemoteProcedureCall’) qui permettent d’accéder directement à des services proposés par les classes du serveur;
- via des transferts de données JSON(*) via HTTP, le développeur pouvant ainsi échanger des données avec le serveur et utiliser des services distants en passant par les requêtes HTTP. Cela évite l’utilisation de Servlets, les échanges entre le client et le serveur se faisant en JSON ou en XML.
Un inconvénient de GWT est que l’application une fois déployée est entièrement en JavaScript. Or celle-ci s’exécute dans le cache de la page du navigateur et l’application est réinitialisée lorsque l’utilisateur rafraîchit la page. Si le développeur n’effectue pas une synchronisation périodique avec un système de stockage coté serveur, les données de chaque utilisation sont perdues. En revanche, si le développeur choisit d’interfacer la partie serveur avec un système de stockage, il peut mettre à profit la gestion automatique des processus de sérialisation et dé-sérialisation intégrés à GWT.
(*) JSON est un format de données textuel comme le XML, mais orienté objet. Il ne comporte que deux éléments structurels, des paires clé/valeur et des listes de valeurs. Il n’y a que trois types d’éléments représentables, des objets, des tableaux et des valeurs génériques. C’est un format de données indépendant qui peut être utilisé par tout programme apte à le lire. Il existe une extension utilisée par Google Web Toolkit, JSONP (JSON with Padding), qui sert à transmettre le nom d’une fonction à exécuter en retour. Cela permet de faire des appels de fonction en même temps que le transfert de données. (source Wikipedia)
Pour aller plus loin encore avec Google Web Toolkit, on peut l’utiliser avec le plugin Google Gears.
Google Gears
Qu’est ce que le plugin Google Gears ?
Gears est un petit logiciel proposé par Google sous la forme de plugin, directement intégré dans le navigateur Google Chrome, que l’utilisateur installe sur son poste pour pouvoir utiliser les fonctionnalités Gears des sites concernés. Ce plugin, lorsqu’il est utilisé sur un site permet entre autre d’accéder en mode déconnecté aux services normalement accessibles seulement lorsque la connexion internet est active. Il intègre une base de données SQLite ainsi qu’un serveur local et un gestionnaire de ressources qui permettent de mettre en cache les données du site Web et ainsi faire les requêtes vers le cache du navigateur plutôt que de faire appel au serveur d’application. Google Gears permet ainsi aux sites qui l’utilisent de rester fonctionnels même lors d’une coupure de connexion.
Figure 3 : Demande d’autorisation pour utiliser le plugin Gears sur un site lors de la première visite
Comment ça marche ?
Lors de la première connexion d’un utilisateur à un site exploitant Google Gears, le code Gears vérifie si le plugin est déjà installé et indique à l’utilisateur s’il doit l’installer ou non. Une fois le plugin installé, le site vérifie s’il a l’autorisation de l’utilisateur pour stocker des informations dans le cache du navigateur. Quand ces conditions sont remplies, les fonctionnalités Gears peuvent être exploitées.
Pour utiliser la base de données SQLite embarquée dans le navigateur du poste client, Gears propose des classes permettant la gestion d’une base de données. La base de données correspondante est alors créée dans le cache du navigateur et est associé à ce site par son nom de domaine. Cette base de données est persistante, l’utilisateur pouvant fermer l’onglet, la fenêtre ou le navigateur et retrouver ses données lors de la réouverture. Voici un exemple de code d’ouverture de base de données :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
... import com.google.gwt.gears.client.Factory; import com.google.gwt.gears.client.database.Database; import com.google.gwt.gears.client.database.ResultSet; //Création d’une instance de base de données Database db = Factory.getInstance().createDatabase(); //Ouverture de la base de données ‘DB-Stock’ db.open("DB-stock"); //Requête de création de la table ‘Stock’ String requete = "create table if not exists Stock (nom TEXT, prix TEXT)"; try { //Exécution de la requête sur la base de données ouverte db.execute(requete); //Requête pour récupérer tout le contenu de la table //‘Stock’ requete = "select * from Stock"; //Exécution de la requête et récupération du résultat //dans une variable ResultSet ResultSet rs = db.execute(requete); } //Gestion des exceptions éventuellement générées par l‘accès à //la base de données catch (DatabaseException e) {} |
Le serveur local et le gestionnaire de ressources servent dans la mise en mode déconnecté du site ou de l’application. A l’aide de ces outils, le développeur peut soit laisser l’utilisateur décider ou non de mettre l’application « hors ligne », soit forcer automatiquement le mode déconnecté.
Dans le cas où l’utilisateur a le choix, un bouton lui permet de déclencher la procédure Google Gears de mise hors ligne de l’application. Cette désactivation utilise un fichier JavaScript pour lancer le téléchargement du site sur le poste client ainsi que l’instanciation d’un serveur local et du gestionnaire de ressources. Le téléchargement du site se fait à l’aide d’un fichier JSON (manifest.json) contenant la liste des fichiers à récupérer sur le serveur pour que l’application Web puisse fonctionner « hors ligne ». Cette liste est faite par le développeur et contient également le numéro de version du fichier manifest.json. A chaque fois que le développeur veut modifier la liste des fichiers téléchargés sur le poste client, il doit modifier le numéro de version pour que le plugin Gears détecte le changement.
Si le développeur choisit de forcer le transfert automatique en cache, le script JavaScript instancie le serveur local et le gestionnaire de ressources, et délivre au gestionnaire de ressources le fichier manifest.json, ce dernier téléchargeant chaque fichier y étant mentionné. Ensuite, le serveur local intercepte les requêtes HTTP envoyées par les liens des pages pour les rediriger vers les données du cache. Cela permet de fonctionner en mode déconnecté, même si la fenêtre a été fermée. Durant le laps de temps où l’application fonctionne grâce aux pages en cache, l’application n’est pas mise à jour sauf en forçant le rafraichissement avec l’instruction « store.checkForUpdate(); ».
Figure 4 : Liste des sites visités dans les paramètres du plugin Gears
Que peut-on faire avec ce plugin ?
Ce plugin, combiné à Google Web Toolkit, permet donc de créer de petites applications Web disponibles en mode déconnecté. Les applications les plus visées sont les petites applications d’information comme la météo ou les sites de divertissement, légères, qui doivent être rapides et nécessitent peu de données utilisateur. On peut aussi par exemple développer des applications hybrides où l’utilisateur commence avec une interface client/serveur qui lui sert à s’authentifier avant de naviguer par la suite en local pour par exemple consulter des articles ou tout autre élément statique.
L’utilisation de Gears pour le mode déconnecté pour des applications plus complexes reste possible mais si l’on veut entretenir une base de données temporaire dans le cache du navigateur, il faut néanmoins développer une importante couche de synchronisation.
Conclusion
Google Web Toolkit est un outil puissant qui permet aux développeurs de concevoir et réaliser des applications Web qui fonctionnent sur la grande majorité des navigateurs. Ces applications étant en JavaScript sur la partie cliente, elles sont également adaptées aux terminaux mobiles. La possibilité d’utiliser une architecture client/serveur permet aux développeurs de créer des applications complexes et reliées à des systèmes de stockage tout en gardant une interface riche et légère. Le code présent du coté serveur peut exploiter les autres APIs mais aussi d’autres Framework tels que Hibernate ou Spring.
Google Gears se révèle par contre moins évident à exploiter pleinement. Le manque de persistance des données en mode déconnecté sans la base de données limite son utilisation dans des applications complexes. Il reste tout à fait adapté aux petites applications qui peuvent du coup être disponibles à tout moment. Il n’est supporté que par certains navigateurs et comme Google a annoncé qu’il arrêtait son développement au profit du HTML5, il risque d’être de moins en moins supporté.