[Nantes GTUG] Soirée GWT2/HTML5

L'association Nantes GTUG recevait jeudi Salvador Diaz, diplômé de l'école des mines de Nantes, pour nous parler de GWT 2 (et versions supérieures) et HTML 5. Je travaille actuellement sur une application GWT 1.5, donc le sujet m'a particulièrement intéressé.

La conférence s'est déroulée en 2 parties de présentation théorique, couronnées par une démo live de mise en pratique. Un régal !

Nouveautés GWT 2

Dans un premier temps, Salvador (@salvadordiaz) nous a présenté les nouveautés et bonnes pratiques du framework GWT 2. Moi qui travaille actuellement sur un projet en GWT 1.5, j'ai vite compris que l'approche de cette nouvelle version est bien différente.

UiBinder

Alors que dans les versions antérieures à la 2.0, chaque vue était décrite par une classe java, qui comportait à la fois la configuration du rendu et les traitements via les Listener, une vue en GWT 2 se décompose à présent en deux fichiers :

  • un fichier XML : le template UiBinder. A la mode du JSF par exemple, ce fichier sert à définir l'organisation de l'écran, les positionnements et les styles. Il intègre des balises HTML ainsi que des balises GWT.
  • une classe Java : cette classe, via le mécanisme UiBinder, récupère les composants GWT utilisés dans le fichier XML, et est en charge de la gestion des événements sur ces composants. Elle ne connait pas l'agencement des composants eux-mêmes.

La magie d'un IDE comme Eclipse permettra une compilation instantanée qui fera le lien entre les deux fichiers. Ainsi, un composant déclaré dans la classe Java mais absent du fichier XML provoquera une erreur.

Activity/Place

Les Activity et Place, introduites dans GWT 2.1 font partie du modèle MVP, pour Model/View/Presenter. Le Presenter, aussi appelé Activity, met à jour la vue (elle-même a une référence vers son Presenter). La Place, elle, fait le lien entre le navigateur et les Activity, ce qui permet ainsi de gérer l'historique de navigation. Eh oui, car dans GWT 1.5 pour citer la version que je connais, un F5 sur un écran ramène systématiquement à la page d'accueil, car le navigateur n'a pas de notion de navigation. Le PlaceHistoryMapper permet quant à lui de faire le lien entre une URL et une Place. Voilà donc une fonctionnalité forte utile, quand on sait que l'utilisateur lambda adore utiliser les flèches "précédent" et "suivant" de son navigateur !

Cell Widgets

Cette nouvelle mouture de GWT propose "de série" un lot de composants, de type listes, tableaux..., permettant de représenter des données en nombre important : ce sont les Cell Widgets. Avant, il fallait souvent définir ses propres composants (ou utiliser des librairies additionnelles). Ces nouveaux composants sont, de surcroit, optimisés!

RequestFactory

Pour communiquer entre client et serveur, nous utilisons en GWT 1 les appels Json (pour des données simples) ou RPC (données plus complexes). GWT 2 introduit un nouveau protocole : RequestFactory. Il permet d'interroger directement les services métiers (sans introduire une couche supplémentaire), de travailler directement sur les beans métiers (finis les DTO?), et il transfert uniquement les modifications. Cerise sur le gâteau, une requête peut interroger plusieurs services métiers.
Ce nouveau protocole s'appuie sur les concepts d'Entity, qui représente une classe persistée en base de données, et d'EntityProxy. D'après ce que j'ai compris, une fois que vous avez écrits vos beans métiers et vos services, les proxy GWT peuvent être générés automatiquement.

Framework Editor

GWT 2 propose enfin un mécanisme simple de mapping entre les objets que vous faites transiter sur le client, et les composants GWT qui constituent les vues : le framework Editor. Il gère également d'autres aspects comme la validation par exemple.

Utilisation des nouveautés HTML 5 et CSS 3

GWT2 intègre des API pour gérer les possibilités offertes par HTML 5. Parmi elles, on peut citer :

  • La géolocalisation. L'application GWT peut demander au navigateur les coordonnées GPS du client par exemple.
  • Le "webstorage" : niveau de cache de plus haut niveau que la session, qui permet de conserver des données sur le poste client, en vue de les réutiliser quand l'application est de nouveau accédée dans le navigateur.
  • Nouveaux types de composants de saisie : sliders (pour sélectionner une plage de valeurs), colorPiker (sélectionner une couleur), datePiker (sélectionner une date)...
  • APIs vidéo, audio
  • Canvas
  • Drag & Drop
  • CSS 3 : nouveaux sélecteurs, organisation en colonnes, gestion des coins arrondis, des ombres, animations...

Certaines de ces APIs proposent un mode dégradé si HTML 5 n'est pas supporté (pour les nouveaux types de champs saisissables par exemple), alors que d'autres sont uniquement disponibles dans les navigateurs supportés (tant que la norme HTML 5 n'est pas fixée tout du moins).

Démo

Pour illustrer son propos, Salvador a terminé par une démonstration.
L'application cible est une todo-list, avec trois colonnes : "Todo", "Doing" et "Done". Chaque colonne contient des tâches qui peuvent être déplacées par drag & drop d'une colonne à une autre. Les éléments sont persistés dans le cache du navigateur entre chaque session.
J'ai beaucoup aimé le processus qu'il a employé. En effet, il est parti d'une maquette HTML statique, telle qu'on pourrait l'avoir présentée à un client pour réaliser l'écran. Il a commencé par intégrer le body dans le panel central GWT. Et au fur et à mesure, il a extrait des div ses composants colonne et tâche. Bref, une appli montée en une heure ! Ça donne envie en tout cas !

RoadMap

Les développements de la prochaine version GWT sont concentrés sur l'amélioration de la productivité du développeur, en améliorant notamment la compilation à chaud.

Conclusion

Comme je vous l'ai dit en introduction, j'ai beaucoup aimé cette présentation. Elle montre une approche différente, simplifiée par rapport aux versions antérieures à la 2.0. Si vous aussi vous êtes intéressé(e), n'hésitez pas à consulter le guide de développement de la dernière version (2.4), et à suivre les news du GTUG, que ce soit à Nantes ou ailleurs. Prochain rendez-vous à Nantes : Apéro Android, le 28 février à la Cantine Numérique.

2 commentaires

  1. J’ajouterai avec les version GWT 2.X, une meilleur gestion de la mémoire avec l’intégration de Guice via GIN.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.