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

Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Embed Size (px)

DESCRIPTION

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 ...

Citation preview

Page 1: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

GWTmaîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Page 2: Codedarmor 2012 - 07/02 - GWT, maî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 …

Page 3: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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

Page 4: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Google Web Toolkit

Page 5: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Application Web en 2012

=HTML5 + CSS3 +

Javascript… en théorie

Page 6: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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

Page 7: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Javascript + HTML=

« Langage assembleur du web »

Page 8: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Développer lacouche serveur en Java

(classique)et la couche client en … Java (moins classique)

GWT

Page 9: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Couche cliente Java=

Applet ?

Page 10: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

GWTune technologie RIAJava ou Javascript ?

Page 11: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

GWT=

Un compilateurJava Javascript

Page 12: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Compilation

Page 13: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Deferred BindingCode applicatif

Firefox

en_UK

Code applicatif

IE

en_UK

Code applicatif

Firefox

fr_FR

Code applicatif

IE

fr_FR

Un seul codeJava

Page 14: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• Pay for what you use• Compatibilité inter-navigateurs• Optimisations multiples

• Taille• Performances

Mais compilation relativement longue …

Mode compilé

Page 15: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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.

Page 16: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

application GWT=

application web Java « classique »

Page 17: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

DEMO #1

Page 18: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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

Page 19: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

<!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>

Page 20: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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

Page 21: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

DEMO #2

Page 22: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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

RPC

Page 23: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Objets Java sérialisés

Client

ApplicationGWT

HTML

Serveur

JEEréseau

data

data

Page 24: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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

Page 25: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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 ?

Page 26: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

DEMO #3

Page 27: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

HTML5 c’est quoi ?• Eléments et attributs DOM• API (draggable, offline, canvas …)• WebSocket• CSS3

Je veux du HTML5 !

Page 28: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Encore en chantier !

Page 29: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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 …

Page 30: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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

Page 31: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• Canvas = Zone graphique de dessin

• Graphique 2D supporté par l’ensemble des navigateurs

• Graphique 3D à venir …

Canvas

Page 32: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• DnD Pas vraiment une nouveauté dans le monde Web

• HTML5 apporte une solution native (enfin !)

Draggable

Page 33: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

DEMO #4

Page 34: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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

Page 35: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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

Page 36: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

DEMO #5

Page 37: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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

Page 38: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

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 …)

Page 39: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

DEMO #6

Page 40: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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 ?

Page 41: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

JSNI

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

Code Javascript

Page 42: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Appeler du Java depuis JS !

public void infos(String message) {…

}

public native void afficherInfos(String msg) /*-{ [email protected]::infos(Ljava/lang/String;)(msg)}-*/;

Page 43: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• Gestion événementielle• EventBus• MVP• Injection de dépendances

Bonnes pratiques

Page 44: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

• 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

Page 45: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

Idéal pour une application web• Application riche• Simple…après quelques semaines !• Rapide

Mais• API minimaliste• Verbeux comparé à JS

GWT ou pas ?

Page 46: Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

06/02/2012