Présentation à Codedarmor le 7 février 2012 par Gregory Le Bonniec de la société Zenika sponsor officiel de la soirée. Il y a plus de 5 ans, GWT amena une approche singulière dans le développement Web : développer des applications javascript en java !? GWT permet de développer en Java aussi bien la couche serveur (ce qui est classique) que la couche cliente (ça l'est beaucoup moins). En effet, à l'aide d'un compilateur Java/Javascript, GWT permet de développer rapidement des applications web riches en simplifiant la construction IHM ainsi que les échanges client/serveur... les futurs développement HTML5 auront certainement besoin de GWT ...

1. GWT
maîtriser HTML 5 & Javascript sans en
écrire une seule ligne !

2. Moi en bref
• Grégory Le Bonniec
• Directeur Zenika Ouest
• Ancien IUT & ENSSAT Lannion
• Depuis plus de 10 dans le monde Java
de Swing à GWT en passant par les MOM et WS …

3. Zenika en bref
• Cabinet d’architecture technique
• Développement
• Conseil
• Formation
• Java mais pas que
Scala, AMQP, Scrum …
• Sponsor JUGs / Conférence What’s
Next / Conférence BreizhCamp

4. Google Web Toolkit

5. Application Web en 2012
=
HTML5 + CSS3 + Javascript
… en théorie

6. Javascript
Javascript est un langage puissant mais …
• Respect des standards à géométrie variable
• Langage difficile à maîtriser :
typage, débogage …
• Fuite mémoire difficile à éviter

7. Javascript + HTML
=
« Langage
assembleur du web »

8. GWT
Développer la
couche serveur en Java
(classique)
et la couche client en … Java
(moins classique)

9. Couche cliente Java
=
Applet ?

10. GWT
une technologie RIA
Java ou Javascript ?

11. GWT
=
Un compilateur
Java Javascript

12. Compilation

13. Deferred Binding
Code applicatif Code applicatif
Firefox Firefox
en_UK fr_FR
Un seul code
Java
Code applicatif Code applicatif
IE IE
en_UK fr_FR

14. Mode compilé
• Pay for what you use
• Compatibilité inter-navigateurs
• Optimisations multiples
• Taille
• Performances
Mais compilation relativement longue …

15. Mode développ.
• Mode interprété
• Communication IDE / Navigateur (via un
plugin)
• Permet de tester les développement « en
live »
Mais performances dégradées …

16. application GWT
=
application web Java
« classique »

17. DEMO #1

18. UIBinder
• Java n’est pas un langage idéal pour la
description d’IHM
• UIBinder a permis de pallier ce problème
• Principes d’UIBinder
• Description XML du look d’un coté
• Comportement de l’IHM via du code Java
• Liaison différée entre description et comportement

19. <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:c="urn:import:com.zenika.resanet.gwt.client.ui">
<g:VerticalPanel>
<g:HTML><h1> Recherche de transport </h1></g:HTML>
<g:Label ui:field="erreur" />
<g:HTMLPanel>
<table>
<tr>
<td><g:Label text="Ville de départ : "/></td>
<td><g:ListBox ui:field="villeDepart"/></td>
</tr>
<tr>
<td><g:Label text="Ville d'arrivée : "/></td>
<td><g:ListBox ui:field="villeArrivee"/></td>
</tr>
<tr>
<td><g:Label text="Date départ (dd/mm/yyyy) : "/></td>
<td><c:DatePickerJS ui:field="dateDepart"/></td>
</tr>
<tr>
<td><g:Label text="Nbr Voyageurs : "/></td>
<td><g:TextBox ui:field="nbrVoyageurs"/></td>
</tr>
<tr>
<td><g:Button ui:field="reset" text="Réinitialiser" /></td>
<td><g:Button ui:field="recherche" text="Lancer recherche" /> </td>
</tr>
</table>
</g:HTMLPanel>
</g:VerticalPanel>
</ui:UiBinder>

20. public class TransportRecherchePanel extends Composite {
@UiTemplate("TransportRecherchePanel.ui.xml")
interface MyUiBinder extends UiBinder<Widget, TransportRecherchePanel> {
}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
@UiField
ListBox villeDepart; @UiTemplate spécifie le fichier correspondant
à l'écran XML
@UiField
ListBox villeArrivee;
@UiField
DatePickerJS dateDepart;
@UiField @UiField associe la variable java avec l'attribut
TextBox nbrVoyageurs;
ui:field côté XML
@UiField
Label erreur;
public TransportRecherchePanel() {
initWidget(uiBinder.createAndBindUi(this));
}

21. DEMO #2

22. RPC
• GWT fournit un système de communication
client serveur
• Simple
• Performant
• Transparent
• Standard
• « Java vers Java »

23. Objets Java sérialisés
data
Application réseau JEE
HTML
GWT
Client Serveur
data

24. Mise en œuvre
• Coté client
• Définition d’une interface synchrone
• Définition d’une interface asynchrone
• Coté serveur
• Implémentation de l’interface synchrone

25. Asynchrone ?
• GWT force le développeur a implémenté des
appels serveur asynchrones
• Plus complexe
• Plus verbeux
• Alors pourquoi ?
Les navigateurs sont « mono-threadés » toute
action est bloquante coté client

26. DEMO #3

27. Je veux du HTML5 !
HTML5 c’est quoi ?
• Eléments et attributs DOM
• API (draggable, offline, canvas …)
• WebSocket
• CSS3

28. Encore en chantier !

29. Oui mais …
qu’on aime JS ou pas…HTML5 n’a d’intérêt que
couplé à Javascript !
Il faudra des outils pour mettre en œuvre
HTML5 (non ça n’est pas plus magique que
HTML4 !)
GWT est un des candidats

30. Local Storage
• Stockage de données persistantes coté client
• Local Storage vs. Cookie
• Plusieurs Mo vs. Quelques Ko
• Non transmis au serveur vs. Transmis à chaque
requête
• Pourquoi ?
• Performances
• Offline

31. Canvas
• Canvas = Zone graphique de dessin
• Graphique 2D supporté par l’ensemble des
navigateurs
• Graphique 3D à venir …

32. Draggable
• DnD Pas vraiment une nouveauté dans le
monde Web
• HTML5 apporte une solution native (enfin !)

33. DEMO #4

34. Boite à outils
• GWT n’est pas un framework
• GWT est une plateforme de développement
• GWT fournit de nombreux outils
• Optimisation des ressources (RessourceBundle)
• Chargement de données volumineuses
(IncrementalCommand)
• Modularité de l’application (Code Splitting)
• …

35. IncrementalCommand
• Afficher des données volumineuses dans un
navigateur se conclut le plus souvent par une
page blanche
• GWT fournit la classe IncrementalCommand
pour afficher « proprement » ce type de
données

36. DEMO #5

37. Resources Web
• Une application Web (GWT ou autre) fournit
et manipule un ensemble de ressources
• Problématiques liées à la gestion de
ressources
• Overhead réseau
• Gestion du cache (ie. code 304 ("Not Modified"))
• Pool de connexions
• Inadéquation entre référence et emplacement physique
lors des développements

38. GWT à la rescousse
• ClientBundle a pour objectif d'assurer la
gestion des ressources statiques
• ClientBundle gère plusieurs types de
ressources
• ImageResource : Images (ie. PNG, GIF, JPEG …)
• CssResource : CSS
• DataResource : Données binaires (ie. PDF, Doc …)
• TextResource/ExternalTextResource : Ressources
texte interne (ie. XML, properties …)

39. DEMO #6

40. Et Javascript ?
• Il est possible d’appeler du Javascript depuis
GWT
• JSNI = bridge Java/Javascript
• Peut être utile mais
• Fuite mémoire
• Compatibilité inter-navigateurs
• …

41. JSNI
…
public native void alert(String msg) /*-{
$wnd.alert(msg);
}-*/;
…
Code Javascript

42. Appeler du Java depuis JS !
public void infos(String message) {
…
}
public native void afficherInfos(String msg) /*-{
this.@com.zenika.gwt.Presenter::infos(Ljava/lang/String;)(msg)
}-*/;

43. Bonnes pratiques
• Gestion événementielle
• EventBus
• MVP
• Injection de dépendances

44. GWT et idées reçues
• Un développeur GWT n’est pas un
développeur Web
• On développe une application GWT
comme une application client lourd

45. GWT ou pas ?
Idéal pour une application web
• Application riche
• Simple…après quelques semaines !
• Rapide
Mais
• API minimaliste
• Verbeux comparé à JS

46. 01/03/2012