GWT 101GWT 101 réalisation facile réalisation facile
d'applications Web richesd'applications Web riches
GTUG MontréalGTUG Montréal
Présentation au GTUG Montréal
par
Claude Coulombe
7 avril 20117 avril 2011
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
ButBut
Dans cette présentation vous verrez comment Dans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le le Google Web Toolkit (GWT) permet le développement rapide et facile d'applications développement rapide et facile d'applications Web 2.0 et AJAX. Web 2.0 et AJAX.
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Web 1.0Web 1.0 – Cliquez & attendez! – Cliquez & attendez!
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Web 2.0 – Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur »
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Ajax (Asynchronous JavaScript & XML) Ajax (Asynchronous JavaScript & XML) Fini le pénible rechargement de pages!Fini le pénible rechargement de pages! Réalise des requêtes asynchrones au serveur Réalise des requêtes asynchrones au serveur
et fait la mise-à-jour de la page Web sans faire et fait la mise-à-jour de la page Web sans faire de chargement completde chargement complet
Applications Web plus réactives et plus Applications Web plus réactives et plus dynamiquesdynamiques
Objet XMLHttpRequest inventé par M$Objet XMLHttpRequest inventé par M$ Basé sur du code-client en JavaScriptBasé sur du code-client en JavaScript Aujourd'hui, Ajax désigne les technologies Web Aujourd'hui, Ajax désigne les technologies Web
du fureteur : JavaScript, HTML/DOM, CSSdu fureteur : JavaScript, HTML/DOM, CSS
AjaxAjax – Une véritable percée! – Une véritable percée!
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Créer des applications Web richesCréer des applications Web riches
Applications Web semblables à des applications Applications Web semblables à des applications bureautiques en exécution locale (Desktop Like)bureautiques en exécution locale (Desktop Like)
Interfaces rapides et réactivesInterfaces rapides et réactives Ouverture de plusieurs fenêtres à la fois dans le Ouverture de plusieurs fenêtres à la fois dans le
navigateurnavigateur Déplacement des fenêtres dans le navigateur, Déplacement des fenêtres dans le navigateur,
redimensionnement et défilement des fenêtresredimensionnement et défilement des fenêtres Glisser et déposer des contenusGlisser et déposer des contenus
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Qu'est-ce que GWT ?Qu'est-ce que GWT ? En mai 2006 Google lance son Google Web ToolkitEn mai 2006 Google lance son Google Web Toolkit
Bruce Johnson & Joel WebberBruce Johnson & Joel Webber Boîte à outils Ajax pour des applications Web riches Boîte à outils Ajax pour des applications Web riches
« orientées client »« orientées client » Développement rapide d'applications Web riches par des Développement rapide d'applications Web riches par des
programmeurs Java ou pour de gros projets où JavaScript programmeurs Java ou pour de gros projets où JavaScript montre ses limitesmontre ses limites
Transcompilateur (cross-compiler) de Java à JavaScriptTranscompilateur (cross-compiler) de Java à JavaScript Bon à la fois pour enrichir des applications Web avec des Bon à la fois pour enrichir des applications Web avec des
composants Ajax et pour créer des applications similaires à composants Ajax et pour créer des applications similaires à des applications bureautiques classiques (desktop-like) mais des applications bureautiques classiques (desktop-like) mais qui tournent dans un fureteur Webqui tournent dans un fureteur Web
Logiciel libre (licence Apache 2)Logiciel libre (licence Apache 2)
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Génie logiciel pour les appli. Web riches & AjaxGénie logiciel pour les appli. Web riches & Ajax
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 / MVC / MVP / commande / bus d'événementsComposite / 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
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWT en « mode dev »GWT en « mode dev » Dans Eclipse, une application GWT peut Dans Eclipse, une application GWT peut s'exécuter en « mode dev » (“Development s'exécuter en « mode dev » (“Development Mode”) (”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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Speed TracerSpeed Tracer (extension dans Chrome)(extension dans Chrome)
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWT DesignerGWT Designer
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Comprendre GWTComprendre GWT
GWTGWT
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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 responsible de la logique de l'application et du chargement ou de la sauvegarde des données.
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Vue d'ensemble de l'architecture GWTVue d'ensemble de l'architecture GWT
Bibliothèque IUG
Widgets &Panels
Communicationavec le serveurRPC & Ajax
Analyseur XML
Gestion del'historique
Intégration à JUnit
GWT APIGWT API
Trans compilateur
Java àJavaScript
Interface Native
JavaScriptJSNI
Bibliothèqued'émulation
JRE
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Transcompilateur Java à JavaScript Transcompilateur Java à JavaScript
Java
JavaScript
Run Everywhere!
Write Once...
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
« Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez »
Copyright Google 2008Copyright Google 2008
Transcompilateur – Code optimisé! Transcompilateur – Code optimisé!
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Made in JavaScript
* Source Clipart : http://www.clipart.com
Pourquoi pas JavaScript?Pourquoi pas JavaScript?
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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');
}-*/;}-*/;
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Bibliothèque de composants d'IUBibliothèque de composants d'IU
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Bibliothèque de composants d'IUBibliothèque de composants d'IUBalises HTML usuelles, comme img, anchor, hyperlinkBalises HTML usuelles, comme img, anchor, hyperlinkBouton, bouton radio, bouton à bascule, case à cocherBouton, bouton radio, bouton à bascule, case à cocherMenu, sous-menu, menu déroulantMenu, sous-menu, menu déroulantChamp de texte, zone de texteChamp de texte, zone de texteDifférents panneaux utilespour la dispositionDifférents panneaux utilespour la dispositionOnglets, liste déroulante, boîte de dialogueOnglets, liste déroulante, boîte de dialogueSéparateurs de fenêtreSéparateurs de fenêtreWidgets complexes comme des tables, boîte de Widgets complexes comme des tables, boîte de téléversement de fichier, widget d'arbres, éditeur de téléversement de fichier, widget d'arbres, éditeur de texte enrichi, etc.texte enrichi, etc.
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Interface Utilisateur - Interface Utilisateur - PanneauxPanneaux
http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html
DockPanelDockPanel
TabPanelTabPanel
PopupPanelPopupPanel
HorizontalPanelHorizontalPanel
VerticalPanelVerticalPanel HorizontalSplitPanelHorizontalSplitPanel
VerticalSplitPanelVerticalSplitPanelFlowPanelFlowPanel
DisclosurePanelDisclosurePanel
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Gestion des événementsGestion 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é!");
}}
});});
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Support des CSSSupport des CSS Séparation du code et de la présentationSéparation du code et de la présentation Java :Java :public ListWidget(String Item) {public ListWidget(String Item) { ...... setStyleName(“gwt-ListWidget”);setStyleName(“gwt-ListWidget”);}}
CSS :CSS :.gwt-ListWidget {.gwt-ListWidget { background-color:black;background-color:black; color:lime;color:lime;}}
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
I18N – InternationalisationI18N – Internationalisation
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
I18NI18N Le transcompilateur GWT utilise la liaison Le transcompilateur GWT utilise la liaison
différée (« Deferred Binding ») pour générer différée (« Deferred Binding ») pour générer une version différente de l'application Web une version différente de l'application Web pour chaque langue pour chaque langue
Par exemple, puisque GWT supporte 6 Par exemple, puisque GWT supporte 6 navigateurs différents, si votre application doit navigateurs différents, si votre application doit fonctionner en 3 langues, le transcompilateur fonctionner en 3 langues, le transcompilateur de GWT produira 18 versions différentes de de GWT produira 18 versions différentes de votre application au moment de la compilation votre application au moment de la compilation
À l'exécution, GWT choisira la bonne version À l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateurde l'application à montrer à l'utilisateur
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Communication client-serveur & AjaxCommunication client-serveur & Ajax
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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)
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Communication avec le serveur & AjaxCommunication avec le serveur & AjaxLe RPC (Remote Procedure Call) appel de procédure à distanceLe RPC (Remote Procedure Call) , appel de procédure à distance ,
RPC rend facile l'échange d'objets Java (sérialisés) entre le RPC rend facile l'échange d'objets Java (sérialisés) entre le code-client et le code-serveurcode-client et le code-serveur
Procédure automatique de sérialisation des objetsProcédure automatique de sérialisation des objets
Autres outils Ajax :Autres outils Ajax :
HTTPRequestHTTPRequest
RequestBuilderRequestBuilder
FormPanelFormPanel
Support de :Support de :
XMLXML
JSON (JavaScript Object Notation) JSON (JavaScript Object Notation)
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Intégration facile aux APIs GoogleIntégration facile aux APIs Google
* Source : http://code.google.com/webtoolkit/
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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 AppEngine : déploiement facile d'applications GWT AppEngine : déploiement facile d'applications GWT
dans le nuagedans 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 Gears API : BD locale et navigation hors ligneGoogle Gears API : BD locale et navigation hors ligne Google Language API : services de traductionGoogle Language API : services de traduction ......
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWT – Atelier de Gadgets!GWT – Atelier de Gadgets!
c
Compiler avec GWT pour générer le code JS du gadgetCompiler avec GWT pour générer le code JS du gadget
Déploiement facile sur un serveur Web externeDéploiement facile sur un serveur Web externe
Intégrer facilement le gadget dans un conteneur OpenSocialIntégrer facilement le gadget dans un conteneur OpenSocial
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GUI – Patrons de conceptionGUI – Patrons de conception
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Bus d'événementsBus 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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Contrôleur de l'applicationContrô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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Patron de conception - MVPPatron de conception - MVPModèle-Vue-Présentateur (Model-View-Presenter) Modèle-Vue-Présentateur (Model-View-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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Patron de conception - MVPPatron 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 » / séparationMeilleur « découplage » / séparationPlus 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)Le 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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Patron de conception - MVPPatron 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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
DesDes applications GWT applications GWT
GWTGWTen Actionen Action
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
OpenSyllabus – OpenSyllabus – Un exemple Québécois!Un exemple Québécois!
http://confluence.sakaiproject.org/confluence/display/OSYL/OpenSyllabus+Home
OpenSyllabus : un éditeur structuré de plan de cours
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
aniaqueGWT
GWTGWT – – AAvantages pour les développeursvantages pour les développeurs
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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 RPCCommunications Ajax faciles via RPC 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'un Applet JavaLe code-client est beaucoup plus léger qu'un Applet Java
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ?
J' GWT
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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 Développeurs d'applications Web – Une application GWT s'exécute sur le client plutôt que d'être Une application GWT s'exécute sur le client plutôt que d'être
contrôlée entièrement par le serveurcontrôlée entiè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 ?
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWT vs autres solutions Web richeGWT vs autres solutions Web riche
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Outils purs JavaScript Outils purs JavaScript (jQuery, Scriptaculous, Prototype, YUI, Dojo, etc.) (.jQuery, Scriptaculous, Prototype, YUI, Dojo, etc)
Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!Facilitent beaucoup la programmation JavaScript mais ça reste du JavaScript!
JavaServer Faces JavaServer Faces -- Norme JEE, basé sur le serveur, plutôt complexe Norme JEE, basé sur le serveur, plutôt complexe
JavaFX –JavaFX – Trop peu, trop tard! exige JVMTrop peu, trop tard! exige JVM
Java Applet –Java Applet – Passé de mode et lourd passé!Passé de mode et lourd passé!, exige JVM , exige JVM
ZKZK -- Rapide et facile à programmer, basé sur le serveur, licence GPL Rapide et facile à programmer, basé sur le serveur, licence GPL
Adobe Flash, Flex, AIR Adobe Flash, Flex, AIR (Adobe Integrated Runtime) (Adobe Integrated Runtime) et OpenLazslo et OpenLazslo Basé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à scriptBasé sur le serveur, +/- propriétaire, exige plugiciel Flash, langage à script
Micro$oft Silverlight Micro$oft Silverlight -- propriétaire & basé Windows propriétaire & basé Windows
Windows...Volta, fin Windows...Volta, fin 2007 puis plus rien, une copie 2007 puis plus rien, une copie GWT pour .NETGWT pour .NET
GWT vs autres solutions Web richeGWT vs autres solutions Web riche
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWTGWT - - Avantages & inconvénientsAvantages & inconvénients
* Source Clipart : http://www.clipart.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
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 Séparation nette entre client et serveurSéparation nette entre client et serveur Les composants (widgets) sont de sources et de Les composants (widgets) sont de sources et de
qualités inégalesqualités inégales Dépend des performances du transcompilateurDépend des performances du transcompilateur Lenteur de JavaScriptLenteur de JavaScript Quelques problèmes de compatibilité entre fureteurs, Quelques problèmes de compatibilité entre fureteurs,
surtout au niveau des CSSsurtout au niveau des CSS Certains problèmes demandent une expertise JSCertains problèmes demandent une expertise JS L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
GWT - AvantagesGWT - Avantages Bon pour enrichir des applications Web avec Ajax ou créer Bon pour enrichir des applications Web avec Ajax ou créer
des applications Web riches avec des IUs complexesdes applications Web riches avec des IUs complexes
Un seul langage: JAVAUn seul langage: JAVA
Développement et mise au point rapide dans des EDIs Développement et mise au point rapide dans des EDIs
favorisant une bonne productivité et qualité du codefavorisant une bonne productivité et qualité du code
Riche bibliothèque de composants (~ Swing)Riche bibliothèque de composants (~ Swing)
Très bon support AjaxTrès bon support Ajax
Performant & économe en ressources réseau & serveurPerformant & économe en ressources réseau & serveur
Code source libre, licence Apache 2, bien documentéCode source libre, licence Apache 2, bien documenté
Vaste communauté Vaste communauté (25 000 membres GG GWT)(25 000 membres GG GWT)
Supporté par Google... et l'écosystème des outils GoogleSupporté par Google... et l'écosystème des outils Google
GWT ne va pas résoudre « magiquement » tous les GWT ne va pas résoudre « magiquement » tous les
problèmes avec Ajax ou le Web 2.0problèmes avec Ajax ou le Web 2.0
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Ressources - LivresRessources - Livres
GWT in Practicepar Robert T. Cooper, Charlie E. Collins358 pagesManning Publications (12 mai, 2008)www.manning.com/cooper/
Google Web Toolkit Applicationspar Ryan Dewsbury608 pagesPrentice Hall (15 décembre, 2007)www.gwtapps.com
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Ressources - OutilsRessources - Outils
http://code.google.com/webtoolkithttp://code.google.com/webtoolkit/overview.html
http://groups.google.com/group/google-web-toolkit
http://www.ongwt.com/
http://code.google.com/p/gwt-platform/
Sites généralistes
Groupe de discussions (25 000 membres)
Sites de nouvelles
Socle d'application MVP - GWTP
GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011
Pour en savoir plus...Pour en savoir plus...
Présentation plus Présentation plus complète de GWT complète de GWT au JUG Montréalau JUG Montréal
jeudi 14 avriljeudi 14 avrilUQAM, pav. Sherbrooke,UQAM, pav. Sherbrooke,
local SH-2140 local SH-2140 de 17 h 30 à 19 h 30de 17 h 30 à 19 h 30
* Source Clipart : http://www.clipart.com
Recommended