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 Google Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le développement d'applications Web Toolkit (GWT) permet le développement d'applications Web Web riches (RIA) dotées d'interfaces riches (RIA) dotées d'interfaces complexes et complexes et d'applications mobiles multiplateformes performantes. d'applications mobiles multiplateformes performantes.

http://code.google.com/webtoolkit/http://www.gwtproject.com

http://code.google.com/webtoolkit/


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 AJAXfut 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 en Applications 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, redimensionnement Dé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 applications Passage 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 passent Le 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 à objets et 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 mettre ormal, 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 Logiciel GWT = 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

http://www.google.com/

http://www.sun.com/


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 pour Plugiciel 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 de Support de JUnitJUnit Support de Support de AppEngineAppEngine et autres APIs de Google et autres APIs de Google


GWT = Ajax + Génie Logiciel GWT = 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 à JavaScript Transcompilateur Java à JavaScript

Java

JavaScript

Run Everywhere!

Write Once...



Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript Transcompilateur GWT prend du code-client en Java et Transcompilateur 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 que Le 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”) pour Emploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal pour chaque produire du code JavaScript optimal pour chaque fureteur (i.e. génère du code spécifique à chaque fureteur (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 peut Dans 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 GWT En « mode dev », la JVM exécute le code GWT comme du bytecode Java à l'intérieur d'une comme 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-sourceRafraîchirRafraîchirExaminer les résultatsExaminer les résultats


GWT en « mode Web » - DéploiementGWT en « mode Web » - Déploiement Une fois testé en « mode dev », vous pouvez Une fois testé en « mode dev », vous pouvez compiler votre code source Java en JavaScript et compiler 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 est Une 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 du Une fois compilé le code-client est uniquement du pur JavaScript et du HTMLpur JavaScript et du HTML

Afin de déployer votre application Web en Afin de déployer votre application Web en production, vous déplacez les fichiers du répertoire production, 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é Instantiations Racheté 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 panneau Vue 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'une Outil 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 contenu Facilite le découplage entre la disposition du contenu en XML, le code du comportement en Java et en 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)



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



BibliothèqueBibliothèque

IUGIUG

Widgets &Widgets &

PanelsPanels

CommunicationCommunication

avec le serveuravec le serveur

RPC & AjaxRPC & Ajax

Analyseur Analyseur

XMLXML

Gestion deGestion de

l'historiquel'historique

Intégration Intégration

à JUnità JUnit

GWT APIGWT API

Trans Trans

compilateur compilateur

Java àJava à

JavaScriptJavaScript

Interface Interface

NativeNative

JavaScriptJavaScript

JSNIJSNI

BibliothèqueBibliothèque

d'émulationd'émulation

JREJRE

La structure du gwt-user.jarLa structure du gwt-user.jar GWT GWT –– Structure bibliothèque & APIStructure bibliothèque & API

Note : Transcompilateur GWT Note : Transcompilateur GWT

dans gwt-dev-windows.jardans gwt-dev-windows.jar


Emulation – JRE Emulation – JRE (Java Runtime Environment)(Java Runtime Environment)

Le transcompilateur de GWT fournit l'émulation en Le 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.sqlRestriction pour le code client Restriction pour le code client

devant être traduit en JavaScript. devant être traduit en JavaScript. Aucune restriction n'est imposée Aucune restriction n'est imposée

du côté du code serveur : Java du 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 InterfaceIntégration facile avec des bibliothèques JavaScript Inté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) à partir Interagir directement avec JavaScript (accès natif) à partir de Java et vice-versa de Java et vice-versa Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScriptJavaScript Overlay pour simplifier l'intégration de JavaScript 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 Overlay JSNI : JavaScript Type Overlay JavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTJavaScript dans GWTUne 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 JavaScript JSNI : 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



IU IU – Programmation par événements– Programmation par événementsEssentiellement de la programmation par événementsEssentiellement de la programmation par événementsUne méthode ou procédure s'exécute quand un Une 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 fois Dans une IU, un événement est déclenché chaque fois que l'utilisateur clique sur la souris, appuie sur une que l'utilisateur clique sur la souris, appuie sur une touche du clavier, sélectionne un élément dans un touche 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ètres qui peuvent comporter des paramètres


IU - Gestion des événementsIU - Gestion des événements GWT utilise le concept de gestionnaire d'événement GWT 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 la Semblable à 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 widget dé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

http://gwt.google.com/samples/Showcase/Showcase.html



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

SplitLayoutPanelSplitLayoutPanelFlowPanelFlowPanel

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 de Une 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 pile Vous 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” en Vous 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 URLs Le 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 CSSSé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 - conseilsCode 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'étatNote : Ne pas utiliser les CSS pour la disposition Note : 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érente Deferred Binding ») pour générer une version différente de l'application Web pour chaque langue de l'application Web pour chaque langue

Par exemple, puisque GWT supporte 5 navigateurs Par exemple, puisque GWT supporte 5 navigateurs différents, si votre application doit fonctionner en 3 différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 15 langues, le transcompilateur de GWT produira 15 versions différentes de votre application au moment de versions différentes de votre application au moment de la compilation la 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 à la Pas 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 LibraryPermet de travailler directement avec l'API HTML5 du Permet 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é sur GIN (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 la Super 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


Serveuravec état

(statefull)

Serveursans é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 & AjaxRPC (« 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 des GWT RPC fournit une procédure automatique de sérialisation des objetsobjets

Autres outils Ajax :Autres outils Ajax :

RequestBuilderRequestBuilder

RequestFactory RequestFactory

HTTPRequestHTTPRequest

FormPanelFormPanel

Support de : Support de : XMLXML

JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)


Appel de procédure à distanceAppel de procédure à distanceJ


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

Pratique! Le client et le serveur parlent le même langage (Java)Pratique! Le client et le serveur parlent le même langage (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 - CommandeCommandeLe patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une Le 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 code Le 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émenter Ainsi, 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 la Le 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 en un 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 composants Programmation événementielle qui favorise un découplage des composants

Compromis entre un petit nombre d'événements généraux du genre « quelque chose » a Compromis 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énements changé 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énementsBus d'événements (Event Bus) : peut être vu comme Bus d'événements (Event Bus) : peut être vu comme un système téléphonique qui relie les composants de un système téléphonique qui relie les composants de l'applicationl'applicationLes composants émettent et reçoivent des Les composants émettent et reçoivent des événements (events). événements (events). Les composants peuvent réagir différemment selon le Les 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'applicationLe contrôleur de l'application (Application Controller) Le contrôleur de l'application (Application Controller) est en quelque sorte le chef d'orchestre de est en quelque sorte le chef d'orchestre de l'application.l'application.Le contrôleur de l'application contient la logique de Le contrôleur de l'application contient la logique de l'applicationl'application


IU - Patron de conception - MVPIU - Patron de conception - MVPPatron 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 les Affiche les informations et informations et achemine les achemine les actions actions (événements) (événements) de l'usagerde l'usager

ModèleModèle: :

Données du Données du composant composant (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 bus l'application via le bus d'événements.d'événements.

Reçoit des événements Reçoit des événements de la Vue de la Vue

Communique avec le Communique avec le serveur via des servicesserveur via des services

BusÉVÉNEMENTS

SERVICES


IU - Patron de conception - MVPIU - Patron de conception - MVPModè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 GoogleMeilleur « découplage »Meilleur « découplage »Plus facile de répartir le code entre développeursPlus facile de répartir le code entre développeursPlus facile à tester Plus facile à tester en remplaçant la vue par une vue en remplaçant la vue par une vue factice (MockView)factice (MockView)

Code davantage testable et maintenableCode davantage testable et maintenableLe modèle contient les données à afficherLe modèle contient les données à afficherLa vue correspond à une interface d'affichage. Les La 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énements Certains 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


IU - Patron de conception - MVPIU - Patron de conception - MVPLe présentateur travaille avec des interfaces pas des Le 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 les Il 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énements Le présentateur reçoit également les événements envoyés par les autres composants de l'application et envoyés par les autres composants de l'application et il émet ses propres événements via le bus il é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èleLe présenteur et la vue associée sont couplés via une Le présenteur et la vue associée sont couplés via une Interface d'Affichage Interface 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 GWT applications GWT

GWTGWTen 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 ou Dé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ériques Si 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 est spé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 technologies Dans 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 client La boîte à outils Ajax GWT facilite la création d'un client multiplateforme sur la base d’une application web pour mobile et multiplateforme sur la base d’une application web pour mobile et d'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWT d'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWT et GwtMobile et 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 JavaScript des 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 scripts chargement 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 la gwt-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 en L'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


aniaqueGWT

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'appuyant Encourage 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 Java Développeurs d'applications Web Java – Une application GWT s'exécute sur le client plutôt que d'être contrôlée Une 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ésentation Doivent maîtriser les technologies du client riche et de présentation

Développeurs Ajax Dé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 JS Doivent laisser tomber certaines habitudes du codage JS

Développeurs d'applications Java Dé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és Les composants (widgets) sont de sources et de qualités

inégalesinégales Lenteur du transcompilateurLenteur du transcompilateur Quelques problèmes de compatibilité entre fureteurs, surtout Quelques 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 web Application web HTML5 avec Canvas ou SVG => GWT HTML5 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é de Il 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 le Google 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, Bizo Google, 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, Thomas nouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomas BroyerBroyer

https://vaadin.com/gwt/report-2012/


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 le rendre 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 du accé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 de meilleurs 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 2013GWT 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'outils quantité de code JavaScript va favoriser l'emploi d'outils comme GWT qui s'appuient sur Java un langage de haut comme GWT qui s'appuient sur Java un langage de haut niveau orienté objets à typage statique avec un riche niveau orienté objets à typage statique avec un riche écosystème d'outils. écosystème d'outils.


GWT in Action – 2nd editionpar Robert Hanson, Adam Tacy, Jason Essington,Anna Tökke645 pagesManning 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 éditionpar Sami Jaber515 pagesEyrolles(13 septembre, 2012)‏www.programmationgwt2.com



GWT in Practicepar Robert T. Cooper, Charlie E. Collins358 pagesManning Publications (12 mai, 2008)‏www.manning.com/cooper/

Google Web Toolkit Solutions : More Cool & Useful Stuffpar David Geary, Rob Gordon408 pagesPrentice 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érardin205 pagesDunod(4 novembre, 2009)‏http://code.google.com/p/livre-gwt

Google Web Toolkit Applicationspar Ryan Dewsbury608 pagesPrentice 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

http://code.google.com/webtoolkit/


QuestionsQuestions

??


Technology

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