Introduction à GWT - GTI780 & MTI780 - ETS - A09

Le Google Web Toolkit (GWT):
réalisation facile d'applications
AJAX et Web 2.0 pour programmeurs Java

Sujets spéciaux en TI

Le Web 2.0 : concepts et outils
École de technologie supérieure
par

Claude Coulombe

GTI-780 / MTI-780 ETS - Montréal - 2009

But

Dans cette présentation vous verrez comment
le Google Web Toolkit (GWT) permet le
développement rapide en Java d'applications
Web 2.0 et AJAX.

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


Pourquoi GWT ? - Problèmes avec JavaScript

Euh!..., il ne connaissait pas
assez le JavaScript...

GTI-780 / MTI-780 * Source Clipart : http://www.clipart.com ETS - Montréal - 2009

Pourquoi GWT ? - Problèmes avec JavaScript
Beaucoup d'efforts pour contourner les incompatibilités des fureteurs,
les fuites de mémoire et les longs chargements
JS n'est pas un véritable langage à objets
Pas de typage statique mais typage dynamique
Sensible à la moindre coquille
formulaire.montnat = document.getElementById(''montant'');
Quelques subtilités : “null” vs “undefined” vs “false” vs “”
Débogage à l'exécution pas à la compilation
JS n'a pas été conçu pour de gros logiciels, mais juste pour mettre un
peu d'interactivité dans une page web
Manque de modularité et de capacité à grandir
Mise au point et réutilisation difficiles des composants JS et Ajax
Support inégal des outils JavaScript et Ajax
Rareté des experts en JavaScript


GWT – le « prochain gros truc! »

GWT

GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009

Qu'est-ce que GWT ?
 En mai 2006 Google lance son Google Web Toolkit
– Bruce Johnson & Joel Webber
 Logiciel libre (licence Apache 2), canevas d'applications
Web riches, entièrement basé Java, « orienté client »
 Transcompilateur (cross-compiler) de Java à JavaScript
 Développement rapide d'applications Web riches par
des programmeurs Java qui ne maîtrisent pas
JavaScript
 Bon à la fois pour enrichir des applications Web avec
des composants Ajax et pour créer des applications
« similaires à des applications bureautiques locales »
mais qui tournent dans un fureteur Web


Qu'est-ce que GWT ? - Du pur Java!

 Plus de 6 millions de développeurs Java
 Riche écosystème
 “Write Once, Run Anywhere”
 Windows, Linux, Mac OS X
 Véritable langage de POO
 Utilise un EDI* Java usuel
 Débogage du code-client avec EDI Java
 Communication client-server d'objets Java
 Code-client beaucoup plus léger qu'avec des applets Java

* EDI : environnement de développement intégré (en anglais IDE)

GTI-780 / MTI-780 * Source image : http://www.sun.com ETS - Montréal - 2009

GWT – Quelques exemples
 Lombardi Blueprint (outil de gestion des flux de travail)
http://www.lombardisoftware.com/bpm-blueprint-product.php
 Exemples et démos du Google Web Tookit
http://code.google.com/intl/fr-FR/webtoolkit/examples/

 GWT-Ext 2.0 Showcase
http://www.gwt-ext.com/demo/
 Google Web Toolkit Applications (site d'un livre)

Widget DeskTop Demo
http://desktop.gwtapps.com
 Gpokr (jeu de poker en ligne)
www.gpokr.com
 OpenSyllabus (éditeur structuré de plan de cours)
http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home


GWT – Avantages pour les utilisateurs


GWT – Avantages pour les utilisateurs
 Réponses rapides aux actions de l'utilisateur
 La vitesse est vitale, spécialement au démarrage
 Ne requiert pas de plugiciel, Web Start, ni même de
JVM
 Pas de long téléchargement, ni d'installation
 Compatible avec tous les fureteurs Web récents
 Donne la préférence aux composants natifs de l'IU
 L'utilisateur conserve le contrôle du navigateur Web en
tout temps
 Gestion de l'historique de navigation
 Produit des applications Web riches, rapides et légères


GWT – Avantages pour les développeurs

aniaque
GWT


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


Comprendre GWT

GWT


Application GWT – Client & Serveur
Le code-serveur (en Java ou
tout autre langage) s'exécute
sur le serveur.
L'application Web utilise le
serveur pour charger ou
sauvegarder des données.

Le code-client en JavaScript
est transmis sur le réseau
vers un ordinateur-client, où
il s'exécute dans un logiciel
de navigation Web


Vue d'ensemble de l'architecture GWT
Trans
compilateur
Interface Java à Bibliothèque
Native JavaScript d'émulation
JavaScript JRE
JSNI

GWT API

Bibliothèque
Communication
IUG avec le serveur
Analyseur Gestion de Intégration
Widgets & RPC & Ajax XML l'historique à JUnit
Panels


Transcompilateur Java à JavaScript
GWT version 1.4 supporte :

Java * Firefox 1.0, 1.5, 2, 3.x
* Internet Explorer 6, 7
* Safari 2.0, 3.0
* Opera 9.0

Write Once...
JavaScript

Run Everywhere!

 Transcompilateur GWT prend du code-client en Java et le
traduit en JavaScript optimisé
 Bibliothèque d'émulation JRE supporte un grand nombre de
classes de java.lang & java.util
http://code.google.com/webtoolkit/documentation/jre.html
 Maintenant pour Java 1.5 ou Java 5
 Tout le code-client va être compilé en JavaScript. Donc, il
faut seulement des bibliothèques et du code Java qu'on
peut traduire en JavaScript du côté client
 Le code-serveur n'a pas ce type de contraintes
 Emploi de la liaison différée (“Deferred Binding”) pour
produire du code JavaScript optimal
« Ne payez que pour ce que vous utilisez »


 Du JavaScript plus rapide que du code écrit à la main !!!
Ainsi, ceci
public static void onModuleLoad() {
Button b = (new Button()).Button();
b.setText("Java vers JavaScript");

}

après compilation donnera quelque chose comme cela...
function onModuleLoad(){
var b;
b = $Button(new Button());
$setInnerText(b.element, 'Java vers JavaScript');

}

Transcompilateur- Liaison différée

Copyright Google 2008

« Ne payez que pour ce que vous utilisez »

GTI-780 / MTI-780 * Source : http://www.google.com ETS - Montréal - 2009

Vue d'ensemble de la bibliothèque de
composants d'interface utilisateur
Composants d'interface-utilisateur
Gestion des événements
Support des CSS
I18N
Support du glisser-déposer


Interface Utilisateur - Composants
Balises HTML usuelles, comme img, anchor, hyperlink
Bouton, bouton radio, bouton à bascule, case à cocher
Menu, sous-menu, menu déroulant
Champ de texte, zone de texte
Onglets, liste déroulante, boîte de dialogue
Séparateurs de fenêtre
Widgets complexes comme des tables, boîte de
téléversement de fichier, widget d'arbres, éditeur de
texte enrichi,
Différents panneaux très utiles pour la disposition


Gestion des événements
 GWT utilise le concept de récepteur (« listener
interface ») pour traiter les événements
 Semblable à d'autres canevas d'applications
graphiques comme SWING
 Le récepteur via l'interface “listener interface” définit
une ou plusieurs méthodes que le widget appelle en
réaction à un événement
Button unBouton = new Button("Cliquez moi!");
unBouton.addClickListener(new ClickListener() {
public void onClick(Widget emetteur) {
// traitement du Clic
}
});


JSNI : JavaScript Native Interface
 GWT permet l'intégration facile avec des bibliothèques
JavaScript externes grâce à son JavaScript Native
Interface (JSNI)
 Interagir directement avec JavaScript à partir de Java
et vice-versa
 Inclusion automatique des bibliothèques JavaScript
 GWT 1.5 introduit le concept de JavaScript Overlay
pour simplifier l'intégration de prototypes JavaScript
dans GWT


JSNI : JavaScript Native Interface
 GWT permet l'intégration facile avec des bibliothèques
JavaScript externes grâce à son JavaScript Native
Interface (JSNI)
 Interagir directement avec JavaScript à partir de Java
et vice-versa
 Inclusion automatique des bibliothèques JavaScript

// Déclaration de la méthode en Java...
native String inverserNomPrenom(String nom)
/*-{
// Implémentation en JavaScript
var re = /(w+)s(w+)/;
return name.replace(re, '$2, $1');
}-*/;

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

 Fichier CSS :
.gwt-ListWidget {
background-color:black;
color:lime;
}


I18N – Internationalisation


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

Communication avec le serveur & Ajax
Le RPC (« Remote Procedure Call »), appel de procédure à
distance
RPC rend facile l'échange d'objets Java (sérialisés) entre le code-
client et le code-serveur
Fournit une procédure automatique de sérialisation des objets

Autres outils Ajax :
HTTPRequest
RequestBuilder
FormPanel

Support de :
XML
JSON (JavaScript Object Notation)

GWT en « mode hôte » - Débogage
Dans Eclipse, une application GWT peut
s'exécuter en « mode hôte » (“Hosted Mode”)
En « mode hôte », la JVM exécute le code GWT
comme du bytecode Java à l'intérieur d'une
fenêtre de navigateur Web
Le « mode hôte » facilite la mise-au-point :
Éditer le code-source
Rafraîchir
Examiner les résultats


GWT + EDIs Java => Génie logiciel pour
les applications Web riches & Ajax
 Support du cycle de vie complet du logiciel
 Patrons de conception OO éprouvés
 EDIs* Java matures
 Cycle : édition / test / débogage /
 restructuration (refactoring)
 Support au débogage
 Détection d'erreurs à la compilation
 Mise au point & débogage en mode hôte
 Journalisation (logging)
 Support de JUnit

* EDI : environnements de développement
intégrés (en anglais IDE)


GWT en « Mode Web » - Déploiement
 Une fois testé en « Mode Hôte », vous pouvez
compiler votre code source Java en JavaScript
et déployer votre application Web
 Une application Web GWT qui a été déployée
est dite en « Mode Web »
 Une fois compilé le code-client est uniquement
du pur JavaScript et du HTML
 Afin de déployer votre application Web en
production, vous devez déplacer les fichiers du
répertoire www/... sur le serveur Web, i.e.
Tomcat (ou Apache)

Démo – Bâtir des applications GWT

GWT
en Action

Créer un squelette d'application GWT
 GWT crée automatiquement un code-client
rudimentaire
 Vous pouvez ensuite mettre de la chair sur ce
squelette dans le but de créer une application Web
plus sophistiquée

GWT

Enrichir une page web
 GWT permet d'ajouter des composants graphiques
interactifs dans une page Web
 Un composant GWT peut être intégré dans n'importe
quelle page HTML, ainsi l'application continue à
ressembler à une page Web
 Tout fichier HTML incluant un certain jeu de balises
peut servir de support à une application GWT
 GWT ne cherche pas exclusivement à ressembler à
une application bureautique en exécution locale
 Le résultat est juste une meilleure application Web
 Exemple : application d'ouverture de session (login)


Créer des applications Web similaires à
des applications bureautiques locales
 Ouverture de plusieurs fenêtres à la fois dans le
navigateur
 Déplacement des fenêtres dans le navigateur,
redimensionnement et défilement des fenêtres
 Glisser et déposer des contenus
 Applications Web se comportant « comme des
applications bureautiques locales »


Qui peut le mieux profiter de GWT ?

J'
GWT


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


GWT vs autres solutions Web riche


GWT vs autres solutions Web riche
Outils purs JavaScript (Scriptaculous, Prototype, DWR, JQuery, YUI, etc.)
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!

JavaServer Faces - Norme JEE, canevas d'applications Web populaire, basé
sur le serveur, plutôt complexe

JavaFX - Trop tôt pour se prononcer, exige JVM, langage à script
Java Applet - Trop lourd, exige JVM, doivent beaucoup s'améliorer
ZK - Rapide et facile à programmer, basé sur le serveur, licence GPL

Adobe Flash, Flex, AIR (Adobe Integrated Runtime) et OpenLazslo
Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à script

Micro$oft Silverlight - Pas Java, propriétaire & basé Windows
Windows...Volta, 5 décembre 2007, une copie GWT pour .NET

Ruby - Toujours à base de pages et basé sur le serveur..


GWT - Avantages & inconvénients


GWT - Inconvénients
 Nécessite que le fureteur exécute JavaScript
 Exige la connaissance de la programmation Java
 Exige une séparation nette client et serveur
 Les composants (Widgets) sont de sources et de
qualités inégales
 Dépend des performances du transcompilateur
 Quelques problèmes de compatibilité entre les
fureteurs Web, surtout au niveau des CSS
 Certains problèmes demandent une expertise JS
 L'aspect sécurité est à surveiller
 GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0

GWT - Avantages
Bon pour enrichir des applications Web avec Ajax et créer
des applications Web de « style bureautique »
Un seul langage: JAVA
Développement et mise au point rapide dans des EDIs
favorisant une bonne productivité et qualité du code
Riche bibliothèque de composants (~ SWING)
Très bon support Ajax
Performant & économe en ressources réseau & serveur
Code source libre, licence Apache 2, bien documenté
Supporté par GOOGLE... et l'écosystème des outils Google
Pas magique mais GWT a le potentiel de devenir le
« prochain gros truc »


Ressources - Livres
GWT in Action: Easy Ajax with the Google Web
Toolkit
par Robert Hanson, Adam Tacy
600 pages
Manning Publications
(5 juin, 2007)
www.manning.com/hanson/

Google Web Toolkit Applications
par Ryan Dewsbury
608 pages
Prentice Hall
(15 décembre, 2007)
www.gwtapps.com


Ressources - Livres
Google Web Toolkit Solutions : More Cool &
Useful Stuff
par David Geary, Rob Gordon
408 pages
Prentice Hall
(17 novembre, 2007)
www.coolandusefulgwt.com

GWT in Practice
par Robert T. Cooper, Charlie E. Collins
358 pages
Manning Publications
(12 mai, 2008)
www.manning.com/cooper/


Ressources - Outils
GWT Designer
– Éditeur graphique
– Plugiciel Eclipse
– www.instantiations.com/gwtdesigner/
Sites
http://code.google.com/webtoolkit/
http://groups.google.com/group/Google-Web-Toolkit
www.ongwt.com


Questions

?


Introduction à GWT - GTI780 & MTI780 - ETS - A09

Contenu connexe

Tendances (20)

Similaire à Introduction à GWT - GTI780 & MTI780 - ETS - A09 (20)

Plus de Claude Coulombe (20)

Dernier (7)

Introduction à GWT - GTI780 & MTI780 - ETS - A09