JUGL – présentation GWT
Http://www.jugl.ch
5 février 2009
Licence
Creative Commons
Contrat Paternité
Pas d'Utilisation Commerciale
Partage des Conditions Initiales à l'Identique
2....
Information
Cette présentation et les exemple sont disponibles à cette adresse
https://forge.octo.com/svn/jugl/2009-01 Gwt...
GWT un framework d'application web
Approche GWT
Développer dans le langage Java
Compiler le code Java en JavaScript et Htm...
Positionnement GWT
GWT a été mis en opensource (décembre 2006, licence
Apache 2.0)
C'est une communauté fermée (Google) qu...
Architecture GWT
En terme d'architecture, la technologie de rapproche de
Flex
SilverLight

One page application
Avec suppo...
Support de Java 5
Types (boolean, byte, char, short, int, long, float, and double), Object, String, arrays,
user-defined c...
Structure d'un projet GWT
Code Java de la partie cliente, compilé par GWT
Code Java de la partie serveur, compilée par le ...
Les avantages de GWT pour la partie IHM
Fonctionnalités AJAX
Productivité des développements
Efficience du runtime
Minimis...
Composants disponibles
GWT = librairie de composants bas niveau (style SWING)
http://code.google.com/intl/fr/docreader/#p=...
Outils disponibles – A la main
GWT 'à la main'

> cd code1-simpleHelloWord
> createHelloWordApplication.cmd
> cd generated...
Outils disponibles – ANT
Tache ANT
http://braindump.dk/tech/gwt-task-for-ant/
Project creator http://code.google.com/intl/...
Outils disponibles – Maven
Plugins Maven
http://code.google.com/p/gwt-maven/
http://mojo.codehaus.org/gwt-maven-plugin/

>...
Outils disponibles
GWT Designer (payant)
Télécharger le plugin Eclipse
• http://download.instantiations.com/WBPro/continuo...
Internationalisation

> cd codecode3-maven-withI18n
> mvn gwt:gwt

Copyright © 2009 – OCTO Technology – Licence CC – Creat...
Optimisation des images
http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-doc-15&s=google-web-toolkit-doc-1-5...
Optimisation des images et internationalisation

> cd codecode3-maven-withI18n
> mvn gwt:gwt
Copyright © 2009 – OCTO Techn...
Architecture client serveur

> cd codecode4-server
> mvn gwt:gwt

Copyright © 2009 – OCTO Technology – Licence CC – Creati...
Deffered Binding - Directives de compilation
Gestion de
Crossbrowser
L'internationalisation
Des logs

Copyright © 2009 – O...
Création de framework
Il suffit de faire un jar contenant
Les sources Java
Le fichier de configuration du module
De déclar...
GWT et les tests
GwtTestCase
Demo
> cd codecode3-maven-withI18n
> mvn gwt:test
Ou
> mvn clean install

Test selenium
En ut...
Intérêts de faire du Java pour la partie cliente
Simplification du développement
Plus simple
Moins de technologies à maitr...
Pour aller plus loin
Avec GWT plus besoin de connaitre JavaScript et Html, est-ce du
développement 100% Java ?
Pas forcéme...
Quelques incompréhensions
"Il faut utiliser Java sur le serveur"
Non, on peut utiliser n'importe quel technologie pour met...
Trucs et astuces
Avoir des profils différents pour le dev et la production
Pour diminuer les options de compilation et le ...
Ressources
Cette présentation
https://forge.octo.com/svn/jugl/2009-01 Gwt

GWT
http://code.google.com/intl/fr/webtoolkit/
...
Prochain SlideShare
Chargement dans…5
×

Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009

551 vues

Publié le

Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
551
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction à Google Web Toolkit (GWT) - Philippe Kernevez - February 2009

  1. 1. JUGL – présentation GWT Http://www.jugl.ch 5 février 2009
  2. 2. Licence Creative Commons Contrat Paternité Pas d'Utilisation Commerciale Partage des Conditions Initiales à l'Identique 2.0 France http://creativecommons.org/licenses/by-nc-sa/2.0/fr/ Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 2
  3. 3. Information Cette présentation et les exemple sont disponibles à cette adresse https://forge.octo.com/svn/jugl/2009-01 Gwt Pour récupérer l'ensemble des sources et la présentation en local il suffit de taper la ligne de commande dans le repertoire de destination > svn co "https://forge.octo.com/svn/jugl/2009-01 Gwt" . Pour les démonstrations GWT pur (sans maven) il faut avoir GWT (1.5.3+) dans son PATH, pour les autres il faut avoir Installé maven Un jdk 1.5 dans son path (en tapant java –version) Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 3
  4. 4. GWT un framework d'application web Approche GWT Développer dans le langage Java Compiler le code Java en JavaScript et Html (au lieu de byte code avec un jdk) Gwt c'est : Des outils: compilateur, IDE (Java), scripts Une partie du Jdk Un framework de composant: les composants graphiques de base Une architecture orientée service: • One page application • Des services de données sur le serveur Gwt se propose de simplifier les points suivants Crossbrowser Fuite mémoire (DOM / Javascript) La complexité de développement JavaScript L'outillage de développement (débugger, designer, roundtrip) Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 4
  5. 5. Positionnement GWT GWT a été mis en opensource (décembre 2006, licence Apache 2.0) C'est une communauté fermée (Google) qui avance vite C'est une nouvelle position (éditeur et opensource) pour Google on ne connait pas l'implication de google dans la durée Vu l'engouement pour GWT, il sera de plus en plus difficile pour Google de ne plus supporter GWT Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 5
  6. 6. Architecture GWT En terme d'architecture, la technologie de rapproche de Flex SilverLight One page application Avec support de l'historique (et des bookmark ?) code Java Compatible Java 5 (depuis mai 2008) Version Java 6 en cours d'élaboration compilateur Html/JavaScript: compilation tardive et conditionnelle Particularité: GWT n'utilise jamais les *.class, ce sont des reliquats des IDE ou des outils (ANT, Maven) Démo HelloWord compilé avec Gwt Dissection du code compilé Navigateur embarqué et débugage Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 6
  7. 7. Support de Java 5 Types (boolean, byte, char, short, int, long, float, and double), Object, String, arrays, user-defined classes, etc. Par contre tout les types arithmétiques sont mappés sur un double, limitation JavaScript Le type long est mappé sur 2 entier de 32 bits par un mécanisme GWT (pour >1.5) • • Le type long ne peut pas être utilisé dans des appels natifs Cela a un impact sur les performances Exception: support de try/catch/finally Certaine exception ne peuvent pas survenir (OutOfMemory, etc.) JavaScriptException est ajoutée Assertions: elles sont supportées mais doivent activées explicitement Multithreading and Synchronization: le verbe synchronize est supporté mais est ignoré (le JavaScript est monothread) Les méthodes Object.wait(), Object.notify(), et Object.notifyAll() provoque une erreur de compilation Réflexion: il n'y a pas de support de la réflexion Seul existe Object.getClass().getName() Finalisation: pas de support Liste des classes supportées http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkitdoc-1-5&t=RefJreEmulation Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 7
  8. 8. Structure d'un projet GWT Code Java de la partie cliente, compilé par GWT Code Java de la partie serveur, compilée par le JDK Ressources statiques de la WebApp Descripteur du module GWT Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 8
  9. 9. Les avantages de GWT pour la partie IHM Fonctionnalités AJAX Productivité des développements Efficience du runtime Minimisation du trafic Minimisation des ressources • Mode obsucate Elimination du code mort lors de la compilation Possibilité de se brancher sur du code JavaScript existant public static native void message(String pMsg) /* { $wdn.alert(pMsg); } */; Il est très simple de se créer des composants réutilisables C'est des POJO Utilisation de CSS il faut gérer l'affectation d'un ID à la main si on veut l'utiliser dans la CSS Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 9
  10. 10. Composants disponibles GWT = librairie de composants bas niveau (style SWING) http://code.google.com/intl/fr/docreader/#p=google-web-toolkitdoc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery Il existe un grand nombre de librairies complémentaires GWT Ext MyGWT GWT Rialto GWTWidgets … Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 10
  11. 11. Outils disponibles – A la main GWT 'à la main' > cd code1-simpleHelloWord > createHelloWordApplication.cmd > cd generated > HelloWord-compile.cmd Ou > HelloWord-shell.cmd Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 11
  12. 12. Outils disponibles – ANT Tache ANT http://braindump.dk/tech/gwt-task-for-ant/ Project creator http://code.google.com/intl/fr/docreader/#p=googleweb-toolkit-doc-1-5&s=google-web-toolkit-doc-15&t=DevGuideProjectCreator > cd code1-simpleHelloWord > createEclipseAndAntProject.cmd > cd generated > ant -f HelloWord.ant.xml Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 12
  13. 13. Outils disponibles – Maven Plugins Maven http://code.google.com/p/gwt-maven/ http://mojo.codehaus.org/gwt-maven-plugin/ > cd codecode2-maven > mvn clean install ou > mvn gwt:gwt ou > mvn gwt:debug Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 13
  14. 14. Outils disponibles GWT Designer (payant) Télécharger le plugin Eclipse • http://download.instantiations.com/WBPro/continuous/latest/update/E-3.3/ ou • http://download.instantiations.com/WBPro/continuous/latest/update/E-3.4/ Autres Outils disponibles http://code.google.com/intl/fr/webtoolkit/tools.html Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 14
  15. 15. Internationalisation > cd codecode3-maven-withI18n > mvn gwt:gwt Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 15
  16. 16. Optimisation des images http://code.google.com/intl/fr/docreader/#p=google-web-toolkit-doc-15&s=google-web-toolkit-doc-1-5&t=DevGuideImageBundles Les images sont de plus localizables Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 16
  17. 17. Optimisation des images et internationalisation > cd codecode3-maven-withI18n > mvn gwt:gwt Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 17
  18. 18. Architecture client serveur > cd codecode4-server > mvn gwt:gwt Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 18
  19. 19. Deffered Binding - Directives de compilation Gestion de Crossbrowser L'internationalisation Des logs Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 19
  20. 20. Création de framework Il suffit de faire un jar contenant Les sources Java Le fichier de configuration du module De déclarer dans le module les ressources statiques (images, css) que les clients devront embarquer Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 20
  21. 21. GWT et les tests GwtTestCase Demo > cd codecode3-maven-withI18n > mvn gwt:test Ou > mvn clean install Test selenium En utilisant selenium RC pour les échanges asynchrones Cela reste compliqué Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 21
  22. 22. Intérêts de faire du Java pour la partie cliente Simplification du développement Plus simple Moins de technologies à maitriser Roundtrip rapide Il est facile de faire un 'petit' framework pour faire des composant réutilisable Intégration dans le build (intégration continue) On utilise les outils classique coté serveur Maven / Ant Checkstyle & Co Génération de code et/ou utilisation d'annotation Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 22
  23. 23. Pour aller plus loin Avec GWT plus besoin de connaitre JavaScript et Html, est-ce du développement 100% Java ? Pas forcément on peut le voir comme un remplaçant de JS et Html sur le client et avoir un serveur PHP, Grails, etc. Faut-il mélanger le code serveur et le code client dans le même projet ? C'est le fonctionnement par défaut de GWT, ce n'est pas forcément adapté en entreprise On peut le séparer en plusieurs module/projet Quelle alternative à GWT RPC ? On peut prendre la main sur le protocole pour le remplacer (par exemple JSON) par contre il faudra gérer plus de chose 'à la main' Intégration avec Google Gears pour le support du mode déconnecté Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 23
  24. 24. Quelques incompréhensions "Il faut utiliser Java sur le serveur" Non, on peut utiliser n'importe quel technologie pour mettre à disposition les données sur le serveur (PHP, etc.) "Il n'est pas possible de débuguer le code JavaScript généré, il est illisible" Il n'est pas lisible en mode obfucated, mais on peut le générer en mode DETAILLED. La bonne approche est de débuguer le code Java depuis Eclipse "Les applications GWT sont grosses et longue à télécharger" Non le code est optimisé et compressé "On ne peut pas faire de Html / JavaScript dans une application GWT" Il est possible de mixer les 2, même si ce n'est pas le mode recommandé "Quel rapport avec les Applets ?" Aucun, à part le langage Java Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 24
  25. 25. Trucs et astuces Avoir des profils différents pour le dev et la production Pour diminuer les options de compilation et le temps de développement Eviter à tout prix l'intégration de code JavaScript via l'utilisation de native Cela court-circuite le mécanisme de libération de la mémoire JavaScript et créer des fuites mémoire Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 25
  26. 26. Ressources Cette présentation https://forge.octo.com/svn/jugl/2009-01 Gwt GWT http://code.google.com/intl/fr/webtoolkit/ Forum http://groups.google.com/group/Google-Web-Toolkit Blog http://googlewebtoolkit.blogspot.com/ On GWT http://www.ongwt.com/ Université du SI sur la mise en œuvre de GWT pour une charte d'ergonomie http://www.universite-du-si.com/Webcast.aspx , Session A5 Ergonomie 2.0 (inscription obligatoire et gratuite) Copyright © 2009 – OCTO Technology – Licence CC – Creative Commons 2.0 France – Paternité – Pas d'Utilisation Commerciale – Partage des Conditions Initiales à l'Identique 26

×