0
GWTGWT,, quoi de neuf?quoi de neuf?
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Présentation au
GDG/GTUG M...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
ButBut
Dans cette présentation vous verrez comment le GoogleDa...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Web 1.0Web 1.0 – Cliquez & attendez!– Cliquez & attendez!
* So...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Web 2.0 –Web 2.0 – « L'expérience-utilisateur »« L'expérience-...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
AjaxAjax – Une véritable percée!– Une véritable percée!
AJAXAJ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Créer des applications Web richesCréer des applications Web ri...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Made in JavaScript
* Source Clipart : http://www.clipart.com
P...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JavaScript est eJavaScript est excellent pour l'écriture rapid...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT = Ajax + Génie LogicielGWT = Ajax + Génie Logiciel
GWT =GW...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
 Support du cycle de vie complet du logicielSupport du cycle ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Comprendre GWTComprendre GWT
GWTGWT
* Source Clipart : http://...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Application GWTApplication GWT –– Client & ServeurClient & Ser...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Transcompilateur Java à JavaScriptTranscompilateur Java à Java...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Transcompilateur Java à JavaScriptTranscompilateur Java à Java...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Transcompilateur-Transcompilateur- Liaison différéeLiaison dif...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Structure d'un projet GWTStructure d'un projet GWT
* Source Cl...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
« Ne payez que pour ce que vous utilisez »« Ne payez que pour ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Intégration à Eclipse – débogueurIntégration à Eclipse – débog...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT en « mode dev »GWT en « mode dev » -- DéveloppementDévelop...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT en « mode dev »GWT en « mode dev » -- DéveloppementDévelop...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT en « mode Web » - DéploiementGWT en « mode Web » - Déploie...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT DesignerGWT Designer
* Source : http://www.google.com
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
 Éditeur graphique interactif d'IUÉditeur graphique interacti...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
 Outil de conception d'interface-utilisateur à partir d'uneOu...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Speed TracerSpeed Tracer (extension dans Chrome)(extension dan...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT –– Structure bibliothèque & APIStructure bibliothèque &...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
BibliothèqueBibliothèque
IUGIUG
Widgets &Widgets &
PanelsPanel...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Emulation – JREEmulation – JRE (Java Runtime Environment)(Java...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JSNI : JavaScript Native InterfaceJSNI : JavaScript Native Int...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JSNI : JavaScript Type OverlayJSNI : JavaScript Type Overlay
J...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
JSNI : Type Overlay JavaScriptJSNI : Type Overlay JavaScript
/...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Bibliothèque de composants d'IUBibliothèque de composants d'IU...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IUIU – Programmation par événements– Programmation par événeme...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Gestion des événementsIU - Gestion des événements
 GWT u...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Bibliothèque de composantsIU – Bibliothèque de composants...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Interface Utilisateur -Interface Utilisateur - PanneauxPanneau...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
 La gestion de l'historique du navigateur s'occupe des bouton...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support des CSSSupport des CSS
 Séparation du code et de la p...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support des CSS - conseilsSupport des CSS - conseils
Code Java...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
I18N – InternationalisationI18N – Internationalisation
* Sourc...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
I18NI18N
 Le transcompilateur GWT utilise la liaison différée...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
I18N –I18N – mécanismes de localisationmécanismes de localisat...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Support de HTML5Support de HTML5
 Stockage dans le fureteur (...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Autres évolutionsAutres évolutions
 Chargement de code à la d...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Communication client-serveur & AjaxCommunication client-serveu...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Client léger HTML vs client riche AjaxClient léger HTML vs cli...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Communication avec le serveur & AjaxCommunication avec le serv...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Appel de procédure à distanceAppel de procédure à distance
J
*...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
public class MonClientRPC implements EntryPoint {public class ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Services REST avec RequestBuilderServices REST avec RequestBui...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Intégration facile aux APIs GoogleIntégration facile aux APIs ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Intégration facile aux APIs GoogleIntégration facile aux APIs ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patrons de conceptionIU – Patrons de conception
* Source ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception -IU – Patron de conception - Composi...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception -IU – Patron de conception - Composi...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception -IU – Patron de conception - Command...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU – Patron de conception -IU – Patron de conception - Observa...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Bus d'événementsIU - Bus d'événements
Bus d'événements (E...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Contrôleur de l'applicationIU - Contrôleur de l'applicati...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Patron de conception - MVPIU - Patron de conception - MVP...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Patron de conception - MVPIU - Patron de conception - MVP...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Patron de conception - MVPIU - Patron de conception - MVP...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
IU - Architecture Application MVPIU - Architecture Application...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
DesDes applications GWTapplications GWT
GWTGWT
en Actionen Act...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Google AdWordsGoogle AdWords
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Angry BirdsAngry Birds
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
ZoneCours 2 / OpenSyllabus – Un exemple Québécois!ZoneCours 2 ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT – Applications mobiles multiplateformes– Applications m...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT – Applications mobiles multiplateformes– Applications m...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT et la mobilitéGWT et la mobilité
La performance compte en ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT + PhoneGapGWT + PhoneGap
Combinées à PhoneGap, les apps GW...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
ZoneCours Mobile – HEC MontréalZoneCours Mobile – HEC Montréal
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT -- Avantages & inconvénientsAvantages & inconvénients
*...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT – AGWT – Avantages pour les utilisateursvantages pour les ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT – AGWT – Avantages pour les utilisateursvantages pour les ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
aniaque
GWT
GWTGWT –– AAvantages pour les développeursvantages...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWTGWT –– AAvantages pour les développeursvantages pour les dé...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
 Designers WebDesigners Web
– GWT utilise les feuilles de sty...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT - AvantagesGWT - Avantages
Un seul langage: JAVA + typage ...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT - InconvénientsGWT - Inconvénients
JS
Ajax
* Source Clipar...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT - InconvénientsGWT - Inconvénients
 Nécessite que le fure...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Quand utiliser GWT?Quand utiliser GWT?
 Site Web traditionnel...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
L'avenir de GWT...L'avenir de GWT...
* Source Clipart : http:/...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Événements récents...Événements récents...
 En avril 2012, un...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Road...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Road...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
L'avenir de GWT... c'est HTML5L'avenir de GWT... c'est HTML5
À...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
GWT in Action – 2nd edition
par Robert Hanson, Adam Tacy, Jaso...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Ressources - LivresRessources - Livres
GWT in Practice
par Rob...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Ressources - LivresRessources - Livres
GWT - Créer des applica...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
Ressources - OutilsRessources - Outils
Sites généralistes
Grou...
GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013
QuestionsQuestions
??
* Source Clipart : http://www.clipart.com
Upcoming SlideShare
Loading in...5
×

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

1,137

Published on

Le Google Web Toolkit (GWT) combine les technologies Ajax et HTML5 avec les outils de génie logiciel de Java dans le but de réaliser des applications web riches monopages de grande envergure et des applications mobiles multiplateformes. Après une brève présentation de GWT, nous verrons les nouveautés de la version 2.5, ferons un retour sur la conférence Google I/O 2013 et discuterons du futur de GWT.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,137
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. GWTGWT,, quoi de neuf?quoi de neuf? GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Présentation au GDG/GTUG Montréal par Claude Coulombe
  2. 2. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 ButBut Dans cette présentation vous verrez comment le GoogleDans cette présentation vous verrez comment le Google Web Toolkit (GWT) permet le développement d'applicationsWeb Toolkit (GWT) permet le développement d'applications WebWeb riches (RIA) dotées d'interfacesriches (RIA) dotées d'interfaces complexes etcomplexes et d'applications mobiles multiplateformes performantes.d'applications mobiles multiplateformes performantes. http://code.google.com/webtoolkit/ http://www.gwtproject.com
  3. 3. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Web 1.0Web 1.0 – Cliquez & attendez!– Cliquez & attendez! * Source Clipart : http://www.clipart.com
  4. 4. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Web 2.0 –Web 2.0 – « L'expérience-utilisateur »« L'expérience-utilisateur » * Source Clipart : http://www.clipart.com
  5. 5. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 AjaxAjax – Une véritable percée!– Une véritable percée! AJAXAJAX Le premier à utiliser le terme AJAX fut Jesse James Garrett en février 2005 * Source Clipart : http://www.clipart.com Echange asynchrone + Modification de fragments de page
  6. 6. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Créer des applications Web richesCréer des applications Web riches  Applications Web semblables à des applications bureautiques enApplications Web semblables à des applications bureautiques en exécution locale (Desktop Like)exécution locale (Desktop Like)  Interfaces Web riches / RIA (Rich Internet Application)Interfaces Web riches / RIA (Rich Internet Application)  Interfaces rapides et réactivesInterfaces rapides et réactives  Ouverture de plusieurs fenêtres à la fois dans le navigateur (app.Ouverture de plusieurs fenêtres à la fois dans le navigateur (app. multifenêtres)multifenêtres)  Déplacement des fenêtres dans le navigateur, redimensionnementDéplacement des fenêtres dans le navigateur, redimensionnement et défilement des fenêtreset défilement des fenêtres  Glisser et déposer des contenusGlisser et déposer des contenus  Passage d'applications centrées sur le serveur à des applicationsPassage d'applications centrées sur le serveur à des applications centrées sur le clientcentrées sur le client  Application avec état (statefull) => sans état (stateless)Application avec état (statefull) => sans état (stateless)  Des applications monopages (SPI) qui manipulent le DOMDes applications monopages (SPI) qui manipulent le DOM  Des applications mobiles multiplateformes performantesDes applications mobiles multiplateformes performantes
  7. 7. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Made in JavaScript * Source Clipart : http://www.clipart.com Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?
  8. 8. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 JavaScript est eJavaScript est excellent pour l'écriture rapide de petites applicationsxcellent pour l'écriture rapide de petites applications Le typage dynamique est une source importante d'erreurs qui passentLe typage dynamique est une source importante d'erreurs qui passent inaperçues jusqu'au moment de l'exécutioninaperçues jusqu'au moment de l'exécution Pas d'espace de nommage (collision de variables), manque de modularitéPas d'espace de nommage (collision de variables), manque de modularité et de capacité à grandir, pas un véritable langage à objetset de capacité à grandir, pas un véritable langage à objets Mise au point et réutilisation difficilesMise au point et réutilisation difficiles Incompatibilité entre les fureteursIncompatibilité entre les fureteurs Fuites de mémoireFuites de mémoire NNormal, car JS n'a pas été conçu pour de gros logiciels, mais pour mettreormal, car JS n'a pas été conçu pour de gros logiciels, mais pour mettre un peu d'interactivité dans une page webun peu d'interactivité dans une page web On peut voir le JavaScript comme le langage d'assemblage (assembleur)On peut voir le JavaScript comme le langage d'assemblage (assembleur) du fureteurdu fureteur Pourquoi pas JavaScript ?Pourquoi pas JavaScript ?
  9. 9. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT = Ajax + Génie LogicielGWT = 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
  10. 10. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013  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 pourPlugiciel pour EclipseEclipse Support au débogageSupport au débogage Mise au point & débogage en mode devMise au point & débogage en mode dev Cycle : édition / test / débogage /Cycle : édition / test / débogage / Restructuration / refactorisation (refactoring)‫‏‬Restructuration / refactorisation (refactoring)‫‏‬ Détection d'erreurs à la compilationDétection d'erreurs à la compilation Journalisation (logging)‫‏‬Journalisation (logging)‫‏‬  Patrons de conception OO éprouvésPatrons de conception OO éprouvés Composite / observateur / MVC / MVP / commande / bus d'événementsComposite / observateur / MVC / MVP / commande / bus d'événements  Support deSupport de JUnitJUnit  Support deSupport de AppEngineAppEngine et autres APIs de Googleet autres APIs de Google * Source Clipart : http://www.clipart.com GWT = Ajax + Génie LogicielGWT = Ajax + Génie Logiciel
  11. 11. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Comprendre GWTComprendre GWT GWTGWT * Source Clipart : http://www.clipart.com
  12. 12. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Application GWTApplication GWT –– Client & ServeurClient & Serveur Le code-client en JavaScript est transmis sur le réseau vers un ordinateur-client, où il s'exécute dans un fureteur Web Le code (en Java ou tout autre langage) qui s'exécute sur le serveur est responsable de la logique de l'application. * Source Clipart : http://www.clipart.com L'application Web utilise le serveur pour charger ou sauvegarder des données.
  13. 13. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Transcompilateur Java à JavaScriptTranscompilateur Java à JavaScript Java JavaScript Run Everywhere! Write Once... * Source Clipart : http://www.clipart.com
  14. 14. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Transcompilateur Java à JavaScriptTranscompilateur Java à JavaScript Transcompilateur GWT prend du code-client en Java etTranscompilateur GWT prend du code-client en Java et produit du code JavaScript optimiséproduit du code JavaScript optimisé JavaScript devient le code assembleur du fureteurJavaScript devient le code assembleur du fureteur Élimination du code non-utilisé dans les bibliothèques,Élimination du code non-utilisé dans les bibliothèques, inférence de type, retrait du polymorphisme,inférence de type, retrait du polymorphisme, compression “agressive” du code, « Obfuscation »compression “agressive” du code, « Obfuscation » Le JavaScript produit est généralement plus rapide queLe JavaScript produit est généralement plus rapide que du JavaScript écrit à la main*du JavaScript écrit à la main* Emploi de la liaison différée (“Deferred Binding”) pourEmploi de la liaison différée (“Deferred Binding”) pour produire du code JavaScript optimal pour chaqueproduire du code JavaScript optimal pour chaque fureteur (i.e. génère du code spécifique à chaquefureteur (i.e. génère du code spécifique à chaque fureteur)fureteur) « Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez » * Note : sauf si code < 100 lignes* Note : sauf si code < 100 lignes
  15. 15. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Transcompilateur-Transcompilateur- Liaison différéeLiaison différée « Ne payez que pour ce que vous utilisez » Copyright Google 2008 * Source : http://www.google.com Générer du code optimal et spécifique à chaque fureteurGénérer du code optimal et spécifique à chaque fureteur
  16. 16. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Structure d'un projet GWTStructure d'un projet GWT * Source Clipart : http://www.clipart.com MaPremiereAppli/ src/ PaquetConfig/ MaPremiereAppli.gwt.xml PaquetClient MonPremierService.java MonPremierServiceAsync.java MaPremiereAppli.java PaquetServeur MaPremiereAppli.java META-INF/ jdoconfig.xml log4j.properties war/ mapremierappligwt/ … résultats compilation en JS ... WEB-INF/ lib/ ...App Engine JARs... appengine-web.xml logging.properties web.xml MaPremiereAppli.css MaPremiereAppli.html
  17. 17. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 « Ne payez que pour ce que vous utilisez »« Ne payez que pour ce que vous utilisez » Copyright Google 2008Copyright Google 2008 * Source : http://www.google.com* Source : http://www.google.com Transcompilateur – Code optimisé!Transcompilateur – Code optimisé!
  18. 18. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Intégration à Eclipse – débogueurIntégration à Eclipse – débogueur
  19. 19. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT en « mode dev »GWT en « mode dev » -- DéveloppementDéveloppement * Source : http://www.google.com
  20. 20. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT en « mode dev »GWT en « mode dev » -- DéveloppementDéveloppement Dans Eclipse, une application GWT peutDans Eclipse, une application GWT peut s'exécuter en « mode dev »s'exécuter en « mode dev » (“Development Mode”)‫‏‬(“Development Mode”)‫‏‬ En « mode dev », la JVM exécute le code GWTEn « mode dev », la JVM exécute le code GWT comme du bytecode Java à l'intérieur d'unecomme 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-source RafraîchirRafraîchir Examiner les résultatsExaminer les résultats
  21. 21. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT en « mode Web » - DéploiementGWT en « mode Web » - Déploiement  Une fois testé en « mode dev », vous pouvezUne fois testé en « mode dev », vous pouvez compiler votre code source Java en JavaScript etcompiler votre code source Java en JavaScript et déployer votre application Webdéployer votre application Web  Une application Web GWT qui a été déployée estUne application Web GWT qui a été déployée est dite en « mode Web »dite en « mode Web »  Une fois compilé le code-client est uniquement duUne fois compilé le code-client est uniquement du pur JavaScript et du HTMLpur JavaScript et du HTML  Afin de déployer votre application Web enAfin de déployer votre application Web en production, vous déplacez les fichiers du répertoireproduction, vous déplacez les fichiers du répertoire « war » sur le serveur Web, i.e. Tomcat« war » sur le serveur Web, i.e. Tomcat
  22. 22. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT DesignerGWT Designer * Source : http://www.google.com
  23. 23. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013  Éditeur graphique interactif d'IUÉditeur graphique interactif d'IU  Racheté par Google de la société InstantiationsRacheté par Google de la société Instantiations  Entièrement intégré à Eclipse via un plugicielEntièrement intégré à Eclipse via un plugiciel  Génération de code bidirectionnelleGénération de code bidirectionnelle  Alternance entre la vue Source et la vue DesignAlternance entre la vue Source et la vue Design  Palette de composants avec glisser-déposerPalette de composants avec glisser-déposer  Vue Structure avec l'arbre des composants et un panneauVue Structure avec l'arbre des composants et un panneau pour l'édition des propriétéspour l'édition des propriétés  I18NI18N  Création de composants réutilisables (Composite)Création de composants réutilisables (Composite) GWT DesignerGWT Designer
  24. 24. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013  Outil de conception d'interface-utilisateur à partir d'uneOutil de conception d'interface-utilisateur à partir d'une représentation XML, sans programmationreprésentation XML, sans programmation  Facilite le découplage entre la disposition du contenuFacilite le découplage entre la disposition du contenu en XML, le code du comportement en Java eten XML, le code du comportement en Java et l'apparence gouvernée par des feuilles de style CSSl'apparence gouvernée par des feuilles de style CSS <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <g:HTMLPanel width="450px" height="300px"> <g:VerticalPanel width="450px" height="300px" horizontalAlignment="ALIGN_CENTER"> <g:Cell horizontalAlignment="ALIGN_CENTER"> <g:Label styleName="{style.titreJeu}" text="Jeux des trois portes (Monty Hall Problem)" width="450px" height="20px" horizontalAlignment="ALIGN_CENTER"/> </g:Cell> <g:Cell horizontalAlignment="ALIGN_CENTER"> UiBinderUiBinder
  25. 25. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Speed TracerSpeed Tracer (extension dans Chrome)(extension dans Chrome) * Source : http://www.google.com
  26. 26. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWTGWT –– Structure bibliothèque & APIStructure bibliothèque & API * Source Clipart : http://www.clipart.com
  27. 27. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 BibliothèqueBibliothèque IUGIUG Widgets &Widgets & PanelsPanels CommunicationCommunication avec le serveuravec le serveur RPC & AjaxRPC & Ajax AnalyseurAnalyseur XMLXML Gestion deGestion de l'historiquel'historique IntégrationIntégration à JUnità JUnit GWT APIGWT API TransTrans compilateurcompilateur Java àJava à JavaScriptJavaScript InterfaceInterface NativeNative JavaScriptJavaScript JSNIJSNI BibliothèqueBibliothèque d'émulationd'émulation JREJRE La structure du gwt-user.jarLa structure du gwt-user.jar GWTGWT –– Structure bibliothèque & APIStructure bibliothèque & API Note : Transcompilateur GWTNote : Transcompilateur GWT dans gwt-dev-windows.jardans gwt-dev-windows.jar
  28. 28. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Emulation – JREEmulation – JRE (Java Runtime Environment)(Java Runtime Environment) Le transcompilateur de GWT fournit l'émulation enLe transcompilateur de GWT fournit l'émulation en JavaScript d'un sous-ensemble du langage Java (JRE)JavaScript d'un sous-ensemble du langage Java (JRE) généralement utilisé pour la programmation de basegénéralement utilisé pour la programmation de base java.lang, java.util, java.io, java.sqljava.lang, java.util, java.io, java.sql Restriction pour le code clientRestriction pour le code client devant être traduit en JavaScript.devant être traduit en JavaScript. Aucune restriction n'est imposéeAucune restriction n'est imposée du côté du code serveur : Javadu côté du code serveur : Java (JSP/JSF/Servlet), PHP,(JSP/JSF/Servlet), PHP, ASP .NET, Perl, RoR, Python, Perl, ...ASP .NET, Perl, RoR, Python, Perl, ... * Source image : http://www.sun.com* Source image : http://www.sun.com
  29. 29. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 JSNI : JavaScript Native InterfaceJSNI : JavaScript Native Interface Intégration facile avec des bibliothèques JavaScriptInté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) à partirInteragir directement avec JavaScript (accès natif) à partir de Java et vice-versade Java et vice-versa Inclusion automatique des bibliothèques JavaScriptInclusion automatique des bibliothèques JavaScript JavaScript Overlay pour simplifier l'intégration deJavaScript 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'); }-*/;}-*/;
  30. 30. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 JSNI : JavaScript Type OverlayJSNI : JavaScript Type Overlay JavaScript Type Overlay pour simplifier l'intégration de prototypesJavaScript Type Overlay pour simplifier l'intégration de prototypes JavaScript dans GWTJavaScript dans GWT Une structure de données JSON (JavaScript Object Notation)Une structure de données JSON (JavaScript Object Notation) var personnesJSON = [var personnesJSON = [ { "Prenom" : "Nathalie", "NomFamille" : "Tremblay" }, { "Prenom" : "Jean", "NomFamille" : "Dupont" },{ "Prenom" : "Nathalie", "NomFamille" : "Tremblay" }, { "Prenom" : "Jean", "NomFamille" : "Dupont" }, { "Prenom" : "Bill", "NomFamille" : "Gates" }, { "Prenom" : "Steve", "NomFamille" : "Jobs" }{ "Prenom" : "Bill", "NomFamille" : "Gates" }, { "Prenom" : "Steve", "NomFamille" : "Jobs" } ];]; // Un type Overlay JavaScript// Un type Overlay JavaScript class Personne extends JavaScriptObject {class Personne extends JavaScriptObject { // Un type Overlay JS a toujours un constructeur protected, à zéro argument// Un type Overlay JS a toujours un constructeur protected, à zéro argument protected Personne() { }protected Personne() { } // Les méthodes dans un Overlay JavaScript sont en JSNI// Les méthodes dans un Overlay JavaScript sont en JSNI public final native String getPrenom() /*-{ return this.Prenom; }-*/;public final native String getPrenom() /*-{ return this.Prenom; }-*/; public final native String getNomFamille() /*-{ return this.NomFamille; }-*/;public final native String getNomFamille() /*-{ return this.NomFamille; }-*/; // Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI// Notez, toutefois, que toutes les méthodes ne sont pas obligatoirement en JSNI public final String getNomComplet() {public final String getNomComplet() { return getPrenom() + " " + getNomFamille();return getPrenom() + " " + getNomFamille(); }} }}
  31. 31. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 JSNI : Type Overlay JavaScriptJSNI : Type Overlay JavaScript // Obtenir un prototype JavaScript pour l'Overlay// Obtenir un prototype JavaScript pour l'Overlay class MonModuleEntryPoint implements EntryPoint {class MonModuleEntryPoint implements EntryPoint { public void onModuleLoad() {public void onModuleLoad() { Personne p = getPremierePersonne();Personne p = getPremierePersonne(); // Youppi! Maintenant j'ai un prototype JavaScript qui est aussi une Personne// Youppi! Maintenant j'ai un prototype JavaScript qui est aussi une Personne Window.alert("Bonjour, " + p.getPrenom());Window.alert("Bonjour, " + p.getPrenom()); }} // Utilisation de JSNI pour obtenir le prototype JSON que nous désirons// Utilisation de JSNI pour obtenir le prototype JSON que nous désirons // Le prototype JSON object reçoit un type Java implicitement// Le prototype JSON object reçoit un type Java implicitement // en se basant sur le type retourné par la méthode// en se basant sur le type retourné par la méthode private native Personne getPremierePersonne() /*-{private native Personne getPremierePersonne() /*-{ // Obtenir une référence à la première Personne dans le tableau JSON// Obtenir une référence à la première Personne dans le tableau JSON return $wnd.personnesJSON[0];return $wnd.personnesJSON[0]; }-*/;}-*/; }} * Source : http://googlewebtoolkit.blogspot.com* Source : http://googlewebtoolkit.blogspot.com
  32. 32. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Bibliothèque de composants d'IUBibliothèque de composants d'IU * Source Clipart : http://www.clipart.com
  33. 33. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IUIU – Programmation par événements– Programmation par événements Essentiellement de la programmation par événementsEssentiellement de la programmation par événements Une méthode ou procédure s'exécute quand unUne méthode ou procédure s'exécute quand un événement est déclenchéévénement est déclenché Dans une IU, un événement est déclenché chaque foisDans une IU, un événement est déclenché chaque fois que l'utilisateur clique sur la souris, appuie sur uneque l'utilisateur clique sur la souris, appuie sur une touche du clavier, sélectionne un élément dans untouche du clavier, sélectionne un élément dans un menu, ouvre ou ferme une fenêtre, etc.menu, ouvre ou ferme une fenêtre, etc. À chaque composant de l'IU appelé aussi contrôle ouÀ chaque composant de l'IU appelé aussi contrôle ou widget (comme un bouton, un menu, etc.) est associéwidget (comme un bouton, un menu, etc.) est associé un ou plusieurs gestionnaires d'événements (Handler)un ou plusieurs gestionnaires d'événements (Handler) qui peuvent comporter des paramètresqui peuvent comporter des paramètres
  34. 34. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Gestion des événementsIU - Gestion des événements  GWT utilise le concept de gestionnaire d'événementGWT 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 laSemblable à 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 widgetdé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é!"); }} });});
  35. 35. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU – Bibliothèque de composantsIU – Bibliothèque de composants Éléments statiques: étiquetteÉléments statiques: étiquette ((LabelLabel), HTML, Image, hyperlien (), HTML, Image, hyperlien (HyperlinkHyperlink), champ), champ caché (caché (HiddenHidden)) Widgets (E/S) : bouton (Widgets (E/S) : bouton (ButtonButton), bouton poussoir (), bouton poussoir (PushButtonPushButton), bouton à bascule), bouton à bascule ((ToggleButtonToggleButton), case à cocher (), case à cocher (CheckBoxCheckBox), bouton radio (), bouton radio (RadioButtonRadioButton), menu déroulant), menu déroulant ((ListBoxListBox), zone de texte (), zone de texte (TextBoxTextBox), zone de texte avec suggestions (), zone de texte avec suggestions (SuggestBoxSuggestBox), zone), zone d'entrée de mot de passe (d'entrée de mot de passe (PasswordTextBoxPasswordTextBox), zone de texte multiligne (), zone de texte multiligne (TextAreaTextArea), zone), zone d'édition de texte enrichi (d'édition de texte enrichi (RichTextAreaRichTextArea)) Widgets complexes : arbre (Widgets complexes : arbre (TreeTree), barre de menus (), barre de menus (MenuBarMenuBar), téléversement de), téléversement de fichiers (fichiers (FileUploadFileUpload)) Panneaux de disposition simple : panneau en file (Panneaux de disposition simple : panneau en file (FlowPanelFlowPanel), panneau horizontal), panneau horizontal ((Horizontal PanelHorizontal Panel), panneau vertical (), panneau vertical (VerticalPanelVerticalPanel), panneau à coulisse (), panneau à coulisse (SplitPanelSplitPanel),), panneau HTML (panneau HTML (HTMLPanelHTMLPanel), panneau superposé (), panneau superposé (TabLayoutPanelTabLayoutPanel)) Panneaux de disposition complexe : table flexible* (Panneaux de disposition complexe : table flexible* (FlexTableFlexTable), grille (), grille (GridGrid), panneau), panneau polyptyque*polyptyque* (DockLayoutPanel),(DockLayoutPanel), panneau à onglets (panneau à onglets (TabLayoutPanelTabLayoutPanel), panneau en pile), panneau en pile ((StackLayoutPanelStackLayoutPanel)) Panneaux conteneurs simples : panneau composite ou composite (Panneaux conteneurs simples : panneau composite ou composite (CompositeComposite) panneau) panneau simple (simple (SimplePanelSimplePanel), panneau à barre de défilement (), panneau à barre de défilement (ScrollPanelScrollPanel), panneau de focus), panneau de focus ((FocusPanelFocusPanel)) Panneaux conteneurs complexes : panneau de formulaire (Panneaux conteneurs complexes : panneau de formulaire (FormPanelFormPanel), panneau à), panneau à dévoilement* (dévoilement* (DisclosurePanelDisclosurePanel), panneau surprise* (), panneau surprise* (PopupPanelPopupPanel), boîte de dialogue), boîte de dialogue ((DialogBoxDialogBox)) http://gwt.google.com/samples/Showcase/Showcase.htmhttp://gwt.google.com/samples/Showcase/Showcase.htmll
  36. 36. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Interface Utilisateur -Interface Utilisateur - PanneauxPanneaux http://gwt.google.com/samples/Showcase/Showcase.htmlhttp://gwt.google.com/samples/Showcase/Showcase.html DockLayoutPanelDockLayoutPanel TabLayoutPanelTabLayoutPanel PopupPanelPopupPanel HorizontalPanelHorizontalPanel VerticalPanelVerticalPanel SplitLayoutPanelSplitLayoutPanel SplitLayoutPanelSplitLayoutPanel FlowPanelFlowPanel DisclosurePanelDisclosurePanel
  37. 37. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013  La gestion de l'historique du navigateur s'occupe des boutons «La gestion de l'historique du navigateur s'occupe des boutons « avancer » et « reculer » et des hyperliensavancer » et « reculer » et des hyperliens  Une API simple de gestion de l'historique basée sur une pile deUne API simple de gestion de l'historique basée sur une pile de jetonsjetons Lorsque l'application démarre, la pile est videLorsque l'application démarre, la pile est vide Lorsque l'utilisateur clique sur quelque choseLorsque l'utilisateur clique sur quelque chose Vous pouvez ajouter des jetons sur la pileVous pouvez ajouter des jetons sur la pile History.newItem(“nouveauJeton”)‫‏‬History.newItem(“nouveauJeton”)‫‏‬  Classe Hyperlink ajoute des jetons automatiquementClasse Hyperlink ajoute des jetons automatiquement Vous pouvez aussi réagir aux événements “History events” enVous pouvez aussi réagir aux événements “History events” en utilisant un HistoryListenerutilisant un HistoryListener History.addHistoryListener(controle)‫‏‬History.addHistoryListener(controle)‫‏‬  Le mécanisme des Activities et Places (A&P) pour créer des URLsLe mécanisme des Activities et Places (A&P) pour créer des URLs signables (bookmarkable)signables (bookmarkable) Gestion de l'historique du navigateurGestion de l'historique du navigateur
  38. 38. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Support des CSSSupport des CSS  Séparation du code et de la présentationSéparation du code et de la présentation  Code Java :Code Java : public ListWidget(String Item) {public ListWidget(String Item) { ...... setStyleName(“gwt-ListWidget”);setStyleName(“gwt-ListWidget”); }}  Fichier CSS :Fichier CSS : .gwt-ListWidget {.gwt-ListWidget { background-color:black;background-color:black; color:lime;color:lime; }}
  39. 39. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Support des CSS - conseilsSupport des CSS - conseils Code Java : (usage de CSS primaire et dépendant) MonPetitWidget monPW = new MonPetitWidget();MonPetitWidget monPW = new MonPetitWidget(); monPW.setStylePrimaryName("monPetitWidget");monPW.setStylePrimaryName("monPetitWidget"); monPW.addStyleDependentName("selected");monPW.addStyleDependentName("selected"); Fichier CSS :Fichier CSS : .monpetitWidget {.monpetitWidget { background-color:black;background-color:black; color:lime;color:lime; }} .monPetitWidget .monPetitWidget-selected {.monPetitWidget .monPetitWidget-selected { color:red;color:red; }} Permet de faire varier facilement l'apparence en fonction de l'étatPermet de faire varier facilement l'apparence en fonction de l'état Note : Ne pas utiliser les CSS pour la dispositionNote : Ne pas utiliser les CSS pour la disposition (ex.(ex. .monPetitWidget.monPetitWidget { position: absolute; }{ position: absolute; } ))
  40. 40. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 I18N – InternationalisationI18N – Internationalisation * Source Clipart : http://www.clipart.com
  41. 41. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 I18NI18N  Le transcompilateur GWT utilise la liaison différée («Le transcompilateur GWT utilise la liaison différée (« Deferred Binding ») pour générer une version différenteDeferred Binding ») pour générer une version différente de l'application Web pour chaque languede l'application Web pour chaque langue  Par exemple, puisque GWT supporte 5 navigateursPar exemple, puisque GWT supporte 5 navigateurs différents, si votre application doit fonctionner en 3différents, si votre application doit fonctionner en 3 langues, le transcompilateur de GWT produira 15langues, le transcompilateur de GWT produira 15 versions différentes de votre application au moment deversions différentes de votre application au moment de la compilationla compilation  À l'exécution, GWT choisira la bonne version deÀ l'exécution, GWT choisira la bonne version de l'application à montrer à l'utilisateurl'application à montrer à l'utilisateur
  42. 42. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 I18N –I18N – mécanismes de localisationmécanismes de localisation  ““Constants” pour des chaînes constantes et des réglagesConstants” pour des chaînes constantes et des réglages  ““Messages” pour les chaînes avec des argumentsMessages” pour les chaînes avec des arguments  ““DateTimeFormat” pour les dates et l'heureDateTimeFormat” pour les dates et l'heure  ““NumberFormat” pour les nombres et les unités de mesureNumberFormat” pour les nombres et les unités de mesure  Pas de processus dynamique (tout est statique et fait à laPas de processus dynamique (tout est statique et fait à la compilation), sinon il faut développer son propre mécanismecompilation), sinon il faut développer son propre mécanisme
  43. 43. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Support de HTML5Support de HTML5  Stockage dans le fureteur (local storage)Stockage dans le fureteur (local storage)  Canvas – graphisme et animationCanvas – graphisme et animation  AudioAudio  VideoVideo  Elemental LibraryElemental Library Permet de travailler directement avec l'API HTML5 duPermet de travailler directement avec l'API HTML5 du fureteurfureteur
  44. 44. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Autres évolutionsAutres évolutions  Chargement de code à la demande (code splitting) – GWT.runAsync(...)Chargement de code à la demande (code splitting) – GWT.runAsync(...)  Gestion asynchrone des ressources (ClientBundle)Gestion asynchrone des ressources (ClientBundle)  RequestFactory (nouveau modèle RPC)RequestFactory (nouveau modèle RPC)  Support du patron de conception MVP (Modèle Vue Présentateur)Support du patron de conception MVP (Modèle Vue Présentateur)  Bus d'événements (eventBus)Bus d'événements (eventBus)  CellWidgets (composants légers à base de cellules typées)CellWidgets (composants légers à base de cellules typées)  Socle Activités et Places (Actvities & Places)Socle Activités et Places (Actvities & Places)  GIN (GWT INjection) – injection de dépendances dans GWT basé surGIN (GWT INjection) – injection de dépendances dans GWT basé sur GuiceGuice  Plugiciel Eclipse (Plugin)Plugiciel Eclipse (Plugin)  Super DevMode de GWT 2.5 (avec SourceMaps pour établir laSuper DevMode de GWT 2.5 (avec SourceMaps pour établir la correspondance Java <=> JavaScript)correspondance Java <=> JavaScript)  Passage d'un placement (layout) par tableaux à un placement CSSPassage d'un placement (layout) par tableaux à un placement CSS  GXT (ExtJS), SmartGWT, GWT-DnD, GChart, Vaadin, GWTP (Arcbees QC!)GXT (ExtJS), SmartGWT, GWT-DnD, GChart, Vaadin, GWTP (Arcbees QC!)
  45. 45. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Communication client-serveur & AjaxCommunication client-serveur & Ajax * Source Clipart : http://www.clipart.com
  46. 46. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Client léger HTML vs client riche AjaxClient léger HTML vs client riche Ajax * Source : http://www.google.com* Source : http://www.google.com Serveur avec état (statefull) Serveur sans é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)
  47. 47. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Communication avec le serveur & AjaxCommunication avec le serveur & Ajax RPC (« Remote Procedure Call »)‫,‏‬ appel de procédure à distanceRPC (« Remote Procedure Call »)‫,‏‬ appel de procédure à distance RPC rend facile l'échange d'objets Java ou POJOS (sérialisés)RPC rend facile l'échange d'objets Java ou POJOS (sérialisés) entre le code-client et le code-serveurentre le code-client et le code-serveur GWT RPC fournit une procédure automatique de sérialisation desGWT RPC fournit une procédure automatique de sérialisation des objetsobjets Autres outils Ajax :Autres outils Ajax : RequestBuilderRequestBuilder RequestFactoryRequestFactory HTTPRequestHTTPRequest FormPanelFormPanel Support de :Support de : XMLXML JSON (JavaScript Object Notation)JSON (JavaScript Object Notation)
  48. 48. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Appel de procédure à distanceAppel de procédure à distance J * Source : http://www.google.com* Source : http://www.google.com GWT offre le très utile mécanisme d'appel de procédure à distance ou RPCGWT offre le très utile mécanisme d'appel de procédure à distance ou RPC (Remote Procedure Call), comme moyen de communiquer avec les services(Remote Procedure Call), comme moyen de communiquer avec les services hébergés sur un serveur JEE. Client et serveur parlent alors le même langage,hébergés sur un serveur JEE. Client et serveur parlent alors le même langage, i.e. le Javai.e. le Java
  49. 49. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 public class MonClientRPC implements EntryPoint {public class MonClientRPC implements EntryPoint { public void onModuleLoad() {public void onModuleLoad() { final Button bouton = new Button("Appel RPC");final Button bouton = new Button("Appel RPC"); final MonServiceAsync serviceProxy =final MonServiceAsync serviceProxy = (MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class);(MonServiceAsync)GWT.create(qc.ets.web2.gwt.client.MonService.class); ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy;ServiceDefTarget pointService = (ServiceDefTarget) serviceProxy; pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService");pointService.setServiceEntryPoint(GWT.getModuleBaseURL() + "/reponseService"); bouton.addClickListener(new ClickListener( ) {bouton.addClickListener(new ClickListener( ) { public void onClick(Widget emetteur) {public void onClick(Widget emetteur) { AsyncCallback maProcedureDeRappel = new AsyncCallback() {AsyncCallback maProcedureDeRappel = new AsyncCallback() { public void onSuccess(Object resultat) {public void onSuccess(Object resultat) { MesDonneesDO resultatDO = (MesDonneesDO) resultat;MesDonneesDO resultatDO = (MesDonneesDO) resultat; System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees());System.out.println("*** SUCCES RPC ***n" + resultatDO.getDonnees()); }} public void onFailure(Throwable erreur) {public void onFailure(Throwable erreur) { System.out.println("*** ERREUR RPC ***" + erreur.getMessage());System.out.println("*** ERREUR RPC ***" + erreur.getMessage()); }} };}; serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel);serviceProxy.getReponseMonService("Requete bidon", maProcedureDeRappel); }});}}); RootPanel.get("emprise1").add(bouton);RootPanel.get("emprise1").add(bouton); }} }} RPC - Code-clientRPC - Code-client
  50. 50. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Services REST avec RequestBuilderServices REST avec RequestBuilder RequestBuilder builder = new RequestBuilder(RequestBuilder.GET, URL.encode(url)); try { builder.sendRequest(null, new RequestCallback() { @Override public void onError(Request request, Throwable exception) { // Incapable de se connecter au serveur (Timeout, violation SOP, etc.) } public void onResponseReceived(Request request, Response response { if (200 == response.getStatusCode()) { // Traiter la réponse du serveur dans response.getText() } else { // Traiter une erreur de traitement du côté serveur } } }); } catch (RequestException e) { // Traiter une erreur de requête }
  51. 51. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Intégration facile aux APIs GoogleIntégration facile aux APIs Google * Source : http://www.google.com
  52. 52. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Intégration facile aux APIs GoogleIntégration facile aux APIs Google  Google a un riche écosystème d'APIs en source libreGoogle a un riche écosystème d'APIs en source libre  GWT-Google-APIsGWT-Google-APIs http://code.google.com/p/gwt-google-apishttp://code.google.com/p/gwt-google-apis  AppEngine: déploiement facile d'app. GWT dans le nuageAppEngine: déploiement facile d'app. GWT dans le nuage  Androïd : réalisation d'applications mobiles avec GWTAndroïd : réalisation d'applications mobiles avec GWT  OpenSocial : réalisation facile de gadgets avec GWTOpenSocial : réalisation facile de gadgets avec GWT  Google Maps APIs : services de cartes et géolocationGoogle Maps APIs : services de cartes et géolocation  Google Ajax Search APIs : le moteur Google SearchGoogle Ajax Search APIs : le moteur Google Search  Google Language API : services de traductionGoogle Language API : services de traduction  ......
  53. 53. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU – Patrons de conceptionIU – Patrons de conception * Source Clipart : http://www.clipart.com
  54. 54. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU – Patron de conception -IU – Patron de conception - CompositeComposite * Source : http://www.google.com* Source : http://www.google.com Patron Composite (ou Object Composite)Patron Composite (ou Object Composite) Facilite la création de WidgetsFacilite la création de Widgets S'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existantsS'utilise chaque fois qu'on crée un nouveau widget à partir de widgets existants Offre un meilleur contrôle sur l'API exposéOffre un meilleur contrôle sur l'API exposé Généralement préférable à l'utilisation de l'héritageGénéralement préférable à l'utilisation de l'héritage * Source : http://fr.wikipedia.org/wiki/Objet_composite* Source : http://fr.wikipedia.org/wiki/Objet_composite
  55. 55. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU – Patron de conception -IU – Patron de conception - CompositeComposite class MonPremierComposite extends Composite { private VerticalPanel conteneur = new VerticalPanel(); private Label monTitre = new Label(); private TextBox maZoneTexte = new TextBox(); // Constructeur public MonPremierComposite() { conteneur.add(monTitre); conteneur.add(maZoneTexte); initWidget(conteneur); } }
  56. 56. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU – Patron de conception -IU – Patron de conception - CommandeCommande Le patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'uneLe patron de conception Commande (Command Pattern) encapsule dans un objet la notion d'invocation d'une action ou commande souvent à être invoquée à un moment ultérieur.action ou commande souvent à être invoquée à un moment ultérieur. Le patron comporte trois parties : l'invocateur, la commande et le récepteur.Le patron comporte trois parties : l'invocateur, la commande et le récepteur. Le patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le codeLe patron « Commande » permet de découpler le code qui déclenche l'action (le code d'invocation) et le code de l'action elle-même.de l'action elle-même. Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments.Par exemple, les différents items d'un menu sont associés chacun à une Commande et à ses arguments. Ainsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenterAinsi, l'item de menu ignore les détails de l'action effectuée par la Commande. Aussi utilisé pour implémenter le « undo ».le « undo ». << Interface >> Commande + executer() CommandeImpl + executer() Invocateur + événement1(...) + événement2(...) Récepteur + action1(...) + action2(...)
  57. 57. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU – Patron de conception -IU – Patron de conception - ObservateurObservateur * Patron observateur relie MV et VC dans le patron MVC* Patron observateur relie MV et VC dans le patron MVC Source figure : R. Dewsbury 2008 – Chap.2, p.96Source figure : R. Dewsbury 2008 – Chap.2, p.96 Le Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer laLe Modèle utilise le patron de conception Observateur (Observer Pattern) pour informer la Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle*Vue/Contrôleur du changement des données et bien découpler la Vue du Modèle* Ainsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) àAinsi, différents éléments du Modèle servent de sujets ou données observables (Subjects) à un ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont enun ensemble d'observateurs (Observers) contenus dans les Vues/Contrôleurs qui sont en quelque sorte abonnés aux modifications des données du modèle.quelque sorte abonnés aux modifications des données du modèle. Programmation événementielle qui favorise un découplage des composantsProgrammation événementielle qui favorise un découplage des composants Compromis entre un petit nombre d'événements généraux du genre « quelque chose » aCompromis entre un petit nombre d'événements généraux du genre « quelque chose » a changé dans le modèle (granularité grossière) et un grand nombre de petits événementschangé dans le modèle (granularité grossière) et un grand nombre de petits événements reliés à des éléments très précis du modèle (granularité fine).reliés à des éléments très précis du modèle (granularité fine).
  58. 58. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Bus d'événementsIU - Bus d'événements Bus d'événements (Event Bus) : peut être vu commeBus d'événements (Event Bus) : peut être vu comme un système téléphonique qui relie les composants deun système téléphonique qui relie les composants de l'applicationl'application Les composants émettent et reçoivent desLes composants émettent et reçoivent des événements (events).événements (events). Les composants peuvent réagir différemment selon leLes composants peuvent réagir différemment selon le type d'événement reçustype d'événement reçus
  59. 59. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Contrôleur de l'applicationIU - Contrôleur de l'application Le contrôleur de l'application (Application Controller)Le contrôleur de l'application (Application Controller) est en quelque sorte le chef d'orchestre deest en quelque sorte le chef d'orchestre de l'application.l'application. Le contrôleur de l'application contient la logique deLe contrôleur de l'application contient la logique de l'applicationl'application
  60. 60. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Patron de conception - MVPIU - Patron de conception - MVP Patron MVP : Modèle-Vue-Présentateur (Model-View-Patron MVP : Modèle-Vue-Présentateur (Model-View- Presenter)Presenter) Modèle Présentateur Vue VueVue:: Affiche lesAffiche les informations etinformations et achemine lesachemine les actionsactions (événements)(événements) de l'usagerde l'usager ModèleModèle:: Données duDonnées du composantcomposant (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 busl'application via le bus d'événements.d'événements. Reçoit des événementsReçoit des événements de la Vuede la Vue Communique avec leCommunique avec le serveur via des servicesserveur via des services Bus É V É N E M E N T S S E R V I C E S
  61. 61. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Patron de conception - MVPIU - Patron de conception - MVP Modè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 Google Meilleur « découplage »Meilleur « découplage » Plus facile de répartir le code entre développeursPlus facile de répartir le code entre développeurs Plus facile à testerPlus facile à tester en remplaçant la vue par une vueen remplaçant la vue par une vue factice (MockView)factice (MockView) Code davantage testable et maintenableCode davantage testable et maintenable Le modèle contient les données à afficherLe modèle contient les données à afficher La vue correspond à une interface d'affichage. LesLa 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énementsCertains 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
  62. 62. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Patron de conception - MVPIU - Patron de conception - MVP Le présentateur travaille avec des interfaces pas desLe 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 lesIl 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énementsLe présentateur reçoit également les événements envoyés par les autres composants de l'application etenvoyés par les autres composants de l'application et il émet ses propres événements via le busil é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èle Le présenteur et la vue associée sont couplés via uneLe présenteur et la vue associée sont couplés via une Interface d'AffichageInterface d'Affichage
  63. 63. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 IU - Architecture Application MVPIU - Architecture Application MVP Modèle Présentateur Vue Modèle Présentateur Vue Modèle Présentateur Vue BUS D'ÉVÉNEMENTS Contrôleur de l'Application Service Serveur Service
  64. 64. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 DesDes applications GWTapplications GWT GWTGWT en Actionen Action * Source Clipart : http://www.clipart.com
  65. 65. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Google AdWordsGoogle AdWords
  66. 66. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Angry BirdsAngry Birds
  67. 67. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 ZoneCours 2 / OpenSyllabus – Un exemple Québécois!ZoneCours 2 / OpenSyllabus – Un exemple Québécois!
  68. 68. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWTGWT – Applications mobiles multiplateformes– Applications mobiles multiplateformes * Source : http://www.google.com
  69. 69. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWTGWT – Applications mobiles multiplateformes– Applications mobiles multiplateformes Développer pour chaque plateforme une application native ouDévelopper pour chaque plateforme une application native ou développer une application multiplateforme?développer une application multiplateforme? Si l'application n'a pas besoin d'accéder à des périphériquesSi l'application n'a pas besoin d'accéder à des périphériques spécifiques, de performances « temps réel » ou le dessin 3D, il estspécifiques, de performances « temps réel » ou le dessin 3D, il est préférable de créer une application multiplateforme.préférable de créer une application multiplateforme. Dans ce contexte, le fureteur est la plateforme et les technologiesDans ce contexte, le fureteur est la plateforme et les technologies du fureteur, comme JavaScript, HTML et CSS sont à privilégierdu fureteur, comme JavaScript, HTML et CSS sont à privilégier La boîte à outils Ajax GWT facilite la création d'un clientLa boîte à outils Ajax GWT facilite la création d'un client multiplateforme sur la base d’une application web pour mobile etmultiplateforme sur la base d’une application web pour mobile et d'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWTd'ajouts spécifiques via les bibliothèques comme PhoneGap, mGWT et GwtMobileet GwtMobile À long terme, extension de la norme HTML5 et l’accroissementÀ long terme, extension de la norme HTML5 et l’accroissement des performances des engins JavaScriptdes performances des engins JavaScript
  70. 70. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT et la mobilitéGWT et la mobilité La performance compte en mobilitéLa performance compte en mobilité processeurs lents / réseaux lents / alimentation par batteriesprocesseurs lents / réseaux lents / alimentation par batteries GWT est très bien positionné au niveau de la performanceGWT est très bien positionné au niveau de la performance Gzip de HTML, CSS et JavaScript => ServletFilterGzip de HTML, CSS et JavaScript => ServletFilter taille du codetaille du code chargement asynchrone ou différés des scriptschargement asynchrone ou différés des scripts usage des cachesusage des caches usages des ressources: ClientBundles + ImageResources + CssResourcesusages des ressources: ClientBundles + ImageResources + CssResources Division du code => GWT.runAsync()Division du code => GWT.runAsync() Appels par lots des données => patron de conception commande +Appels par lots des données => patron de conception commande + schedulerscheduler Mises en page « natives » & animations « natives » => CSSMises en page « natives » & animations « natives » => CSS Source : Daniel Kurka – Google I/O 2013 – Gwt Roadmap for the Future
  71. 71. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT + PhoneGapGWT + PhoneGap Combinées à PhoneGap, les apps GWT roulent sur tous les téléphones et tablettesCombinées à PhoneGap, les apps GWT roulent sur tous les téléphones et tablettes Visuel natif (look and feel)Visuel natif (look and feel) API natives via les standards du WebAPI natives via les standards du Web Le même code pour les téléphones, les tablettes et les ordinateurs personnelsLe même code pour les téléphones, les tablettes et les ordinateurs personnels Les mêmes modèlesLes mêmes modèles Les mêmes présentateurs (presenters)Les mêmes présentateurs (presenters) Les mêmes services (RPC, REST, ...)Les mêmes services (RPC, REST, ...) Des vues différentesDes vues différentes Des navigations différentesDes navigations différentes mgwt et gwt-mobile - widgets GWT pour la mobilitémgwt et gwt-mobile - widgets GWT pour la mobilité gwt-phonegap et gwt-mobile-phonegap- des enrobage (wrapping) JSNI de lagwt-phonegap et gwt-mobile-phonegap- des enrobage (wrapping) JSNI de la bibliothèque JavaScript PhoneGap pur l'intégrer aux applications GWTbibliothèque JavaScript PhoneGap pur l'intégrer aux applications GWT Source : Daniel Kurka – Google I/O 2013 – Gwt Roadmap for the Future
  72. 72. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 ZoneCours Mobile – HEC MontréalZoneCours Mobile – HEC Montréal
  73. 73. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWTGWT -- Avantages & inconvénientsAvantages & inconvénients * Source Clipart : http://www.clipart.com
  74. 74. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT – AGWT – Avantages pour les utilisateursvantages pour les utilisateurs * Source Clipart : http://www.clipart.com
  75. 75. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 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 enL'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
  76. 76. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 aniaque GWT GWTGWT –– AAvantages pour les développeursvantages pour les développeurs * Source Clipart : http://www.clipart.com
  77. 77. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 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'appuyantEncourage les bonnes pratiques du génie logiciel en s'appuyant sur des outils Java matures et performantssur des outils Java matures et performants  Eclipse, NetBeans, IntelliJEclipse, NetBeans, IntelliJ  Communications Ajax faciles via RPC et REST via RequestBuilderCommunications Ajax faciles via RPC et REST via RequestBuilder  S'intègre aux technologies Web standardsS'intègre aux technologies Web standards  Réduit la charge sur le serveur et le réseauRéduit la charge sur le serveur et le réseau  Le code-client est beaucoup plus léger qu'une Applet JavaLe code-client est beaucoup plus léger qu'une Applet Java
  78. 78. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Qui peut le mieux profiter de GWT ?Qui peut le mieux profiter de GWT ? J' GWT * Source Clipart : http://www.clipart.com
  79. 79. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013  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 JavaDéveloppeurs d'applications Web Java – Une application GWT s'exécute sur le client plutôt que d'être contrôléeUne application GWT s'exécute sur le client plutôt que d'être contrôlée entièrement par le serveurentièrement par le serveur – Doivent maîtriser les technologies du client riche et de présentationDoivent maîtriser les technologies du client riche et de présentation Développeurs AjaxDé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 JSDoivent laisser tomber certaines habitudes du codage JS  Développeurs d'applications JavaDé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 ?
  80. 80. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT - AvantagesGWT - Avantages Un seul langage: JAVA + typage statique + riche écosystèmeUn seul langage: JAVA + typage statique + riche écosystème Développement et mise au point rapide dans des EDIs favorisantDéveloppement et mise au point rapide dans des EDIs favorisant une bonne productivité et qualité du codeune bonne productivité et qualité du code Compatibilité multifureteurCompatibilité multifureteur Très bon support AjaxTrès bon support Ajax Performant & économe en ressources réseau & serveurPerformant & économe en ressources réseau & serveur Division du code aisée (code splitting), resources bundlesDivision du code aisée (code splitting), resources bundles Code JavaScript optimisé plus rapide que celui écrit à la mainCode JavaScript optimisé plus rapide que celui écrit à la main Intégration facile aux APIs de GoogleIntégration facile aux APIs de Google Code source libre, licence Apache 2, bien documentéCode source libre, licence Apache 2, bien documenté Supporté par la communauté GWT (> 100K dév.) et par GoogleSupporté par la communauté GWT (> 100K dév.) et par Google
  81. 81. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT - InconvénientsGWT - Inconvénients JS Ajax * Source Clipart : http://www.clipart.com
  82. 82. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT - InconvénientsGWT - Inconvénients  Nécessite que le fureteur exécute JavaScriptNécessite que le fureteur exécute JavaScript  Connaissance de la programmation JavaConnaissance de la programmation Java  Courbe d'apprentissageCourbe d'apprentissage  Séparation nette entre client et serveurSéparation nette entre client et serveur  Les composants (widgets) sont de sources et de qualitésLes composants (widgets) sont de sources et de qualités inégalesinégales  Lenteur du transcompilateurLenteur du transcompilateur  Quelques problèmes de compatibilité entre fureteurs, surtoutQuelques problèmes de compatibilité entre fureteurs, surtout au niveau des CSSau niveau des CSS  L'aspect sécurité est à surveillerL'aspect sécurité est à surveiller  Parfois beaucoup de code de support (boiler plate code)Parfois beaucoup de code de support (boiler plate code)
  83. 83. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Quand utiliser GWT?Quand utiliser GWT?  Site Web traditionnel avec Ajax => jQuerySite Web traditionnel avec Ajax => jQuery  Application web riche / RIA « monopage » UI complexe => GWTApplication web riche / RIA « monopage » UI complexe => GWT  Application web de « type bureautique » (Desktop Like) => GWTApplication web de « type bureautique » (Desktop Like) => GWT  Application mobile multiplateforme => GWT + PhoneGapApplication mobile multiplateforme => GWT + PhoneGap  Application web infonuagique PaaS => GWTApplication web infonuagique PaaS => GWT  Application webApplication web HTML5 avec Canvas ou SVG => GWTHTML5 avec Canvas ou SVG => GWT  GWT pas fait pour des pages Web ni des « Hello World! »GWT pas fait pour des pages Web ni des « Hello World! »  Il existe une zone grise où le choix dépendra de la familiarité deIl existe une zone grise où le choix dépendra de la familiarité de l'équipe avec Java vs JavaScriptl'équipe avec Java vs JavaScript
  84. 84. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 L'avenir de GWT...L'avenir de GWT... * Source Clipart : http://www.clipart.com
  85. 85. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Événements récents...Événements récents...  En avril 2012, une partie de l'équipe GWT basée à Atlanta a quittéEn avril 2012, une partie de l'équipe GWT basée à Atlanta a quitté Google pour démarrer une nouvelle entreprise, ce qui explique leGoogle pour démarrer une nouvelle entreprise, ce qui explique le ralentissement du développement de GWT en 2012.ralentissement du développement de GWT en 2012.  27 au 28 juin 2012 -27 au 28 juin 2012 - Google I/O 2012Google I/O 2012 Une seule session sur GWTUne seule session sur GWT Création d'un comité de pilotage (steering committee)Création d'un comité de pilotage (steering committee) Google, Redhat, Vaadin, Sencha, Arcbees (Qc!), Jetbrains, BizoGoogle, Redhat, Vaadin, Sencha, Arcbees (Qc!), Jetbrains, Bizo GWT 2.5 : SuperDev Mode, ElementalGWT 2.5 : SuperDev Mode, Elemental  Septembre 2012 – Enquête - « The Future of GWT » SurveySeptembre 2012 – Enquête - « The Future of GWT » Survey  Novembre 2012 – « The Future of GWT » ReportNovembre 2012 – « The Future of GWT » Report https://vaadin.com/gwt/report-2012/https://vaadin.com/gwt/report-2012/  15 au 17 mai 2013 - Google I/O 201315 au 17 mai 2013 - Google I/O 2013 3 sessions sur GWT3 sessions sur GWT nouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomasnouveaux champions: Ray Cromwell, Daniel Kurka, Erik Kuefler, Thomas BroyerBroyer
  86. 86. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Roadmap for the Future  OuvertureOuverture accès élargi aux contributions de la communautéaccès élargi aux contributions de la communauté serveur public d'intégration continue / mavénisationserveur public d'intégration continue / mavénisation  SimplicitéSimplicité rendre GWT plus modulaire / réduire l'emploi des fichiers .gwt.xml / nettoyer lerendre GWT plus modulaire / réduire l'emploi des fichiers .gwt.xml / nettoyer le code, @Deprecatedcode, @Deprecated  VitesseVitesse accélérer la vitesse de compilation de 50 % / accélérer le rafraîchissement duaccélérer la vitesse de compilation de 50 % / accélérer le rafraîchissement du SuperDevModeSuperDevMode continuer de réduire la taille du code / améliorer CodeSplittercontinuer de réduire la taille du code / améliorer CodeSplitter adapter le code JavaScript aux nouveaux interpréteurs JavaScript comme V8adapter le code JavaScript aux nouveaux interpréteurs JavaScript comme V8 meilleurs outils de rapports et de profilage pour identifier les problèmes demeilleurs outils de rapports et de profilage pour identifier les problèmes de performanceperformance
  87. 87. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Google I/O 2013 – Roadmap for the FutureGoogle I/O 2013 – Roadmap for the Future  InteropérabilitéInteropérabilité Java <=> JavaScriptJava <=> JavaScript intégration avec le compilateur de Closure (https://developers.google.com/closure/compiler/)intégration avec le compilateur de Closure (https://developers.google.com/closure/compiler/) support d'applications hybrides où l'on compile du code GWT et du code issu de librairies JavaScript externessupport d'applications hybrides où l'on compile du code GWT et du code issu de librairies JavaScript externes support de Java 7 et Java 8support de Java 7 et Java 8  FiabilitéFiabilité régler les 100 bogues en tête de liste / améliorer les tests unitaires avec GWTrégler les 100 bogues en tête de liste / améliorer les tests unitaires avec GWT retirer le support des vieux fureteurs, IE6,IE7,IE8retirer le support des vieux fureteurs, IE6,IE7,IE8  Modularité - capacité à « embarquer » des morceaux de GWTModularité - capacité à « embarquer » des morceaux de GWT diviser la structure monolithique du SDK de GWT en plus petits modulesdiviser la structure monolithique du SDK de GWT en plus petits modules davantage de points de raccrochage ("hook points") pour l'intégration avec d'autres outilsdavantage de points de raccrochage ("hook points") pour l'intégration avec d'autres outils  MobilitéMobilité support des fureteurs mobiles modernessupport des fureteurs mobiles modernes widgets optimisés pour la mobilitéwidgets optimisés pour la mobilité cycle de vie de l'applicationcycle de vie de l'application support du fonctionnement hors-lignesupport du fonctionnement hors-ligne support des magasins « Apps Stores »support des magasins « Apps Stores » GWT 2.6 – Q4 2013 GWT 3.0 – I/O 2014
  88. 88. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 L'avenir de GWT... c'est HTML5L'avenir de GWT... c'est HTML5 À cause de HTML5, l'augmentation de l'usage et de laÀ cause de HTML5, l'augmentation de l'usage et de la quantité de code JavaScript va favoriser l'emploi d'outilsquantité de code JavaScript va favoriser l'emploi d'outils comme GWT qui s'appuient sur Java un langage de hautcomme GWT qui s'appuient sur Java un langage de haut niveau orienté objets à typage statique avec un richeniveau orienté objets à typage statique avec un riche écosystème d'outils.écosystème d'outils.
  89. 89. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 GWT in Action – 2nd edition par Robert Hanson, Adam Tacy, Jason Essington, Anna Tökke 645 pages Manning Publications (7 février, 2013)‫‏‬ www.manning.com/tacy/ Ressources - LivresRessources - Livres Programmation GWT 2.5 : Développer des applications HTML5/JavaScript en Java avec Google Web Toolkit – 2e édition par Sami Jaber 515 pages Eyrolles (13 septembre, 2012)‫‏‬ www.programmationgwt2.com
  90. 90. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Ressources - LivresRessources - Livres GWT in Practice par Robert T. Cooper, Charlie E. Collins 358 pages Manning Publications (12 mai, 2008)‫‏‬ www.manning.com/cooper/ Google Web Toolkit Solutions : More Cool & Useful Stuff par David Geary, Rob Gordon 408 pages Prentice Hall (17 novembre, 2007)‫‏‬ www.coolandusefulgwt.com
  91. 91. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Ressources - LivresRessources - Livres GWT - Créer des applications web interactives avec Google Web Toolkit (versions 1.7 et 2.0) par Olivier Gérardin 205 pages Dunod (4 novembre, 2009)‫‏‬ http://code.google.com/p/livre-gwt Google Web Toolkit Applications par Ryan Dewsbury 608 pages Prentice Hall (15 décembre, 2007)‫‏‬ www.gwtapps.com
  92. 92. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 Ressources - OutilsRessources - Outils Sites généralistes Groupe de discussions (25 000 membres) Socle d'application MVP - GWTP http://code.google.com/webtoolkit/ http://www.gwtproject.com https://code.google.com/p/gwt-platform/ https://groups.google.com/forum/#!forum/google-web-toolkit
  93. 93. GDG/GTUG MontréalGDG/GTUG Montréal 26 juin 201326 juin 2013 QuestionsQuestions ?? * Source Clipart : http://www.clipart.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×