Gwt intro-101

GWT 101
réalisation facile
d'applications Web riches

Présentation au GTUG Montréal

par

Claude Coulombe

GTUG Montréal 7 avril 2011

But

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

GTUG Montréal * Source : http://code.google.com/webtoolkit/ 7 avril 2011

Web 1.0 – Cliquez & attendez!

GTUG Montréal * Source Clipart : http://www.clipart.com 7 avril 2011

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


Ajax – Une véritable percée!

AJAX
Le premier à utiliser le terme AJAX
fut Jesse James Garrett en février 2005


Ajax – Une véritable percée!
 Ajax (Asynchronous JavaScript & XML)‫‏‬
 Fini le pénible rechargement de pages!
 Réalise des requêtes asynchrones au serveur
et fait la mise-à-jour de la page Web sans faire
de chargement complet
 Applications Web plus réactives et plus
dynamiques
 Objet XMLHttpRequest inventé par M$
 Basé sur du code-client en JavaScript
 Aujourd'hui, Ajax désigne les technologies Web
du fureteur : JavaScript, HTML/DOM, CSS

Créer des applications Web riches
 Applications Web semblables à des applications
bureautiques en exécution locale (Desktop Like)
 Interfaces rapides et réactives
 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


GWT = Ajax + Génie Logiciel

AJAX
GWT =
+
Génie logiciel
GTUG Montréal * Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com 7 avril 2011

Qu'est-ce que GWT ?
 En mai 2006 Google lance son Google Web Toolkit
Bruce Johnson & Joel Webber
 Boîte à outils Ajax pour des applications Web riches
« orientées client »
 Développement rapide d'applications Web riches par des
programmeurs Java ou pour de gros projets où JavaScript
montre ses limites
 Transcompilateur (cross-compiler) de Java à JavaScript
 Bon à la fois pour enrichir des applications Web avec des
composants Ajax et pour créer des applications similaires à
des applications bureautiques classiques (desktop-like) mais
qui tournent dans un fureteur Web
 Logiciel libre (licence Apache 2)

Génie logiciel pour les appli. Web riches & Ajax
 Support du cycle de vie complet du logiciel
 Outil interactif de construction d'IU ( GWT Designer)
 Outil de construction d'IU déclaratif XML ( UiBinder)
 Outil de mesure des performances ( Speed Tracer)
 Plugiciel pour Eclipse
Support au débogage
Mise au point & débogage en mode dev
Cycle : édition / test / débogage /
Restructuration / refactorisation (refactoring)‫‏‬
Détection d'erreurs à la compilation
Journalisation (logging)‫‏‬
 Patrons de conception OO éprouvés
Composite / MVC / MVP / commande / bus d'événements
 Support de JUnit
 Support de AppEngine et autres APIs de Google

Intégration à Eclipse – débogueur


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

Speed Tracer (extension dans Chrome)


GWT Designer


Comprendre GWT

GWT


Application GWT – Client & Serveur
Le code (en Java ou tout autre
langage) qui s'exécute sur le
serveur est responsible de la
logique de l'application et du
chargement ou de la
sauvegarde 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 fureteur
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

Java

Write Once...
JavaScript

Run Everywhere!

Transcompilateur – Code optimisé!

Copyright Google 2008

« Ne payez que pour ce que vous utilisez »


Pourquoi pas JavaScript?

Made in
Ja vaScript


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

Bibliothèque de composants d'IU


Bibliothèque de composants d'IU
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
Différents panneaux utilespour la disposition
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, etc.


Interface Utilisateur - Panneaux
DisclosurePanel
VerticalPanel HorizontalSplitPanel

HorizontalPanel

VerticalSplitPanel
FlowPanel

DockPanel

TabPanel
PopupPanel

GTUG Montréal http://gwt.google.com/samples/Showcase/Showcase.html 7 avril 2011

Gestion des événements
 GWT utilise le concept de gestionnaire d'événement
(handler interface) pour traiter les événements
 Semblable à d'autres bibliothèques Java pour la
programmation d'IU comme SWING
 Le gestionnaire via l'interface “handler 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.addClickHandler( new ClickHandler() {
public void onClick(ClickEvent event) {
Window.alert("Bouton cliqué!");
}
});

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

 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 6
navigateurs différents, si votre application doit
fonctionner en 3 langues, le transcompilateur
de GWT produira 18 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 client-serveur & Ajax


Client léger HTML vs client riche Ajax

Client HTML
(fureteur)
Serveur
sans état avec état
(stateless) (statefull)

Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes

Client JavaScript
(fureteur) Serveur
avec état sans état
(statefull) (stateless)

Pas d'état persistant
entre les transactions qui sont
considérées comme indépendantes

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
Procédure automatique de sérialisation des objets

Autres outils Ajax :
HTTPRequest
RequestBuilder
FormPanel

Support de :
XML
JSON (JavaScript Object Notation)


Intégration facile aux APIs Google


Intégration facile aux APIs Google
 Google a un riche écosystème d'APIs en source libre
 AppEngine : déploiement facile d'applications GWT
dans le nuage
 Androïd : réalisation d'applications mobiles avec GWT
 OpenSocial : réalisation facile de gadgets avec GWT
 Google Maps APIs : services de cartes et géolocation
 Google Ajax Search APIs : le moteur Google Search
 Google Gears API : BD locale et navigation hors ligne
 Google Language API : services de traduction
 ...


GWT – Atelier de Gadgets!
Compiler avec GWT pour générer le code JS du gadget
Déploiement facile sur un serveur Web externe
Intégrer facilement le gadget dans un conteneur OpenSocial

c


GUI – Patrons de conception


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


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


Patron de conception - MVP
Modèle-Vue-Présentateur (Model-View-Presenter)
Présentateur:
Communique (reçoit /
émet) avec le reste de
Modèle:
Données du
Modèle l'application via le bus
d'événements.
Bus composant
Reçoit des événements
É
(POJOs).
de la Vue S
V Communique avec le E
É serveur via des services R
N V
E Présentateur
M I
E C
N E
T Vue:
S Affiche les
S
informations et
achemine les Vue
actions
(événements)
de l'usager

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


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


Des applications GWT

GWT
en Action

OpenSyllabus – Un exemple Québécois!
OpenSyllabus : un é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, Flash, .Net, ni de JVM
 Pas de long téléchargement, ni d'installation
 Compatible avec tous les fureteurs
 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


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 riche 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 (Swing)
– 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 (jQuery, Scriptaculous, Prototype, YUI, Dojo, etc.)‫‏‬
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!

JavaServer Faces - Norme JEE, basé sur le serveur, plutôt complexe

JavaFX – Trop peu, trop tard! exige JVM
Java Applet – Passé de mode et lourd passé!, exige JVM
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 - propriétaire & basé Windows
Windows...Volta, fin 2007 puis plus rien, une copie GWT pour .NET


GWT - Avantages & inconvénients


GWT - Inconvénients
 Nécessite que le fureteur exécute JavaScript
 Connaissance de la programmation Java
 Séparation nette entre client et serveur
 Les composants (widgets) sont de sources et de
qualités inégales
 Dépend des performances du transcompilateur
 Lenteur de JavaScript
 Quelques problèmes de compatibilité entre fureteurs,
surtout au niveau des CSS
 Certains problèmes demandent une expertise JS
 L'aspect sécurité est à surveiller


GWT - Avantages
Bon pour enrichir des applications Web avec Ajax ou créer
des applications Web riches avec des IUs complexes
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é
Vaste communauté (25 000 membres GG GWT)
Supporté par Google... et l'écosystème des outils Google
GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0


Ressources - Livres
Google Web Toolkit Applications
par Ryan Dewsbury
608 pages
Prentice Hall
(15 décembre, 2007)‫‏‬
www.gwtapps.com

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


Ressources - Outils
Sites généralistes
http://code.google.com/webtoolkit
http://code.google.com/webtoolkit/overview.html

Groupe de discussions (25 000 membres)
http://groups.google.com/group/google-web-toolkit

Sites de nouvelles
http://www.ongwt.com/
Socle d'application MVP - GWTP
http://code.google.com/p/gwt-platform/


Pour en savoir plus...

Présentation plus
complète de GWT
au JUG Montréal
jeudi 14 avril
UQAM, pav. Sherbrooke,
local SH-2140
de 17 h 30 à 19 h 30


Gwt intro-101

Contenu connexe

Tendances (20)

Similaire à Gwt intro-101 (20)

Plus de Claude Coulombe (20)

Gwt intro-101