Upload
codedarmor
View
1.363
Download
2
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
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