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) /*-{ this.@com.zenika.gwt.Presenter::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