Gwt intro-101

56
GWT 101 GWT 101 réalisation facile réalisation facile d'applications Web riches d'applications Web riches GTUG Montréal GTUG Montréal Présentation au GTUG Montréal par Claude Coulombe 7 avril 2011 7 avril 2011

description

Introduction à GWT (Google Web Toolkit) à l'occasion du lancement du GTUG Montréal, le jeudi 7 avril 2011 par Claude Coulombe

Transcript of Gwt intro-101

Page 1: Gwt intro-101

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

Page 2: Gwt intro-101

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/

Page 3: Gwt intro-101

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

Page 4: Gwt intro-101

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

Page 5: Gwt intro-101

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

Page 6: Gwt intro-101

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!

Page 7: Gwt intro-101

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

Page 8: Gwt intro-101

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

Page 9: Gwt intro-101

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)

Page 10: Gwt intro-101

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

Page 11: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

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

Page 12: Gwt intro-101

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

Page 13: Gwt intro-101

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/

Page 14: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

GWT DesignerGWT Designer

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

Page 15: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

Comprendre GWTComprendre GWT

GWTGWT

* Source Clipart : http://www.clipart.com

Page 16: Gwt intro-101

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

Page 17: Gwt intro-101

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/

Page 18: Gwt intro-101

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

Page 19: Gwt intro-101

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/

Page 20: Gwt intro-101

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?

Page 21: Gwt intro-101

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');

}-*/;}-*/;

Page 22: Gwt intro-101

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

Page 23: Gwt intro-101

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.

Page 24: Gwt intro-101

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

Page 25: Gwt intro-101

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é!");

}}

});});

Page 26: Gwt intro-101

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;}}

Page 27: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

I18N – InternationalisationI18N – Internationalisation

* Source Clipart : http://www.clipart.com

Page 28: Gwt intro-101

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

Page 29: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

Communication client-serveur & AjaxCommunication client-serveur & Ajax

* Source Clipart : http://www.clipart.com

Page 30: Gwt intro-101

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/

Page 31: Gwt intro-101

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)

Page 32: Gwt intro-101

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/

Page 33: Gwt intro-101

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 ......

Page 34: Gwt intro-101

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

Page 35: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

GUI – Patrons de conceptionGUI – Patrons de conception

* Source Clipart : http://www.clipart.com

Page 36: Gwt intro-101

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

Page 37: Gwt intro-101

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

Page 38: Gwt intro-101

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

Page 39: Gwt intro-101

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

Page 40: Gwt intro-101

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

Page 41: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

DesDes applications GWT applications GWT

GWTGWTen Actionen Action

* Source Clipart : http://www.clipart.com

Page 42: Gwt intro-101

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

Page 43: Gwt intro-101

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

Page 44: Gwt intro-101

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

Page 45: Gwt intro-101

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

Page 46: Gwt intro-101

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

Page 47: Gwt intro-101

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

Page 48: Gwt intro-101

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 ?

Page 49: Gwt intro-101

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

Page 50: Gwt intro-101

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

Page 51: Gwt intro-101

GTUG MontréalGTUG Montréal 7 avril 20117 avril 2011

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

* Source Clipart : http://www.clipart.com

Page 52: Gwt intro-101

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

Page 53: Gwt intro-101

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

Page 54: Gwt intro-101

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

Page 55: Gwt intro-101

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

Page 56: Gwt intro-101

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