GWTmaîtriser HTML 5 & Javascript sans en écrire une seule ligne !
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 …
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
Google Web Toolkit
Application Web en 2012
=HTML5 + CSS3 +
Javascript… en théorie
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
Javascript
Javascript + HTML=
« Langage assembleur du web »
Développer lacouche serveur en Java
(classique)et la couche client en … Java (moins classique)
GWT
Couche cliente Java=
Applet ?
GWTune technologie RIAJava ou Javascript ?
GWT=
Un compilateurJava Javascript
Compilation
Deferred BindingCode applicatif
Firefox
en_UK
Code applicatif
IE
en_UK
Code applicatif
Firefox
fr_FR
Code applicatif
IE
fr_FR
Un seul codeJava
• Pay for what you use• Compatibilité inter-navigateurs• Optimisations multiples
• Taille• Performances
Mais compilation relativement longue …
Mode compilé
• Mode interprété• Communication IDE / Navigateur (via un
plugin)• Permet de tester les développement « en
live »
Mais performances dégradées …
Mode développ.
application GWT=
application web Java « classique »
DEMO #1
• 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
UIBinder
<!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>
public class TransportRecherchePanel extends Composite {
@UiTemplate("TransportRecherchePanel.ui.xml")interface MyUiBinder extends UiBinder<Widget, TransportRecherchePanel> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
@UiFieldListBox villeDepart;
@UiFieldListBox villeArrivee;
@UiFieldDatePickerJS dateDepart;
@UiFieldTextBox nbrVoyageurs;
@UiFieldLabel erreur;
public TransportRecherchePanel() {initWidget(uiBinder.createAndBindUi(this));
}
@UiField associe la variable java avec l'attribut ui:field côté XML
@UiTemplate spécifie le fichier correspondant à l'écran XML
DEMO #2
• GWT fournit un système de communication client serveur• Simple• Performant• Transparent• Standard• « Java vers Java »
RPC
Objets Java sérialisés
Client
ApplicationGWT
HTML
Serveur
JEEréseau
data
data
• Coté client• Définition d’une interface synchrone• Définition d’une interface asynchrone
• Coté serveur• Implémentation de l’interface synchrone
Mise en œuvre
• 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
Asynchrone ?
DEMO #3
HTML5 c’est quoi ?• Eléments et attributs DOM• API (draggable, offline, canvas …)• WebSocket• CSS3
Je veux du HTML5 !
Encore en chantier !
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
Oui mais …
• 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
Local Storage
• Canvas = Zone graphique de dessin
• Graphique 2D supporté par l’ensemble des navigateurs
• Graphique 3D à venir …
Canvas
• DnD Pas vraiment une nouveauté dans le monde Web
• HTML5 apporte une solution native (enfin !)
Draggable
DEMO #4
• 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)• …
Boite à outils
• 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
IncrementalCommand
DEMO #5
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
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 …)
DEMO #6
• Il est possible d’appeler du Javascript depuis GWT
• JSNI = bridge Java/Javascript• Peut être utile mais
• Fuite mémoire• Compatibilité inter-navigateurs• …
Et Javascript ?
JSNI
…public native void alert(String msg) /*-{ $wnd.alert(msg);}-*/;…
Code Javascript
Appeler du Java depuis JS !
public void infos(String message) {…
}
public native void afficherInfos(String msg) /*-{ [email protected]::infos(Ljava/lang/String;)(msg)}-*/;
• Gestion événementielle• EventBus• MVP• Injection de dépendances
Bonnes pratiques
• Un développeur GWT n’est pas un développeur Web
• On développe une application GWT comme une application client lourd
GWT et idées reçues
Idéal pour une application web• Application riche• Simple…après quelques semaines !• Rapide
Mais• API minimaliste• Verbeux comparé à JS
GWT ou pas ?
06/02/2012
Recommended
