GWTmaîtriser HTML 5 & Javascript sans enécrire une seule ligne !
Moi en bref• Grégory Le Bonniec• Directeur Zenika Ouest• Ancien IUT & ENSSAT Lannion• Depuis plus de 10 dans le monde Java...
Zenika en bref• Cabinet d’architecture technique • Développement • Conseil • Formation• Java mais pas que Scala, AMQP, Scr...
Google Web Toolkit
Application Web en 2012             =HTML5 + CSS3 + Javascript       … en théorie
JavascriptJavascript est un langage puissant mais …• Respect des standards à géométrie variable• Langage difficile à maîtr...
Javascript + HTML          =     « Langageassembleur du web »
GWT        Développer la   couche serveur en Java         (classique)et la couche client en … Java      (moins classique)
Couche cliente Java        =     Applet ?
GWTune technologie RIAJava ou Javascript ?
GWT       = Un compilateurJava Javascript
Compilation
Deferred BindingCode applicatif                  Code applicatif    Firefox                          Firefox    en_UK     ...
Mode compilé• Pay for what you use• Compatibilité inter-navigateurs• Optimisations multiples  • Taille  • PerformancesMais...
Mode développ.• Mode interprété• Communication IDE / Navigateur (via un  plugin)• Permet de tester les développement « en ...
application GWT          =application web Java    « classique »
DEMO #1
UIBinder• Java n’est pas un langage idéal pour la  description d’IHM• UIBinder a permis de pallier ce problème• Principes ...
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"><ui:UiBinder xmlns:ui=urn:ui:com.google.gwt.uibinder...
public class TransportRecherchePanel extends Composite {@UiTemplate("TransportRecherchePanel.ui.xml")interface MyUiBinder ...
DEMO #2
RPC• GWT fournit un système de communication  client serveur •   Simple •   Performant •   Transparent •   Standard •   « ...
Objets Java sérialisés                dataApplication   réseau            JEE                                HTML  GWT   C...
Mise en œuvre• Coté client  • Définition d’une interface synchrone  • Définition d’une interface asynchrone• Coté serveur ...
Asynchrone ?• GWT force le développeur a implémenté des  appels serveur asynchrones  • Plus complexe  • Plus verbeux• Alor...
DEMO #3
Je veux du HTML5 ! HTML5 c’est quoi ? • Eléments et attributs DOM • API (draggable, offline, canvas …) • WebSocket • CSS3
Encore en chantier !
Oui mais … qu’on aime JS ou pas…HTML5 n’a d’intérêt que              couplé à Javascript !    Il faudra des outils pour me...
Local Storage• Stockage de données persistantes coté client• Local Storage vs. Cookie    • Plusieurs Mo vs. Quelques Ko   ...
Canvas• Canvas = Zone graphique de dessin• Graphique 2D supporté par l’ensemble des  navigateurs• Graphique 3D à venir …
Draggable• DnD Pas vraiment une nouveauté dans le  monde Web• HTML5 apporte une solution native (enfin !)
DEMO #4
Boite à outils• GWT n’est pas un framework• GWT est une plateforme de développement• GWT fournit de nombreux outils • Opti...
IncrementalCommand• Afficher des données volumineuses dans un  navigateur se conclut le plus souvent par une  page blanche...
DEMO #5
Resources Web• Une application Web (GWT ou autre) fournit  et manipule un ensemble de ressources• Problématiques liées à l...
GWT à la rescousse • ClientBundle a pour objectif dassurer la   gestion des ressources statiques • ClientBundle gère plusi...
DEMO #6
Et Javascript ?• Il est possible d’appeler du Javascript depuis  GWT• JSNI = bridge Java/Javascript• Peut être utile mais ...
JSNI…public native void alert(String msg) /*-{    $wnd.alert(msg);}-*/;…               Code Javascript
Appeler du Java depuis JS !public void infos(String message) {…}public native void afficherInfos(String msg) /*-{  this.@c...
Bonnes pratiques • Gestion événementielle • EventBus • MVP • Injection de dépendances
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 app...
GWT ou pas ? Idéal pour une application web   • Application riche   • Simple…après quelques semaines !   • Rapide Mais  • ...
01/03/2012
Prochain SlideShare
Chargement dans…5
×

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

1 674 vues

Publié le

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 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 674
Sur SlideShare
0
Issues des intégrations
0
Intégrations
215
Actions
Partages
0
Téléchargements
21
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. GWTmaîtriser HTML 5 & Javascript sans enécrire une seule ligne !
  2. 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. 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. 4. Google Web Toolkit
  5. 5. Application Web en 2012 =HTML5 + CSS3 + Javascript … en théorie
  6. 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. 7. Javascript + HTML = « Langageassembleur du web »
  8. 8. GWT Développer la couche serveur en Java (classique)et la couche client en … Java (moins classique)
  9. 9. Couche cliente Java = Applet ?
  10. 10. GWTune technologie RIAJava ou Javascript ?
  11. 11. GWT = Un compilateurJava Javascript
  12. 12. Compilation
  13. 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. 14. Mode compilé• Pay for what you use• Compatibilité inter-navigateurs• Optimisations multiples • Taille • PerformancesMais compilation relativement longue …
  15. 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. 16. application GWT =application web Java « classique »
  17. 17. DEMO #1
  18. 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. 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. 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. 21. DEMO #2
  22. 22. RPC• GWT fournit un système de communication client serveur • Simple • Performant • Transparent • Standard • « Java vers Java »
  23. 23. Objets Java sérialisés dataApplication réseau JEE HTML GWT Client Serveur data
  24. 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. 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. 26. DEMO #3
  27. 27. Je veux du HTML5 ! HTML5 c’est quoi ? • Eléments et attributs DOM • API (draggable, offline, canvas …) • WebSocket • CSS3
  28. 28. Encore en chantier !
  29. 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. 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. 31. Canvas• Canvas = Zone graphique de dessin• Graphique 2D supporté par l’ensemble des navigateurs• Graphique 3D à venir …
  32. 32. Draggable• DnD Pas vraiment une nouveauté dans le monde Web• HTML5 apporte une solution native (enfin !)
  33. 33. DEMO #4
  34. 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. 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. 36. DEMO #5
  37. 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. 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. 39. DEMO #6
  40. 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. 41. JSNI…public native void alert(String msg) /*-{ $wnd.alert(msg);}-*/;… Code Javascript
  42. 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. 43. Bonnes pratiques • Gestion événementielle • EventBus • MVP • Injection de dépendances
  44. 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. 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. 46. 01/03/2012

×