Gwt présentation-jug-14avr2011

  • View
    4.051

  • Download
    0

Embed Size (px)

DESCRIPTION

Prsentation GWT donne par Claude Coulombe au Montreal JUG le jeudi 14 avril 2011

Transcript

  • 1. GWT (Google Web Toolkit) ralisation facile dapplications Web riches en Java Prsentation au JUG Montral par Claude CoulombeJUG Montral 14 avril 2011

2. But Dans cette prsentation vous verrez comment le Google Web Toolkit (GWT) permet le dveloppement rapide et facile dapplications Web 2.0 et AJAX. http://code.google.com/webtoolkit/JUG Montral14 avril 2011 3. Web 1.0 Cliquez & attendez!JUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 4. Web 2.0 Lexprience-utilisateur JUG Montral* Source Clipart : http://www.clipart.com 14 avril 2011 5. Ajax Une vritable perce! AJAX Le premier utiliser le terme AJAX fut Jesse James Garrett en fvrier 2005JUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 6. Ajax Une vritable perce! Ajax(Asynchronous JavaScript & XML) Fini le pnible rechargement de pages! Ralisedes requtes asynchrones au serveur et fait la mise--jour de la page Web sans faire de chargement complet Applications Web plus ractives et plus dynamiques Objet XMLHttpRequest invent par M$ Bassur du code-client en JavaScript Aujourdhui, Ajax dsigne les technologies Web du fureteur : JavaScript, HTML/DOM, CSSJUG Montral14 avril 2011 7. Crer des applications Web riches Applications Web semblables des applications bureautiques en excution locale (Desktop Like) Interfaces rapides et ractives Ouverture de plusieurs fentres la fois dans le navigateur Dplacement des fentres dans le navigateur, redimensionnement et dfilement des fentres Glisser et dposer des contenusJUG Montral14 avril 2011 8. Pourquoi pas JavaScript ?Euh!..., tout allait bien...JavaScript tenait le coup...puis soudain...juste une ptite refacto de rien la catastrophe !?!@;&$!!??JUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 9. Pourquoi pas JavaScript ?Problmes de portabilit, incompatibilits des fureteurs, fuites de mmoire& longs chargementsPas de typage statique des variables en JavaSriptLe type dune variable peut changer lorsquune nouvelle valeur lui estaffecte (typage dynamique). var unNombre = 2; unNombre = "deux";Sensible la moindre coquille, sensible la casseformulaire.montnat = document.getElementById(montant);Quelques subtilits : null vs undefined vs false vs ""Dbogage lexcution pas la compilationSupport ingal des outils et IDEsProblme de scurit XSS (injection de scripts)Raret des programmeurs experts en JavaScriptJUG Montral14 avril 2011 10. Pourquoi pas JavaScript ?Made inJa vaScriptJUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 11. Pourquoi pas JavaScript ? Excellente pour lcriture rapide de petites applications, la souplesse de JavaScript devient un handicap pour lcriture de gros logiciels et de logiciels complexes Le typage dynamique reprsente une source importante derreurs pour de gros logiciels Pas despace de nommage (collision de variables), manque de modularit et de capacit grandir, pas un vritable langage objets Mise au point et rutilisation difficiles Normal, car JS na pas t conu pour de gros logiciels, mais juste pour mettre un peu dinteractivit dans une page web On peut voir le JavaScript comme le langage dassemblage (assembleur) du fureteurJUG Montral14 avril 2011 12. Et si on utilisait Java... Java * Source Clipart : http://www.clipart.comJUG Montral * Source image : http://www.sun.com 14 avril 2011 13. Et si on utilisait Java...Le langage du gnie logicielVritable langage de POOTypage statique => trouver les erreurs la compilation pas lexcutionEspace de nommage, (Package) => moins de risque de collisionprouv dans la ralisation de logiciels / systmes complexesMultiplateforme - Write Once, Run Anywhere - Windows, Linux, OS XMultiples langages dans la JVM : Scala, Groovy, Jruby, Jython, JavaScript...Riche cosystme, nombreux outils et EDIs+ bibliothques et socles dapplications+ outils en logiciels libres dont Java lui-mmepuissants EDIs* (Eclipse, NetBeans ou IntelliJ)dbogueur / diteur de code / refactorisation / analyse du codeLangage le plus rpandu > 6 millions de dveloppeursAbondante documentation sur le Web, + livres et + cours & formationsJUG Montral14 avril 2011 14. GWT = Ajax + Gnie Logiciel AJAX GWT = +Gnie logicielJUG Montral * Source : http://www.google.com, http://www.sun.com, htttp://www.clipart.com 14 avril 2011 15. Quest-ce que GWT ? En mai 2006 Google lance son Google Web Toolkit Bruce Johnson & Joel Webber Bote outils Ajax pour des applications Web riches orientes client Dveloppement rapide dapplications Web riches par des programmeurs Java ou pour de gros projets o JavaScript montre ses limites Transcompilateur (cross-compiler) de Java JavaScript Bon la fois pour enrichir des applications Web avec des composants Ajax et pour crer des applications similaires des applications bureautiques classiques (desktop-like) mais qui tournent dans un fureteur Web Logiciel libre (licence Apache 2)JUG Montral14 avril 2011 16. GWT - Du pur Java! Plusde 6 millions de dveloppeurs Java Write Once, Run Anywhere Windows, Linux, Mac OS X Vritable langage de POO Utilise un EDI* Java usuel Dbogagedu code-client avec EDI Communication client-server dobjets Java Code-client plus lger que des applets Java* EDI : environnement de dveloppementintgr (en anglais IDE)JUG Montral * Source image : http://www.sun.com 14 avril 2011 17. GWT = Ajax + Gnie Logiciel Support du cycle de vie complet du logiciel Outil interactif de construction dIU ( GWT Designer) Outil de construction dIU dclaratif XML ( UiBinder) Outil de mesure des performances ( Speed Tracer) Plugiciel pour Eclipse Support au dbogage Mise au point & dbogage en mode dev Cycle : dition / test / dbogage / Restructuration / refactorisation (refactoring) Dtection derreurs la compilation Journalisation (logging) Patrons de conception OO prouvs Composite / MVC / MVP / commande / bus dvnements Support de JUnit Support de AppEngine et autres APIs de GoogleJUG Montral* Source Clipart : http://www.clipart.com 14 avril 2011 18. Intgration Eclipse dbogueurJUG Montral 14 avril 2011 19. GWT en mode dev - DveloppementJUG Montral * Source : http://www.google.com 14 avril 2011 20. GWT en mode dev - Dveloppement Dans Eclipse, une application GWT peutsexcuter en mode dev (Development Mode) Mode)En mode dev , la JVM excute le code GWTcomme du bytecode Java lintrieur dunefentre de navigateur WebLe mode dev facilite la mise-au-point :diter le code-sourceRafrachirExaminer les rsultatsJUG Montral14 avril 2011 21. GWT en mode Web - Dploiement Unefois test en mode dev , vous pouvezcompiler votre code source Java en JavaScript etdployer votre application Web Une application Web GWT qui a t dploye estdite en mode Web Une fois compil le code-client est uniquement dupur JavaScript et du HTML Afin de dployer votre application Web enproduction, vous dplacez les fichiers durpertoire war sur le serveur Web, i.e. TomcatJUG Montral14 avril 2011 22. GWT DesignerJUG Montral * Source : http://www.google.com 14 avril 2011 23. GWT Designer diteur graphique interactif dIU Rachetpar Google de la socit Instantiations Entirementintgr Eclipse via un plugiciel Gnrationde code bidirectionnelle Alternance entre la vue Source et la vue Design Palette de composants avec glisser-dposer VueStructure avec larbre des composants et unpanneau pour ldition des proprits I18N Cration de composants rutilisables (Composite)JUG Montral14 avril 2011 24. UiBinderJUG Montral 14 avril 2011 25. UiBinder Outil de conception dinterface-utilisateur partir dune reprsentation XML, sans programmation Facilite le dcouplage entre la disposition du contenu en XML, le code du comportement en Java et lapparence gouverne par des feuilles de style CSS JUG Montral 14 avril 2011 26. Speed Tracer (extension dans Chrome)JUG Montral * Source : http://www.google.com 14 avril 2011 27. Comprendre GWT GWTJUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 28. Application GWT Client & ServeurLe code (en Java ou tout autrelangage) qui sexcute sur leserveur est responsable de lalogique de lapplication.Lapplication Web utilise leserveur pour charger ousauvegarder des donnes. Le code-client en JavaScript est transmis sur le rseau vers un ordinateur-client, o il sexcute dans un fureteur WebJUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 29. Structure dun projet GWTMaPremiereAppli/ src/PaquetConfig/ MaPremiereAppli.gwt.xmlPaquetClient MonPremierService.java MonPremierServiceAsync.java MaPremiereAppli.javaPaquetServeurMaPremiereAppli.javaMETA-INF/jdoconfig.xmllog4j.properties war/mapremierappligwt/ rsultats compilation en JS ...WEB-INF/lib/...App Engine JARs... appengine-web.xml logging.properties web.xmlMaPremiereAppli.cssMaPremiereAppli.htmlJUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 30. GWT Structure bibliothque & APIJUG Montral * Source Clipart : http://www.clipart.com 14 avril 2011 31. Vue densemble de larchitecture GWTTrans compilateurInterface Java BibliothqueNativeJavaScript dmulationJavaScriptJRE JSNIGWT API BibliothqueCommunicationIUG avec le serveurAnalyseur Gestion deIntgrationWidgets & RPC & AjaxXMLlhistorique JUnitPanelsJUG Montral* Source : http://www.google.com14 avril 2011 32. GWT Structure bibliothque & APILa structure du gwt-user.jarNote : Transcompilateur GWTTrans dans gwt-dev-windows.jar compilateur Interface Java Bibliothque Native JavaScript dmulationJavaScript JRE JSNI GWT APIBibliothque CommunicationIUGAnalyseur Gestion de Intgration avec le serveur Widgets &XMLlhistorique JUnitRPC & AjaxPanelsJUG Montral 14 avril 2011 33. Transcompilateur Java JavaScript JavaWrite Once... JavaScriptRun Everywhere!JUG Montral* Source Clipart : http://www.clipart.com 14 avril 2011 34. Transcompilateur Java JavaScriptTranscompilateur GWT prend du code-client en Java etpro