Your SlideShare is downloading. ×
Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Codedarmor 2012 - 07/02 - GWT, maîtriser HTML 5 & Javascript sans en écrire une seule ligne !

1,342
views

Published on

Présentation à Codedarmor le 7 février 2012 par Gregory Le Bonniec de la société Zenika sponsor officiel de la soirée. …

Présentation à Codedarmor le 7 février 2012 par Gregory Le Bonniec de la société Zenika sponsor officiel de la soirée.

Il y a plus de 5 ans, GWT amena une approche singulière dans le développement Web : développer des applications javascript en java !? GWT permet de développer en Java aussi bien la couche serveur (ce qui est classique) que la couche cliente (ça l'est beaucoup moins). En effet, à l'aide d'un compilateur Java/Javascript, GWT permet de développer rapidement des applications web riches en simplifiant la construction IHM ainsi que les échanges client/serveur... les futurs développement HTML5 auront certainement besoin de GWT ...


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,342
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. GWTmaîtriser HTML 5 & Javascript sans enécrire une seule ligne !
  • 2. Moi en bref• Grégory Le Bonniec• Directeur Zenika Ouest• Ancien IUT & ENSSAT Lannion• Depuis plus de 10 dans le monde Java de Swing à GWT en passant par les MOM et WS …
  • 3. Zenika en bref• Cabinet d’architecture technique • Développement • Conseil • Formation• Java mais pas que Scala, AMQP, Scrum …• Sponsor JUGs / Conférence What’s Next / Conférence BreizhCamp
  • 4. Google Web Toolkit
  • 5. Application Web en 2012 =HTML5 + CSS3 + Javascript … en théorie
  • 6. JavascriptJavascript est un langage puissant mais …• Respect des standards à géométrie variable• Langage difficile à maîtriser : typage, débogage …• Fuite mémoire difficile à éviter
  • 7. Javascript + HTML = « Langageassembleur du web »
  • 8. GWT Développer la couche serveur en Java (classique)et la couche client en … Java (moins classique)
  • 9. Couche cliente Java = Applet ?
  • 10. GWTune technologie RIAJava ou Javascript ?
  • 11. GWT = Un compilateurJava Javascript
  • 12. Compilation
  • 13. Deferred BindingCode applicatif Code applicatif Firefox Firefox en_UK fr_FR Un seul code JavaCode applicatif Code applicatif IE IE en_UK fr_FR
  • 14. Mode compilé• Pay for what you use• Compatibilité inter-navigateurs• Optimisations multiples • Taille • PerformancesMais compilation relativement longue …
  • 15. Mode développ.• Mode interprété• Communication IDE / Navigateur (via un plugin)• Permet de tester les développement « en live »Mais performances dégradées …
  • 16. application GWT =application web Java « classique »
  • 17. DEMO #1
  • 18. UIBinder• Java n’est pas un langage idéal pour la description d’IHM• UIBinder a permis de pallier ce problème• Principes d’UIBinder • Description XML du look d’un coté • Comportement de l’IHM via du code Java • Liaison différée entre description et comportement
  • 19. <!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 xmlns:c="urn:import:com.zenika.resanet.gwt.client.ui"> <g:VerticalPanel> <g:HTML><h1> Recherche de transport </h1></g:HTML> <g:Label ui:field="erreur" /> <g:HTMLPanel> <table> <tr> <td><g:Label text="Ville de départ : "/></td> <td><g:ListBox ui:field="villeDepart"/></td> </tr> <tr> <td><g:Label text="Ville darrivée : "/></td> <td><g:ListBox ui:field="villeArrivee"/></td> </tr> <tr> <td><g:Label text="Date départ (dd/mm/yyyy) : "/></td> <td><c:DatePickerJS ui:field="dateDepart"/></td> </tr> <tr> <td><g:Label text="Nbr Voyageurs : "/></td> <td><g:TextBox ui:field="nbrVoyageurs"/></td> </tr> <tr> <td><g:Button ui:field="reset" text="Réinitialiser" /></td> <td><g:Button ui:field="recherche" text="Lancer recherche" /> </td> </tr> </table> </g:HTMLPanel> </g:VerticalPanel></ui:UiBinder>
  • 20. public class TransportRecherchePanel extends Composite {@UiTemplate("TransportRecherchePanel.ui.xml")interface MyUiBinder extends UiBinder<Widget, TransportRecherchePanel> {}private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);@UiFieldListBox villeDepart; @UiTemplate spécifie le fichier correspondant à lécran XML@UiFieldListBox villeArrivee;@UiFieldDatePickerJS dateDepart;@UiField @UiField associe la variable java avec lattributTextBox nbrVoyageurs; ui:field côté XML@UiFieldLabel erreur;public TransportRecherchePanel() { initWidget(uiBinder.createAndBindUi(this));}
  • 21. DEMO #2
  • 22. RPC• GWT fournit un système de communication client serveur • Simple • Performant • Transparent • Standard • « Java vers Java »
  • 23. Objets Java sérialisés dataApplication réseau JEE HTML GWT Client Serveur data
  • 24. Mise en œuvre• Coté client • Définition d’une interface synchrone • Définition d’une interface asynchrone• Coté serveur • Implémentation de l’interface synchrone
  • 25. Asynchrone ?• GWT force le développeur a implémenté des appels serveur asynchrones • Plus complexe • Plus verbeux• Alors pourquoi ? Les navigateurs sont « mono-threadés » toute action est bloquante coté client
  • 26. DEMO #3
  • 27. Je veux du HTML5 ! HTML5 c’est quoi ? • Eléments et attributs DOM • API (draggable, offline, canvas …) • WebSocket • CSS3
  • 28. Encore en chantier !
  • 29. Oui mais … qu’on aime JS ou pas…HTML5 n’a d’intérêt que couplé à Javascript ! Il faudra des outils pour mettre en œuvre HTML5 (non ça n’est pas plus magique que HTML4 !) GWT est un des candidats
  • 30. Local Storage• Stockage de données persistantes coté client• Local Storage vs. Cookie • Plusieurs Mo vs. Quelques Ko • Non transmis au serveur vs. Transmis à chaque requête• Pourquoi ? • Performances • Offline
  • 31. Canvas• Canvas = Zone graphique de dessin• Graphique 2D supporté par l’ensemble des navigateurs• Graphique 3D à venir …
  • 32. Draggable• DnD Pas vraiment une nouveauté dans le monde Web• HTML5 apporte une solution native (enfin !)
  • 33. DEMO #4
  • 34. Boite à outils• GWT n’est pas un framework• GWT est une plateforme de développement• GWT fournit de nombreux outils • Optimisation des ressources (RessourceBundle) • Chargement de données volumineuses (IncrementalCommand) • Modularité de l’application (Code Splitting) • …
  • 35. IncrementalCommand• Afficher des données volumineuses dans un navigateur se conclut le plus souvent par une page blanche• GWT fournit la classe IncrementalCommand pour afficher « proprement » ce type de données
  • 36. DEMO #5
  • 37. Resources Web• Une application Web (GWT ou autre) fournit et manipule un ensemble de ressources• Problématiques liées à la gestion de ressources • Overhead réseau • Gestion du cache (ie. code 304 ("Not Modified")) • Pool de connexions • Inadéquation entre référence et emplacement physique lors des développements
  • 38. GWT à la rescousse • ClientBundle a pour objectif dassurer la gestion des ressources statiques • ClientBundle gère plusieurs types de ressources • ImageResource : Images (ie. PNG, GIF, JPEG …) • CssResource : CSS • DataResource : Données binaires (ie. PDF, Doc …) • TextResource/ExternalTextResource : Ressources texte interne (ie. XML, properties …)
  • 39. DEMO #6
  • 40. Et Javascript ?• Il est possible d’appeler du Javascript depuis GWT• JSNI = bridge Java/Javascript• Peut être utile mais • Fuite mémoire • Compatibilité inter-navigateurs • …
  • 41. JSNI…public native void alert(String msg) /*-{ $wnd.alert(msg);}-*/;… Code Javascript
  • 42. Appeler du Java depuis JS !public void infos(String message) {…}public native void afficherInfos(String msg) /*-{ this.@com.zenika.gwt.Presenter::infos(Ljava/lang/String;)(msg)}-*/;
  • 43. Bonnes pratiques • Gestion événementielle • EventBus • MVP • Injection de dépendances
  • 44. GWT et idées reçues • Un développeur GWT n’est pas un développeur Web • On développe une application GWT comme une application client lourd
  • 45. GWT ou pas ? Idéal pour une application web • Application riche • Simple…après quelques semaines ! • Rapide Mais • API minimaliste • Verbeux comparé à JS
  • 46. 01/03/2012