GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013

GWTGWT,, quoi de neuf?quoi de neuf?
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Présentation au
GDG/GTUG Montréal
par
Claude Coulombe

ButBut
Dans cette présentation vous verrez comment le GoogleDans cette présentation vous verrez comment le Google
Web Toolkit (GWT) permet le développement d'applicationsWeb Toolkit (GWT) permet le développement d'applications
WebWeb riches (RIA) dotées d'interfacesriches (RIA) dotées d'interfaces complexes etcomplexes et
d'applications mobiles multiplateformes performantes.d'applications mobiles multiplateformes performantes.
http://code.google.com/webtoolkit/
http://www.gwtproject.com

Web 1.0Web 1.0 – Cliquez & attendez!– Cliquez & attendez!
* Source Clipart : http://www.clipart.com

Web 2.0 –Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »

AjaxAjax – Une véritable percée!– Une véritable percée!
AJAXAJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005
Echange asynchrone
+
Modification de
fragments de page

Créer des applications Web richesCréer des applications Web riches
 Applications Web semblables à des applications bureautiques enApplications Web semblables à des applications bureautiques en
exécution locale (Desktop Like)exécution locale (Desktop Like)
 Interfaces Web riches / RIA (Rich Internet Application)Interfaces Web riches / RIA (Rich Internet Application)
 Interfaces rapides et réactivesInterfaces rapides et réactives
 Ouverture de plusieurs fenêtres à la fois dans le navigateur (app.Ouverture de plusieurs fenêtres à la fois dans le navigateur (app.
multifenêtres)multifenêtres)
 Déplacement des fenêtres dans le navigateur, redimensionnementDéplacement des fenêtres dans le navigateur, redimensionnement
et défilement des fenêtreset défilement des fenêtres
 Glisser et déposer des contenusGlisser et déposer des contenus
 Passage d'applications centrées sur le serveur à des applicationsPassage d'applications centrées sur le serveur à des applications
centrées sur le clientcentrées sur le client
 Application avec état (statefull) => sans état (stateless)Application avec état (statefull) => sans état (stateless)
 Des applications monopages (SPI) qui manipulent le DOMDes applications monopages (SPI) qui manipulent le DOM
 Des applications mobiles multiplateformes performantesDes applications mobiles multiplateformes performantes

Made in JavaScript
Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?

JavaScript est eJavaScript est excellent pour l'écriture rapide de petites applicationsxcellent pour l'écriture rapide de petites applications
Le typage dynamique est une source importante d'erreurs qui passentLe typage dynamique est une source importante d'erreurs qui passent
inaperçues jusqu'au moment de l'exécutioninaperçues jusqu'au moment de l'exécution
Pas d'espace de nommage (collision de variables), manque de modularitéPas d'espace de nommage (collision de variables), manque de modularité
et de capacité à grandir, pas un véritable langage à objetset de capacité à grandir, pas un véritable langage à objets
Mise au point et réutilisation difficilesMise au point et réutilisation difficiles
Incompatibilité entre les fureteursIncompatibilité entre les fureteurs
Fuites de mémoireFuites de mémoire
NNormal, car JS n'a pas été conçu pour de gros logiciels, mais pour mettreormal, car JS n'a pas été conçu pour de gros logiciels, mais pour mettre
un peu d'interactivité dans une page webun peu d'interactivité dans une page web
On peut voir le JavaScript comme le langage d'assemblage (assembleur)On peut voir le JavaScript comme le langage d'assemblage (assembleur)
du fureteurdu fureteur
Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?

GWT = Ajax + Génie LogicielGWT = Ajax + Génie Logiciel
GWT =GWT =
* Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com
AJAXAJAX
++
Génie logicielGénie logiciel

 Support du cycle de vie complet du logicielSupport du cycle de vie complet du logiciel
 Outil interactif de construction d'IU (Outil interactif de construction d'IU (GWT DesignerGWT Designer))
 Outil de construction d'IU déclaratif XML (Outil de construction d'IU déclaratif XML (UiBinderUiBinder))
 Outil de mesure des performances (Outil de mesure des performances (Speed TracerSpeed Tracer))
 Plugiciel pourPlugiciel pour EclipseEclipse
Support au débogageSupport au débogage
Mise au point & débogage en mode devMise au point & débogage en mode dev
Cycle : édition / test / débogage /Cycle : édition / test / débogage /
Restructuration / refactorisation (refactoring)‫‏‬Restructuration / refactorisation (refactoring)‫‏‬
Détection d'erreurs à la compilationDétection d'erreurs à la compilation
Journalisation (logging)‫‏‬Journalisation (logging)‫‏‬
 Patrons de conception OO éprouvésPatrons de conception OO éprouvés
Composite / observateur / MVC / MVP / commande / bus d'événementsComposite / observateur / MVC / MVP / commande / bus d'événements
 Support deSupport de JUnitJUnit
 Support deSupport de AppEngineAppEngine et autres APIs de Googleet autres APIs de Google
GWT = Ajax + Génie LogicielGWT = Ajax + Génie Logiciel

Comprendre GWTComprendre GWT
GWTGWT

Application GWTApplication GWT –– Client & ServeurClient & Serveur
Le code-client en JavaScript
est transmis sur le réseau
vers un ordinateur-client, où
il s'exécute dans un fureteur
Web
Le code (en Java ou tout autre
langage) qui s'exécute sur le
serveur est responsable de la
logique de l'application.
L'application Web utilise le
serveur pour charger ou
sauvegarder des données.

Transcompilateur Java à JavaScriptTranscompilateur Java à JavaScript
Java
JavaScript
Run Everywhere!
Write Once...

Transcompilateur Java à JavaScriptTranscompilateur Java à JavaScript
Transcompilateur GWT prend du code-client en Java etTranscompilateur GWT prend du code-client en Java et
produit du code JavaScript optimiséproduit du code JavaScript optimisé
JavaScript devient le code assembleur du fureteurJavaScript devient le code assembleur du fureteur
Élimination du code non-utilisé dans les bibliothèques,Élimination du code non-utilisé dans les bibliothèques,
inférence de type, retrait du polymorphisme,inférence de type, retrait du polymorphisme,
compression “agressive” du code, « Obfuscation »compression “agressive” du code, « Obfuscation »
Le JavaScript produit est généralement plus rapide queLe JavaScript produit est généralement plus rapide que
du JavaScript écrit à la main*du JavaScript écrit à la main*
Emploi de la liaison différée (“Deferred Binding”) pourEmploi de la liaison différée (“Deferred Binding”) pour
produire du code JavaScript optimal pour chaqueproduire du code JavaScript optimal pour chaque
fureteur (i.e. génère du code spécifique à chaquefureteur (i.e. génère du code spécifique à chaque
fureteur)fureteur)
« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
* Note : sauf si code < 100 lignes* Note : sauf si code < 100 lignes

Transcompilateur-Transcompilateur- Liaison différéeLiaison différée
« Ne payez que pour ce que vous utilisez »
Copyright Google 2008
* Source : http://www.google.com
Générer du code optimal et spécifique à chaque fureteurGénérer du code optimal et spécifique à chaque fureteur

Structure d'un projet GWTStructure d'un projet GWT
MaPremiereAppli/
src/
PaquetConfig/
MaPremiereAppli.gwt.xml
PaquetClient
MonPremierService.java
MonPremierServiceAsync.java
MaPremiereAppli.java
PaquetServeur
MaPremiereAppli.java
META-INF/
jdoconfig.xml
log4j.properties
war/
mapremierappligwt/
… résultats compilation en JS ...
WEB-INF/
lib/
...App Engine JARs...
appengine-web.xml
logging.properties
web.xml
MaPremiereAppli.css
MaPremiereAppli.html

« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
Copyright Google 2008Copyright Google 2008
* Source : http://www.google.com* Source : http://www.google.com
Transcompilateur – Code optimisé!Transcompilateur – Code optimisé!

Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur

GWT en « mode dev »GWT en « mode dev » -- DéveloppementDéveloppement

GWT en « mode dev »GWT en « mode dev » -- DéveloppementDéveloppement
Dans Eclipse, une application GWT peutDans Eclipse, une application GWT peut
s'exécuter en « mode dev »s'exécuter en « mode dev » (“Development Mode”)‫‏‬(“Development Mode”)‫‏‬
En « mode dev », la JVM exécute le code GWTEn « mode dev », la JVM exécute le code GWT
comme du bytecode Java à l'intérieur d'unecomme du bytecode Java à l'intérieur d'une
fenêtre de navigateur Webfenêtre de navigateur Web
Le « mode dev » facilite la mise-au-point :Le « mode dev » facilite la mise-au-point :
Éditer le code-sourceÉditer le code-source
RafraîchirRafraîchir
Examiner les résultatsExaminer les résultats

GWT en « mode Web » - DéploiementGWT en « mode Web » - Déploiement
 Une fois testé en « mode dev », vous pouvezUne fois testé en « mode dev », vous pouvez
compiler votre code source Java en JavaScript etcompiler votre code source Java en JavaScript et
déployer votre application Webdéployer votre application Web
 Une application Web GWT qui a été déployée estUne application Web GWT qui a été déployée est
dite en « mode Web »dite en « mode Web »
 Une fois compilé le code-client est uniquement duUne fois compilé le code-client est uniquement du
pur JavaScript et du HTMLpur JavaScript et du HTML
 Afin de déployer votre application Web enAfin de déployer votre application Web en
production, vous déplacez les fichiers du répertoireproduction, vous déplacez les fichiers du répertoire
« war » sur le serveur Web, i.e. Tomcat« war » sur le serveur Web, i.e. Tomcat

GWT DesignerGWT Designer

 Éditeur graphique interactif d'IUÉditeur graphique interactif d'IU
 Racheté par Google de la société InstantiationsRacheté par Google de la société Instantiations
 Entièrement intégré à Eclipse via un plugicielEntièrement intégré à Eclipse via un plugiciel
 Génération de code bidirectionnelleGénération de code bidirectionnelle
 Alternance entre la vue Source et la vue DesignAlternance entre la vue Source et la vue Design
 Palette de composants avec glisser-déposerPalette de composants avec glisser-déposer
 Vue Structure avec l'arbre des composants et un panneauVue Structure avec l'arbre des composants et un panneau
pour l'édition des propriétéspour l'édition des propriétés
 I18NI18N
 Création de composants réutilisables (Composite)Création de composants réutilisables (Composite)
GWT DesignerGWT Designer

 Outil de conception d'interface-utilisateur à partir d'uneOutil de conception d'interface-utilisateur à partir d'une
représentation XML, sans programmationreprésentation XML, sans programmation
 Facilite le découplage entre la disposition du contenuFacilite le découplage entre la disposition du contenu
en XML, le code du comportement en Java eten XML, le code du comportement en Java et
l'apparence gouvernée par des feuilles de style CSSl'apparence gouvernée par des feuilles de style CSS
<!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">
<g:HTMLPanel width="450px" height="300px">
<g:VerticalPanel width="450px" height="300px" horizontalAlignment="ALIGN_CENTER">
<g:Cell horizontalAlignment="ALIGN_CENTER">
<g:Label styleName="{style.titreJeu}" text="Jeux des trois portes (Monty Hall Problem)" width="450px" height="20px"
horizontalAlignment="ALIGN_CENTER"/>
</g:Cell>
<g:Cell horizontalAlignment="ALIGN_CENTER">
UiBinderUiBinder

Speed TracerSpeed Tracer (extension dans Chrome)(extension dans Chrome)

GWTGWT –– Structure bibliothèque & APIStructure bibliothèque & API

BibliothèqueBibliothèque
IUGIUG
Widgets &Widgets &
PanelsPanels
CommunicationCommunication
avec le serveuravec le serveur
RPC & AjaxRPC & Ajax
AnalyseurAnalyseur
XMLXML
Gestion deGestion de
l'historiquel'historique
IntégrationIntégration
à JUnità JUnit
GWT APIGWT API
TransTrans
compilateurcompilateur
Java àJava à
JavaScriptJavaScript
InterfaceInterface
NativeNative
JavaScriptJavaScript
JSNIJSNI
BibliothèqueBibliothèque
d'émulationd'émulation
JREJRE
La structure du gwt-user.jarLa structure du gwt-user.jar
GWTGWT –– Structure bibliothèque & APIStructure bibliothèque & API
Note : Transcompilateur GWTNote : Transcompilateur GWT
dans gwt-dev-windows.jardans gwt-dev-windows.jar

Emulation – JREEmulation – JRE (Java Runtime Environment)(Java Runtime Environment)
Le transcompilateur de GWT fournit l'émulation enLe transcompilateur de GWT fournit l'émulation en
JavaScript d'un sous-ensemble du langage Java (JRE)JavaScript d'un sous-ensemble du langage Java (JRE)
généralement utilisé pour la programmation de basegénéralement utilisé pour la programmation de base
java.lang, java.util, java.io, java.sqljava.lang, java.util, java.io, java.sql
Restriction pour le code clientRestriction pour le code client
devant être traduit en JavaScript.devant être traduit en JavaScript.
Aucune restriction n'est imposéeAucune restriction n'est imposée
du côté du code serveur : Javadu côté du code serveur : Java
(JSP/JSF/Servlet), PHP,(JSP/JSF/Servlet), PHP,
ASP .NET, Perl, RoR, Python, Perl, ...ASP .NET, Perl, RoR, Python, Perl, ...
* Source image : http://www.sun.com* Source image : http://www.sun.com

JSNI : JavaScript Native InterfaceJSNI : JavaScript Native Interface
Intégration facile avec des bibliothèques JavaScriptIntégration facile avec des bibliothèques JavaScript
externes grâce au JavaScript Native Interface (JSNI)‫‏‬externes grâce au JavaScript Native Interface (JSNI)‫‏‬
Interagir directement avec JavaScript (accès natif) à partirInteragir directement avec JavaScript (accès natif) à partir
de Java et vice-versade Java et vice-versa
Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript
JavaScript Overlay pour simplifier l'intégration deJavaScript Overlay pour simplifier l'intégration de
prototypes JavaScript dans GWTprototypes JavaScript dans GWT
// Déclaration d'une méthode JavaScript en Java...// Déclaration d'une méthode JavaScript en Java...
native String inverserNomPrenom(String nom)native String inverserNomPrenom(String nom)
/*-{/*-{
// Implémentation en JavaScript// Implémentation en JavaScript
var re = /(w+)s(w+)/;var re = /(w+)s(w+)/;
return name.replace(re, '$2, $1');return name.replace(re, '$2, $1');
}-*/;}-*/;

JSNI : JavaScript Type OverlayJSNI : JavaScript Type Overlay
JavaScript Type Overlay pour simplifier l'intégration de prototypesJavaScript Type Overlay pour simplifier l'intégration de prototypes
JavaScript dans GWTJavaScript dans GWT
Une structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation)
var personnesJSON = [var personnesJSON = [
{ "Prenom" : "Nathalie", "NomFamille" : "Tremblay" }, { "Prenom" : "Jean", "NomFamille" : "Dupont" },{ "Prenom" : "Nathalie", "NomFamille" : "Tremblay" }, { "Prenom" : "Jean", "NomFamille" : "Dupont" },
{ "Prenom" : "Bill", "NomFamille" : "Gates" }, { "Prenom" : "Steve", "NomFamille" : "Jobs" }{ "Prenom" : "Bill", "NomFamille" : "Gates" }, { "Prenom" : "Steve", "NomFamille" : "Jobs" }
];];
// Un type Overlay JavaScript// Un type Overlay JavaScript
class Personne extends JavaScriptObject {class Personne extends JavaScriptObject {
// Un type Overlay JS a toujours un constructeur protected, à zéro argument// Un type Overlay JS a toujours un constructeur protected, à zéro argument
protected Personne() { }protected Personne() { }
// Les méthodes dans un Overlay JavaScript sont en JSNI// Les méthodes dans un Overlay JavaScript sont en JSNI
public final native String getPrenom() /*-{ return this.Prenom; }-*/;public final native String getPrenom() /*-{ return this.Prenom; }-*/;
public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;
// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI
public final String getNomComplet() {public final String getNomComplet() {
return getPrenom() + " " + getNomFamille();return getPrenom() + " " + getNomFamille();
}}
}}

JSNI : Type Overlay JavaScriptJSNI : Type Overlay JavaScript
// Obtenir un prototype JavaScript pour l'Overlay// Obtenir un prototype JavaScript pour l'Overlay
class MonModuleEntryPoint implements EntryPoint {class MonModuleEntryPoint implements EntryPoint {
public void onModuleLoad() {public void onModuleLoad() {
Personne p = getPremierePersonne();Personne p = getPremierePersonne();
// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi une Personne// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi une Personne
Window.alert("Bonjour, " + p.getPrenom());Window.alert("Bonjour, " + p.getPrenom());
}}
// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons
// Le prototype JSON object reçoit un type Java implicitement// Le prototype JSON object reçoit un type Java implicitement
// en se basant sur le type retourné par la méthode// en se basant sur le type retourné par la méthode
private native Personne getPremierePersonne() /*-{private native Personne getPremierePersonne() /*-{
// Obtenir une référence à la première Personne dans le tableau JSON// Obtenir une référence à la première Personne dans le tableau JSON
return $wnd.personnesJSON[0];return $wnd.personnesJSON[0];
}-*/;}-*/;
}}
* Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com

Bibliothèque de composants d'IUBibliothèque de composants d'IU

IUIU – Programmation par événements– Programmation par événements
Essentiellement de la programmation par événementsEssentiellement de la programmation par événements
Une méthode ou procédure s'exécute quand unUne méthode ou procédure s'exécute quand un
événement est déclenchéévénement est déclenché
Dans une IU, un événement est déclenché chaque foisDans une IU, un événement est déclenché chaque fois
que l'utilisateur clique sur la souris, appuie sur uneque l'utilisateur clique sur la souris, appuie sur une
touche du clavier, sélectionne un élément dans untouche du clavier, sélectionne un élément dans un
menu, ouvre ou ferme une fenêtre, etc.menu, ouvre ou ferme une fenêtre, etc.
À chaque composant de l'IU appelé aussi contrôle ouÀ chaque composant de l'IU appelé aussi contrôle ou
widget (comme un bouton, un menu, etc.) est associéwidget (comme un bouton, un menu, etc.) est associé
un ou plusieurs gestionnaires d'événements (Handler)un ou plusieurs gestionnaires d'événements (Handler)
qui peuvent comporter des paramètresqui peuvent comporter des paramètres

IU - Gestion des événementsIU - Gestion des événements
 GWT utilise le concept de gestionnaire d'événementGWT utilise le concept de gestionnaire d'événement
(handler interface) pour traiter les événements(handler interface) pour traiter les événements
 Semblable à d'autres bibliothèques Java pour laSemblable à d'autres bibliothèques Java pour la
programmation d'IU comme SWINGprogrammation d'IU comme SWING
 Le gestionnaire via l'interface “handler interface”Le gestionnaire via l'interface “handler interface”
définit une ou plusieurs méthodes que le widgetdéfinit une ou plusieurs méthodes que le widget
appelle en réaction à un événementappelle en réaction à un événement
Button unBouton = new Button("Cliquez moi!");Button unBouton = new Button("Cliquez moi!");
unBouton.addClickHandler( new ClickHandler() {unBouton.addClickHandler( new ClickHandler() {
public void onClick(ClickEvent event) {public void onClick(ClickEvent event) {
Window.alert("Bouton cliqué!");Window.alert("Bouton cliqué!");
}}
});});

IU – Bibliothèque de composantsIU – Bibliothèque de composants
Éléments statiques: étiquetteÉléments statiques: étiquette ((LabelLabel), HTML, Image, hyperlien (), HTML, Image, hyperlien (HyperlinkHyperlink), champ), champ
caché (caché (HiddenHidden))
Widgets (E/S) : bouton (Widgets (E/S) : bouton (ButtonButton), bouton poussoir (), bouton poussoir (PushButtonPushButton), bouton à bascule), bouton à bascule
((ToggleButtonToggleButton), case à cocher (), case à cocher (CheckBoxCheckBox), bouton radio (), bouton radio (RadioButtonRadioButton), menu déroulant), menu déroulant
((ListBoxListBox), zone de texte (), zone de texte (TextBoxTextBox), zone de texte avec suggestions (), zone de texte avec suggestions (SuggestBoxSuggestBox), zone), zone
d'entrée de mot de passe (d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), zone), zone
d'édition de texte enrichi (d'édition de texte enrichi (RichTextAreaRichTextArea))
Widgets complexes : arbre (Widgets complexes : arbre (TreeTree), barre de menus (), barre de menus (MenuBarMenuBar), téléversement de), téléversement de
fichiers (fichiers (FileUploadFileUpload))
Panneaux de disposition simple : panneau en file (Panneaux de disposition simple : panneau en file (FlowPanelFlowPanel), panneau horizontal), panneau horizontal
((Horizontal PanelHorizontal Panel), panneau vertical (), panneau vertical (VerticalPanelVerticalPanel), panneau à coulisse (), panneau à coulisse (SplitPanelSplitPanel),),
panneau HTML (panneau HTML (HTMLPanelHTMLPanel), panneau superposé (), panneau superposé (TabLayoutPanelTabLayoutPanel))
Panneaux de disposition complexe : table flexible* (Panneaux de disposition complexe : table flexible* (FlexTableFlexTable), grille (), grille (GridGrid), panneau), panneau
polyptyque*polyptyque* (DockLayoutPanel),(DockLayoutPanel), panneau à onglets (panneau à onglets (TabLayoutPanelTabLayoutPanel), panneau en pile), panneau en pile
((StackLayoutPanelStackLayoutPanel))
Panneaux conteneurs simples : panneau composite ou composite (Panneaux conteneurs simples : panneau composite ou composite (CompositeComposite) panneau) panneau
simple (simple (SimplePanelSimplePanel), panneau à barre de défilement (), panneau à barre de défilement (ScrollPanelScrollPanel), panneau de focus), panneau de focus
((FocusPanelFocusPanel))
Panneaux conteneurs complexes : panneau de formulaire (Panneaux conteneurs complexes : panneau de formulaire (FormPanelFormPanel), panneau à), panneau à
dévoilement* (dévoilement* (DisclosurePanelDisclosurePanel), panneau surprise* (), panneau surprise* (PopupPanelPopupPanel), boîte de dialogue), boîte de dialogue
((DialogBoxDialogBox))
http://gwt.google.com/samples/Showcase/Showcase.htmhttp://gwt.google.com/samples/Showcase/Showcase.htmll

Interface Utilisateur -Interface Utilisateur - PanneauxPanneaux
http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html
DockLayoutPanelDockLayoutPanel
TabLayoutPanelTabLayoutPanel
PopupPanelPopupPanel
HorizontalPanelHorizontalPanel
VerticalPanelVerticalPanel SplitLayoutPanelSplitLayoutPanel
SplitLayoutPanelSplitLayoutPanel
FlowPanelFlowPanel
DisclosurePanelDisclosurePanel

 La gestion de l'historique du navigateur s'occupe des boutons «La gestion de l'historique du navigateur s'occupe des boutons «
avancer » et « reculer » et des hyperliensavancer » et « reculer » et des hyperliens
 Une API simple de gestion de l'historique basée sur une pile deUne API simple de gestion de l'historique basée sur une pile de
jetonsjetons
Lorsque l'application démarre, la pile est videLorsque l'application démarre, la pile est vide
Lorsque l'utilisateur clique sur quelque choseLorsque l'utilisateur clique sur quelque chose
Vous pouvez ajouter des jetons sur la pileVous pouvez ajouter des jetons sur la pile
History.newItem(“nouveauJeton”)‫‏‬History.newItem(“nouveauJeton”)‫‏‬
 Classe Hyperlink ajoute des jetons automatiquementClasse Hyperlink ajoute des jetons automatiquement
Vous pouvez aussi réagir aux événements “History events” enVous pouvez aussi réagir aux événements “History events” en
utilisant un HistoryListenerutilisant un HistoryListener
History.addHistoryListener(controle)‫‏‬History.addHistoryListener(controle)‫‏‬
 Le mécanisme des Activities et Places (A&P) pour créer des URLsLe mécanisme des Activities et Places (A&P) pour créer des URLs
signables (bookmarkable)signables (bookmarkable)
Gestion de l'historique du navigateurGestion de l'historique du navigateur

Support des CSSSupport des CSS
 Séparation du code et de la présentationSéparation du code et de la présentation
 Code Java :Code Java :
public ListWidget(String Item) {public ListWidget(String Item) {
......
setStyleName(“gwt-ListWidget”);setStyleName(“gwt-ListWidget”);
}}
 Fichier CSS :Fichier CSS :
.gwt-ListWidget {.gwt-ListWidget {
background-color:black;background-color:black;
color:lime;color:lime;
}}

Support des CSS - conseilsSupport des CSS - conseils
Code Java : (usage de CSS primaire et dépendant)
MonPetitWidget monPW = new MonPetitWidget();MonPetitWidget monPW = new MonPetitWidget();
monPW.setStylePrimaryName("monPetitWidget");monPW.setStylePrimaryName("monPetitWidget");
monPW.addStyleDependentName("selected");monPW.addStyleDependentName("selected");
Fichier CSS :Fichier CSS :
.monpetitWidget {.monpetitWidget {
background-color:black;background-color:black;
color:lime;color:lime;
}}
.monPetitWidget .monPetitWidget-selected {.monPetitWidget .monPetitWidget-selected {
color:red;color:red;
}}
Permet de faire varier facilement l'apparence en fonction de l'étatPermet de faire varier facilement l'apparence en fonction de l'état
Note : Ne pas utiliser les CSS pour la dispositionNote : Ne pas utiliser les CSS pour la disposition
(ex.(ex. .monPetitWidget.monPetitWidget { position: absolute; }{ position: absolute; } ))

I18N – InternationalisationI18N – Internationalisation

I18NI18N
 Le transcompilateur GWT utilise la liaison différée («Le transcompilateur GWT utilise la liaison différée («
Deferred Binding ») pour générer une version différenteDeferred Binding ») pour générer une version différente
de l'application Web pour chaque languede l'application Web pour chaque langue
 Par exemple, puisque GWT supporte 5 navigateursPar exemple, puisque GWT supporte 5 navigateurs
différents, si votre application doit fonctionner en 3différents, si votre application doit fonctionner en 3
langues, le transcompilateur de GWT produira 15langues, le transcompilateur de GWT produira 15
versions différentes de votre application au moment deversions différentes de votre application au moment de
la compilationla compilation
 À l'exécution, GWT choisira la bonne version deÀ l'exécution, GWT choisira la bonne version de
l'application à montrer à l'utilisateurl'application à montrer à l'utilisateur

I18N –I18N – mécanismes de localisationmécanismes de localisation
 ““Constants” pour des chaînes constantes et des réglagesConstants” pour des chaînes constantes et des réglages
 ““Messages” pour les chaînes avec des argumentsMessages” pour les chaînes avec des arguments
 ““DateTimeFormat” pour les dates et l'heureDateTimeFormat” pour les dates et l'heure
 ““NumberFormat” pour les nombres et les unités de mesureNumberFormat” pour les nombres et les unités de mesure
 Pas de processus dynamique (tout est statique et fait à laPas de processus dynamique (tout est statique et fait à la
compilation), sinon il faut développer son propre mécanismecompilation), sinon il faut développer son propre mécanisme

Support de HTML5Support de HTML5
 Stockage dans le fureteur (local storage)Stockage dans le fureteur (local storage)
 Canvas – graphisme et animationCanvas – graphisme et animation
 AudioAudio
 VideoVideo
 Elemental LibraryElemental Library
Permet de travailler directement avec l'API HTML5 duPermet de travailler directement avec l'API HTML5 du
fureteurfureteur

Autres évolutionsAutres évolutions
 Chargement de code à la demande (code splitting) – GWT.runAsync(...)Chargement de code à la demande (code splitting) – GWT.runAsync(...)
 Gestion asynchrone des ressources (ClientBundle)Gestion asynchrone des ressources (ClientBundle)
 RequestFactory (nouveau modèle RPC)RequestFactory (nouveau modèle RPC)
 Support du patron de conception MVP (Modèle Vue Présentateur)Support du patron de conception MVP (Modèle Vue Présentateur)
 Bus d'événements (eventBus)Bus d'événements (eventBus)
 CellWidgets (composants légers à base de cellules typées)CellWidgets (composants légers à base de cellules typées)
 Socle Activités et Places (Actvities & Places)Socle Activités et Places (Actvities & Places)
 GIN (GWT INjection) – injection de dépendances dans GWT basé surGIN (GWT INjection) – injection de dépendances dans GWT basé sur
GuiceGuice
 Plugiciel Eclipse (Plugin)Plugiciel Eclipse (Plugin)
 Super DevMode de GWT 2.5 (avec SourceMaps pour établir laSuper DevMode de GWT 2.5 (avec SourceMaps pour établir la
correspondance Java <=> JavaScript)correspondance Java <=> JavaScript)
 Passage d'un placement (layout) par tableaux à un placement CSSPassage d'un placement (layout) par tableaux à un placement CSS
 GXT (ExtJS), SmartGWT, GWT-DnD, GChart, Vaadin, GWTP (Arcbees QC!)GXT (ExtJS), SmartGWT, GWT-DnD, GChart, Vaadin, GWTP (Arcbees QC!)

Communication client-serveur & AjaxCommunication client-serveur & Ajax

Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax
Serveur
avec état
(statefull)
Serveur
sans état
(stateless)
Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes
Client HTML
(fureteur)
sans état
(stateless)
Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes
Client JavaScript
(fureteur)
avec état
(statefull)

Communication avec le serveur & AjaxCommunication avec le serveur & Ajax
RPC (« Remote Procedure Call »)‫,‏‬ appel de procédure à distanceRPC (« Remote Procedure Call »)‫,‏‬ appel de procédure à distance
RPC rend facile l'échange d'objets Java ou POJOS (sérialisés)RPC rend facile l'échange d'objets Java ou POJOS (sérialisés)
entre le code-client et le code-serveurentre le code-client et le code-serveur
GWT RPC fournit une procédure automatique de sérialisation desGWT RPC fournit une procédure automatique de sérialisation des
objetsobjets
Autres outils Ajax :Autres outils Ajax :
RequestBuilderRequestBuilder
RequestFactoryRequestFactory
HTTPRequestHTTPRequest
FormPanelFormPanel
Support de :Support de :
XMLXML
JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)

Appel de procédure à distanceAppel de procédure à distance
J
GWT offre le très utile mécanisme d'appel de procédure à distance ou RPCGWT offre le très utile mécanisme d'appel de procédure à distance ou RPC
(Remote Procedure Call), comme moyen de communiquer avec les services(Remote Procedure Call), comme moyen de communiquer avec les services
hébergés sur un serveur JEE. Client et serveur parlent alors le même langage,hébergés sur un serveur JEE. Client et serveur parlent alors le même langage,
i.e. le Javai.e. le Java

public class MonClientRPC implements EntryPoint {public class MonClientRPC implements EntryPoint {
public void onModuleLoad() {public void onModuleLoad() {
final Button bouton = new Button("Appel RPC");final Button bouton = new Button("Appel RPC");
final MonServiceAsync serviceProxy =final MonServiceAsync serviceProxy =
(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);
ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;
pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");
bouton.addClickListener(new ClickListener( ) {bouton.addClickListener(new ClickListener( ) {
public void onClick(Widget emetteur) {public void onClick(Widget emetteur) {
AsyncCallback maProcedureDeRappel = new AsyncCallback() {AsyncCallback maProcedureDeRappel = new AsyncCallback() {
public void onSuccess(Object resultat) {public void onSuccess(Object resultat) {
MesDonneesDO resultatDO = (MesDonneesDO) resultat;MesDonneesDO resultatDO = (MesDonneesDO) resultat;
System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees());System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees());
}}
public void onFailure(Throwable erreur) {public void onFailure(Throwable erreur) {
System.out.println("*** ERREUR RPC ***" + erreur.getMessage());System.out.println("*** ERREUR RPC ***" + erreur.getMessage());
}}
};};
serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);
}});}});
RootPanel.get("emprise1").add(bouton);RootPanel.get("emprise1").add(bouton);
}}
}}
RPC - Code-clientRPC - Code-client

Services REST avec RequestBuilderServices REST avec RequestBuilder
RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL.encode(url));
try {
builder.sendRequest(null, new RequestCallback() {
@Override
public void onError(Request request, Throwable exception) {
// Incapable de se connecter au serveur (Timeout, violation SOP, etc.)
}
public void onResponseReceived(Request request, Response response {
if (200 == response.getStatusCode()) {
// Traiter la réponse du serveur dans response.getText()
} else {
// Traiter une erreur de traitement du côté serveur
}
}
});
} catch (RequestException e) {
// Traiter une erreur de requête
}

Intégration facile aux APIs GoogleIntégration facile aux APIs Google

Intégration facile aux APIs GoogleIntégration facile aux APIs Google
 Google a un riche écosystème d'APIs en source libreGoogle a un riche écosystème d'APIs en source libre
 GWT-Google-APIsGWT-Google-APIs
http://code.google.com/p/gwt-google-apishttp://code.google.com/p/gwt-google-apis
 AppEngine: déploiement facile d'app. GWT dans le nuageAppEngine: déploiement facile d'app. GWT dans le nuage
 Androïd : réalisation d'applications mobiles avec GWTAndroïd : réalisation d'applications mobiles avec GWT
 OpenSocial : réalisation facile de gadgets avec GWTOpenSocial : réalisation facile de gadgets avec GWT
 Google Maps APIs : services de cartes et géolocationGoogle Maps APIs : services de cartes et géolocation
 Google Ajax Search APIs : le moteur Google SearchGoogle Ajax Search APIs : le moteur Google Search
 Google Language API : services de traductionGoogle Language API : services de traduction
 ......

IU – Patrons de conceptionIU – Patrons de conception

IU – Patron de conception -IU – Patron de conception - CompositeComposite
Patron Composite (ou Object Composite)Patron Composite (ou Object Composite)
Facilite la création de WidgetsFacilite la création de Widgets
S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existantsS'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants
Offre un meilleur contrôle sur l'API exposéOffre un meilleur contrôle sur l'API exposé
Généralement préférable à l'utilisation de l'héritageGénéralement préférable à l'utilisation de l'héritage
* Source : http://fr.wikipedia.org/wiki/Objet_composite* Source : http://fr.wikipedia.org/wiki/Objet_composite

IU – Patron de conception -IU – Patron de conception - CompositeComposite
class MonPremierComposite extends Composite {
private VerticalPanel conteneur = new VerticalPanel();
private Label monTitre = new Label();
private TextBox maZoneTexte = new TextBox();
// Constructeur
public MonPremierComposite() {
conteneur.add(monTitre);
conteneur.add(maZoneTexte);
initWidget(conteneur);
}
}

IU – Patron de conception -IU – Patron de conception - CommandeCommande
Le patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'uneLe patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une
action ou commande souvent à être invoquée à un moment ultérieur.action ou commande souvent à être invoquée à un moment ultérieur.
Le patron comporte trois parties : l'invocateur, la commande et le récepteur.Le patron comporte trois parties : l'invocateur, la commande et le récepteur.
Le patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le codeLe patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le code
de l'action elle-même.de l'action elle-même.
Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments.Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments.
Ainsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenterAinsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenter
le « undo ».le « undo ».
<< Interface >>
Commande
+ executer()
CommandeImpl
+ executer()
Invocateur
+ événement1(...)
+ événement2(...)
Récepteur
+ action1(...)
+ action2(...)

IU – Patron de conception -IU – Patron de conception - ObservateurObservateur
* Patron observateur relie MV et VC dans le patron MVC* Patron observateur relie MV et VC dans le patron MVC
Source figure : R. Dewsbury 2008 – Chap.2, p.96Source figure : R. Dewsbury 2008 – Chap.2, p.96
Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer laLe Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la
Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle*Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle*
Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) àAinsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à
un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont enun ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en
quelque sorte abonnés aux modifications des données du modèle.quelque sorte abonnés aux modifications des données du modèle.
Programmation événementielle qui favorise un découplage des composantsProgrammation événementielle qui favorise un découplage des composants
Compromis entre un petit nombre d'événements généraux du genre « quelque chose » aCompromis entre un petit nombre d'événements généraux du genre « quelque chose » a
changé dans le modèle (granularité grossière) et un grand nombre de petits événementschangé dans le modèle (granularité grossière) et un grand nombre de petits événements
reliés à des éléments très précis du modèle (granularité fine).reliés à des éléments très précis du modèle (granularité fine).

IU - Bus d'événementsIU - Bus d'événements
Bus d'événements (Event Bus) : peut être vu commeBus d'événements (Event Bus) : peut être vu comme
un système téléphonique qui relie les composants deun système téléphonique qui relie les composants de
l'applicationl'application
Les composants émettent et reçoivent desLes composants émettent et reçoivent des
événements (events).événements (events).
Les composants peuvent réagir différemment selon leLes composants peuvent réagir différemment selon le
type d'événement reçustype d'événement reçus

IU - Contrôleur de l'applicationIU - Contrôleur de l'application
Le contrôleur de l'application (Application Controller)Le contrôleur de l'application (Application Controller)
est en quelque sorte le chef d'orchestre deest en quelque sorte le chef d'orchestre de
l'application.l'application.
Le contrôleur de l'application contient la logique deLe contrôleur de l'application contient la logique de
l'applicationl'application

IU - Patron de conception - MVPIU - Patron de conception - MVP
Patron MVP : Modèle-Vue-Présentateur (Model-View-Patron MVP : Modèle-Vue-Présentateur (Model-View-
Presenter)Presenter)
Modèle
Présentateur
Vue
VueVue::
Affiche lesAffiche les
informations etinformations et
achemine lesachemine les
actionsactions
(événements)(événements)
de l'usagerde l'usager
ModèleModèle::
Données duDonnées du
composantcomposant
(POJOs).(POJOs).
PrésentateurPrésentateur::
Communique (reçoit /Communique (reçoit /
émet) avec le reste deémet) avec le reste de
l'application via le busl'application via le bus
d'événements.d'événements.
Reçoit des événementsReçoit des événements
de la Vuede la Vue
Communique avec leCommunique avec le
serveur via des servicesserveur via des services
Bus
É
V
É
N
E
M
E
N
T
S
S
E
R
V
I
C
E
S

Modèle-Vue-Présentation (Model-View-Presenter)Modèle-Vue-Présentation (Model-View-Presenter)
Inventé par Martin Fowler et promu par GoogleInventé par Martin Fowler et promu par Google
Meilleur « découplage »Meilleur « découplage »
Plus facile de répartir le code entre développeursPlus facile de répartir le code entre développeurs
Plus facile à testerPlus facile à tester en remplaçant la vue par une vueen remplaçant la vue par une vue
factice (MockView)factice (MockView)
Code davantage testable et maintenableCode davantage testable et maintenable
Le modèle contient les données à afficherLe modèle contient les données à afficher
La vue correspond à une interface d'affichage. LesLa vue correspond à une interface d'affichage. Les
données envoyées à la vue sont des primitives.données envoyées à la vue sont des primitives.
Certains composants sont reliés au bus d'événementsCertains composants sont reliés au bus d'événements
alors que d'autres sont reliés à la couche de servicesalors que d'autres sont reliés à la couche de services

Le présentateur travaille avec des interfaces pas desLe présentateur travaille avec des interfaces pas des
implémentations (HasClickHandlers, HasValue, etc.)implémentations (HasClickHandlers, HasValue, etc.)
Le présentateur contient la logique du composant d'IU.Le présentateur contient la logique du composant d'IU.
Il envoie les données mise-à-jour à la vue et reçoit lesIl envoie les données mise-à-jour à la vue et reçoit les
valeurs modifiées par la vue.valeurs modifiées par la vue.
Le présentateur reçoit également les événementsLe présentateur reçoit également les événements
envoyés par les autres composants de l'application etenvoyés par les autres composants de l'application et
il émet ses propres événements via le busil émet ses propres événements via le bus
d'événements.d'événements.
Le présentateur reçoit des données du ModèleLe présentateur reçoit des données du Modèle
Le présenteur et la vue associée sont couplés via uneLe présenteur et la vue associée sont couplés via une
Interface d'AffichageInterface d'Affichage

IU - Architecture Application MVPIU - Architecture Application MVP
Modèle
Présentateur
Vue
Modèle
Présentateur
Vue
Modèle
Présentateur
Vue
BUS D'ÉVÉNEMENTS
Contrôleur de l'Application
Service
Serveur
Service

DesDes applications GWTapplications GWT
GWTGWT
en Actionen Action

Google AdWordsGoogle AdWords

Angry BirdsAngry Birds

ZoneCours 2 / OpenSyllabus – Un exemple Québécois!ZoneCours 2 / OpenSyllabus – Un exemple Québécois!

GWTGWT – Applications mobiles multiplateformes– Applications mobiles multiplateformes

GWTGWT – Applications mobiles multiplateformes– Applications mobiles multiplateformes
Développer pour chaque plateforme une application native ouDévelopper pour chaque plateforme une application native ou
développer une application multiplateforme?développer une application multiplateforme?
Si l'application n'a pas besoin d'accéder à des périphériquesSi l'application n'a pas besoin d'accéder à des périphériques
spécifiques, de performances « temps réel » ou le dessin 3D, il estspécifiques, de performances « temps réel » ou le dessin 3D, il est
préférable de créer une application multiplateforme.préférable de créer une application multiplateforme.
Dans ce contexte, le fureteur est la plateforme et les technologiesDans ce contexte, le fureteur est la plateforme et les technologies
du fureteur, comme JavaScript, HTML et CSS sont à privilégierdu fureteur, comme JavaScript, HTML et CSS sont à privilégier
La boîte à outils Ajax GWT facilite la création d'un clientLa boîte à outils Ajax GWT facilite la création d'un client
multiplateforme sur la base d’une application web pour mobile etmultiplateforme sur la base d’une application web pour mobile et
d'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWTd'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWT
et GwtMobileet GwtMobile
À long terme, extension de la norme HTML5 et l’accroissementÀ long terme, extension de la norme HTML5 et l’accroissement
des performances des engins JavaScriptdes performances des engins JavaScript

GWT et la mobilitéGWT et la mobilité
La performance compte en mobilitéLa performance compte en mobilité
processeurs lents / réseaux lents / alimentation par batteriesprocesseurs lents / réseaux lents / alimentation par batteries
GWT est très bien positionné au niveau de la performanceGWT est très bien positionné au niveau de la performance
Gzip de HTML, CSS et JavaScript => ServletFilterGzip de HTML, CSS et JavaScript => ServletFilter
taille du codetaille du code
chargement asynchrone ou différés des scriptschargement asynchrone ou différés des scripts
usage des cachesusage des caches
usages des ressources: ClientBundles + ImageResources + CssResourcesusages des ressources: ClientBundles + ImageResources + CssResources
Division du code => GWT.runAsync()Division du code => GWT.runAsync()
Appels par lots des données => patron de conception commande +Appels par lots des données => patron de conception commande +
schedulerscheduler
Mises en page « natives » & animations « natives » => CSSMises en page « natives » & animations « natives » => CSS
Source : Daniel Kurka – Google I/O 2013 – Gwt Roadmap for the Future

GWT + PhoneGapGWT + PhoneGap
Combinées à PhoneGap, les apps GWT roulent sur tous les téléphones et tablettesCombinées à PhoneGap, les apps GWT roulent sur tous les téléphones et tablettes
Visuel natif (look and feel)Visuel natif (look and feel)
API natives via les standards du WebAPI natives via les standards du Web
Le même code pour les téléphones, les tablettes et les ordinateurs personnelsLe même code pour les téléphones, les tablettes et les ordinateurs personnels
Les mêmes modèlesLes mêmes modèles
Les mêmes présentateurs (presenters)Les mêmes présentateurs (presenters)
Les mêmes services (RPC, REST, ...)Les mêmes services (RPC, REST, ...)
Des vues différentesDes vues différentes
Des navigations différentesDes navigations différentes
mgwt et gwt-mobile - widgets GWT pour la mobilitémgwt et gwt-mobile - widgets GWT pour la mobilité
gwt-phonegap et gwt-mobile-phonegap- des enrobage (wrapping) JSNI de lagwt-phonegap et gwt-mobile-phonegap- des enrobage (wrapping) JSNI de la
bibliothèque JavaScript PhoneGap pur l'intégrer aux applications GWTbibliothèque JavaScript PhoneGap pur l'intégrer aux applications GWT
Source : Daniel Kurka – Google I/O 2013 – Gwt Roadmap for the Future

ZoneCours Mobile – HEC MontréalZoneCours Mobile – HEC Montréal

GWTGWT -- Avantages & inconvénientsAvantages & inconvénients

GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs

GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
 Réponses rapides aux actions de l'utilisateurRéponses rapides aux actions de l'utilisateur
 La vitesse est vitale, spécialement au démarrageLa vitesse est vitale, spécialement au démarrage
 Ne requiert pas de plugiciel, Flash, .Net, ni de JVMNe requiert pas de plugiciel, Flash, .Net, ni de JVM
 Pas de long téléchargement, ni d'installationPas de long téléchargement, ni d'installation
 Compatible avec tous les fureteursCompatible avec tous les fureteurs
 Donne la préférence aux composants natifs de l'IUDonne la préférence aux composants natifs de l'IU
 L'utilisateur conserve le contrôle du navigateur Web enL'utilisateur conserve le contrôle du navigateur Web en
tout tempstout temps
 Gestion de l'historique de navigationGestion de l'historique de navigation
 Produit des applications Web riches, rapides et légèresProduit des applications Web riches, rapides et légères

aniaque
GWT
GWTGWT –– AAvantages pour les développeursvantages pour les développeurs

GWTGWT –– AAvantages pour les développeursvantages pour les développeurs
 Un unique langage, le “Java”Un unique langage, le “Java”
 Bien que le code-serveur peut être en n'importe quel langageBien que le code-serveur peut être en n'importe quel langage
 Gère les différences entre les fureteurs WebGère les différences entre les fureteurs Web
 Bibliothèque OO de composants IUGBibliothèque OO de composants IUG
 Semblable à SWING ou AWTSemblable à SWING ou AWT
 Encourage les bonnes pratiques du génie logiciel en s'appuyantEncourage les bonnes pratiques du génie logiciel en s'appuyant
sur des outils Java matures et performantssur des outils Java matures et performants
 Eclipse, NetBeans, IntelliJEclipse, NetBeans, IntelliJ
 Communications Ajax faciles via RPC et REST via RequestBuilderCommunications Ajax faciles via RPC et REST via RequestBuilder
 S'intègre aux technologies Web standardsS'intègre aux technologies Web standards
 Réduit la charge sur le serveur et le réseauRéduit la charge sur le serveur et le réseau
 Le code-client est beaucoup plus léger qu'une Applet JavaLe code-client est beaucoup plus léger qu'une Applet Java

Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?
J'
GWT

 Designers WebDesigners Web
– GWT utilise les feuilles de style CSSGWT utilise les feuilles de style CSS
– Doivent apprendre JavaDoivent apprendre Java
 Développeurs d'applications Web JavaDéveloppeurs d'applications Web Java
– Une application GWT s'exécute sur le client plutôt que d'être contrôléeUne application GWT s'exécute sur le client plutôt que d'être contrôlée
entièrement par le serveurentièrement par le serveur
– Doivent maîtriser les technologies du client riche et de présentationDoivent maîtriser les technologies du client riche et de présentation
Développeurs AjaxDéveloppeurs Ajax (gourous JavaScript)‫‏‬(gourous JavaScript)‫‏‬
– GWT intègre facilement le code JavaScript grâce à JSNIGWT intègre facilement le code JavaScript grâce à JSNI
– Doivent laisser tomber certaines habitudes du codage JSDoivent laisser tomber certaines habitudes du codage JS
 Développeurs d'applications JavaDéveloppeurs d'applications Java (Swing)(Swing)
– Réaliser des Web-app. avec des outils et un environnement familierRéaliser des Web-app. avec des outils et un environnement familier
– Doivent apprendre CSS & les restrictions particulières des Web-app.Doivent apprendre CSS & les restrictions particulières des Web-app.
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?

GWT - AvantagesGWT - Avantages
Un seul langage: JAVA + typage statique + riche écosystèmeUn seul langage: JAVA + typage statique + riche écosystème
Développement et mise au point rapide dans des EDIs favorisantDéveloppement et mise au point rapide dans des EDIs favorisant
une bonne productivité et qualité du codeune bonne productivité et qualité du code
Compatibilité multifureteurCompatibilité multifureteur
Très bon support AjaxTrès bon support Ajax
Performant & économe en ressources réseau & serveurPerformant & économe en ressources réseau & serveur
Division du code aisée (code splitting), resources bundlesDivision du code aisée (code splitting), resources bundles
Code JavaScript optimisé plus rapide que celui écrit à la mainCode JavaScript optimisé plus rapide que celui écrit à la main
Intégration facile aux APIs de GoogleIntégration facile aux APIs de Google
Code source libre, licence Apache 2, bien documentéCode source libre, licence Apache 2, bien documenté
Supporté par la communauté GWT (> 100K dév.) et par GoogleSupporté par la communauté GWT (> 100K dév.) et par Google

GWT - InconvénientsGWT - Inconvénients
JS
Ajax

GWT - InconvénientsGWT - Inconvénients
 Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript
 Connaissance de la programmation JavaConnaissance de la programmation Java
 Courbe d'apprentissageCourbe d'apprentissage
 Séparation nette entre client et serveurSéparation nette entre client et serveur
 Les composants (widgets) sont de sources et de qualitésLes composants (widgets) sont de sources et de qualités
inégalesinégales
 Lenteur du transcompilateurLenteur du transcompilateur
 Quelques problèmes de compatibilité entre fureteurs, surtoutQuelques problèmes de compatibilité entre fureteurs, surtout
au niveau des CSSau niveau des CSS
 L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller
 Parfois beaucoup de code de support (boiler plate code)Parfois beaucoup de code de support (boiler plate code)

Quand utiliser GWT?Quand utiliser GWT?
 Site Web traditionnel avec Ajax => jQuerySite Web traditionnel avec Ajax => jQuery
 Application web riche / RIA « monopage » UI complexe => GWTApplication web riche / RIA « monopage » UI complexe => GWT
 Application web de « type bureautique » (Desktop Like) => GWTApplication web de « type bureautique » (Desktop Like) => GWT
 Application mobile multiplateforme => GWT + PhoneGapApplication mobile multiplateforme => GWT + PhoneGap
 Application web infonuagique PaaS => GWTApplication web infonuagique PaaS => GWT
 Application webApplication web HTML5 avec Canvas ou SVG => GWTHTML5 avec Canvas ou SVG => GWT
 GWT pas fait pour des pages Web ni des « Hello World! »GWT pas fait pour des pages Web ni des « Hello World! »
 Il existe une zone grise où le choix dépendra de la familiarité deIl existe une zone grise où le choix dépendra de la familiarité de
l'équipe avec Java vs JavaScriptl'équipe avec Java vs JavaScript

L'avenir de GWT...L'avenir de GWT...

Événements récents...Événements récents...
 En avril 2012, une partie de l'équipe GWT basée à Atlanta a quittéEn avril 2012, une partie de l'équipe GWT basée à Atlanta a quitté
Google pour démarrer une nouvelle entreprise, ce qui explique leGoogle pour démarrer une nouvelle entreprise, ce qui explique le
ralentissement du développement de GWT en 2012.ralentissement du développement de GWT en 2012.
 27 au 28 juin 2012 -27 au 28 juin 2012 - Google I/O 2012Google I/O 2012
Une seule session sur GWTUne seule session sur GWT
Création d'un comité de pilotage (steering committee)Création d'un comité de pilotage (steering committee)
Google, Redhat, Vaadin, Sencha, Arcbees (Qc!), Jetbrains, BizoGoogle, Redhat, Vaadin, Sencha, Arcbees (Qc!), Jetbrains, Bizo
GWT 2.5 : SuperDev Mode, ElementalGWT 2.5 : SuperDev Mode, Elemental
 Septembre 2012 – Enquête - « The Future of GWT » SurveySeptembre 2012 – Enquête - « The Future of GWT » Survey
 Novembre 2012 – « The Future of GWT » ReportNovembre 2012 – « The Future of GWT » Report
https://vaadin.com/gwt/report-2012/https://vaadin.com/gwt/report-2012/
 15 au 17 mai 2013 - Google I/O 201315 au 17 mai 2013 - Google I/O 2013
3 sessions sur GWT3 sessions sur GWT
nouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomasnouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomas
BroyerBroyer

Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Roadmap for the Future
 OuvertureOuverture
accès élargi aux contributions de la communautéaccès élargi aux contributions de la communauté
serveur public d'intégration continue / mavénisationserveur public d'intégration continue / mavénisation
 SimplicitéSimplicité
rendre GWT plus modulaire / réduire l'emploi des fichiers .gwt.xml / nettoyer lerendre GWT plus modulaire / réduire l'emploi des fichiers .gwt.xml / nettoyer le
code, @Deprecatedcode, @Deprecated
 VitesseVitesse
accélérer la vitesse de compilation de 50 % / accélérer le rafraîchissement duaccélérer la vitesse de compilation de 50 % / accélérer le rafraîchissement du
SuperDevModeSuperDevMode
continuer de réduire la taille du code / améliorer CodeSplittercontinuer de réduire la taille du code / améliorer CodeSplitter
adapter le code JavaScript aux nouveaux interpréteurs JavaScript comme V8adapter le code JavaScript aux nouveaux interpréteurs JavaScript comme V8
meilleurs outils de rapports et de profilage pour identifier les problèmes demeilleurs outils de rapports et de profilage pour identifier les problèmes de
performanceperformance

Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Roadmap for the Future
 InteropérabilitéInteropérabilité
Java <=> JavaScriptJava <=> JavaScript
intégration avec le compilateur de Closure (https://developers.google.com/closure/compiler/)intégration avec le compilateur de Closure (https://developers.google.com/closure/compiler/)
support d'applications hybrides où l'on compile du code GWT et du code issu de librairies JavaScript externessupport d'applications hybrides où l'on compile du code GWT et du code issu de librairies JavaScript externes
support de Java 7 et Java 8support de Java 7 et Java 8
 FiabilitéFiabilité
régler les 100 bogues en tête de liste / améliorer les tests unitaires avec GWTrégler les 100 bogues en tête de liste / améliorer les tests unitaires avec GWT
retirer le support des vieux fureteurs, IE6,IE7,IE8retirer le support des vieux fureteurs, IE6,IE7,IE8
 Modularité - capacité à « embarquer » des morceaux de GWTModularité - capacité à « embarquer » des morceaux de GWT
diviser la structure monolithique du SDK de GWT en plus petits modulesdiviser la structure monolithique du SDK de GWT en plus petits modules
davantage de points de raccrochage ("hook points") pour l'intégration avec d'autres outilsdavantage de points de raccrochage ("hook points") pour l'intégration avec d'autres outils
 MobilitéMobilité
support des fureteurs mobiles modernessupport des fureteurs mobiles modernes
widgets optimisés pour la mobilitéwidgets optimisés pour la mobilité
cycle de vie de l'applicationcycle de vie de l'application
support du fonctionnement hors-lignesupport du fonctionnement hors-ligne
support des magasins « Apps Stores »support des magasins « Apps Stores »
GWT 2.6 – Q4 2013
GWT 3.0 – I/O 2014

L'avenir de GWT... c'est HTML5L'avenir de GWT... c'est HTML5
À cause de HTML5, l'augmentation de l'usage et de laÀ cause de HTML5, l'augmentation de l'usage et de la
quantité de code JavaScript va favoriser l'emploi d'outilsquantité de code JavaScript va favoriser l'emploi d'outils
comme GWT qui s'appuient sur Java un langage de hautcomme GWT qui s'appuient sur Java un langage de haut
niveau orienté objets à typage statique avec un richeniveau orienté objets à typage statique avec un riche
écosystème d'outils.écosystème d'outils.

GWT in Action – 2nd edition
par Robert Hanson, Adam Tacy, Jason Essington,
Anna Tökke
645 pages
Manning Publications
(7 février, 2013)‫‏‬
www.manning.com/tacy/
Ressources - LivresRessources - Livres
Programmation GWT 2.5 : Développer des
applications HTML5/JavaScript en Java avec
Google Web Toolkit – 2e
édition
par Sami Jaber
515 pages
Eyrolles
(13 septembre, 2012)‫‏‬
www.programmationgwt2.com

GWT in Practice
par Robert T. Cooper, Charlie E. Collins
358 pages
Manning Publications
(12 mai, 2008)‫‏‬
www.manning.com/cooper/
Google Web Toolkit Solutions : More Cool &
Useful Stuff
par David Geary, Rob Gordon
408 pages
Prentice Hall
(17 novembre, 2007)‫‏‬
www.coolandusefulgwt.com

GWT - Créer des applications web interactives
avec Google Web Toolkit (versions 1.7 et 2.0)
par Olivier Gérardin
205 pages
Dunod
(4 novembre, 2009)‫‏‬
http://code.google.com/p/livre-gwt
Google Web Toolkit Applications
par Ryan Dewsbury
608 pages
Prentice Hall
(15 décembre, 2007)‫‏‬
www.gwtapps.com

Ressources - OutilsRessources - Outils
Sites généralistes
Groupe de discussions (25 000 membres)
Socle d'application MVP - GWTP
http://code.google.com/webtoolkit/
http://www.gwtproject.com
https://code.google.com/p/gwt-platform/
https://groups.google.com/forum/#!forum/google-web-toolkit

QuestionsQuestions
??

GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (16)

Semelhante a GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013

Semelhante a GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013 (20)

Mais de Claude Coulombe

Mais de Claude Coulombe (20)

GWT, quoi de neuf? Présentation au GDG/GTUG Montréal - 26 juin 2013