Présentation Ippon Technologies REX GWT 2.0 du jeudi 10/06/2010 www.ippon.fr blog.ippon.fr

1. Open-REX - GWT 2.0
10/06/2010
David Laurent

2. • Cette présentation vous est fournie sous licence
Creative Commons Attribution Share Alike
• Vous êtes libres :
o De reproduire, distribuer et communiquer cette création au public
• Selon les conditions suivantes :
o Paternité. Vous devez citer le nom des auteurs originaux mais pas
d'une manière qui suggérerait qu'ils vous soutiennent ou approuvent
votre utilisation de l'œuvre.
o A chaque réutilisation ou distribution de cette création, vous devez faire
apparaître clairement au public les conditions contractuelles de sa
mise à disposition sous licence identique Creative Commons Share
Alike.
o Chacune de ces conditions peut e
o Rien dans ce contrat ne diminue ou ne restreint le droit moral de
l'auteur ou des auteurs.

3. Retour d'expérience
• Application comptable Carrefour
o Gestion de campagne marketing
o < 50 utilisateurs
o GWT basé sur GXT
• Application de vente FranceBillet / Fnac
o Guichet de vente du réseau de billetterie
o > 10000 utilisateurs / jour
o + de 1000 points de vente magasin
o Infrastructure hétérogène ≠ réseaux de commercialisation
 navigateurs, tailles d'écran, écran guichet + écran client
o Réelles contraintes de performances
o Objectifs de charge de 100 000 réservations / heure
o GWT only
• Expérience utilisateur ... UI + Vitesse !

4. And now ... :-) :-| :-(
Points abordés
• Introduction / Performances / Architecture / Tests
• Compilation de bonnes pratiques Google IO + GTAC en // mises en oeuvre terrain
• Démos sur la base des samples du GWT SDK
Google IO 2009
• Measure in Milliseconds: Performance Tips for
• Google Web Toolkit Architecture: Best Practices For Architecting Your GWT App
Google IO 2010
• Measure in milliseconds redux: Meet Speed Tracer
• Architecting for performance with GWT
• Architecting GWT applications for production at Google
Google Test Automation Conference 2009
• Even better than the real thing : Lessons learned from testing GWT applications
• Selenium: to 2.0 and Beyond!

5. Google Web Toolkit
• GWT Manifesto / les designs axioms (2006)
o L'expérience utilisateur est primordiale
o Simplifier le développement d'applications AJAX
 Java debugging non-négociable, ...
o Les principaux composants doivent être utiles indépendamment
 Widgets, RPC disponibles mais non obligatoires, ...
 Le compilateur Java-to-Javascript est utile sans les libs gwt-user
o Interopère avec l'existant
 Protocoles autres que RPC, pour coopérer les composants n'ont pas
besoin d'un serveur spécifiquement GWT
 Rendu avec CSS
o Faciliter la réutilisation de code AJAX
 partage de composants et d'applications entières via JARs
o Optimiser de façon agressive les performances
 Ne pas faire à l'exécution ce que l'on peut faire à la compilation
o Proposer la sécurité par défaut
 Ne pas exposer les services automatiquement

6. Des apps AJAX écrites en JAVA

7. Exemples introductifs
• EntryPoint, Widgets, Module, GWT, Service RPC

8. Exemples introductifs
• Handler, Event, ServiceAsync RPC

9. Démos #1
• Exemples du SDK
o Sample Hello
o Sample Mail (versions antérieures à GWT 2.0)
o Sample Mail (version 2.0 et au delà)
• InspectorWidget
o inspecter rapidement le nb de widget d'un état du DOM
o inspecter rapidement la nature des widgets

10. Démarrage

11. #1 Concevoir pour les perfs
• La vitesse compte!
• Limites de temps de réponse
o 0.1 secondes : impression d'instantanéité
o 1 seconde : impression d'ininterruption
o 10 secondes : maintient de l'attention
• Points de contention d'une application
1. émarrage
D
2. écupération des données
R
3. alcul de rendu, Affichage
C
4. nteractions utilisateur
I

12. #1 Démarrage

13. #1 Démarrage optimisé

14. #1 Récupération des données
• Pièges à éviter
o trop de requêtes HTTP
o récupérer des données dont on a pas besoin
• Principes
o concevoir des interfaces RPC avec précaution
 interfaces côtés serveur adaptées à l'UI
 les services génériques amènent à requêtes +
données non nécessaires
o récupérer que ce dont on a besoin
o attention aux types qui sont sérialisés avec RPC
o grouper si possible les requêtes (batch requests)

15. #1 Calcul de rendu, Affichage
• Pièges à éviter
o créer des composants trop tôt
o lorsque ce n'est pas nécessaire
o associer les données aux widgets
• Principes
o Utiliser le LazyPanel
o Savoir quand utiliser des widgets : events ? parent ?
o Comment éliminer des widgets
 Utiliser UiBinder pour remplacer les widgets / HTML
 Utiliser le pattern Flyweight pour listes, tables et tree
o UiBinder : templates d'HTML et de Widgets (+ simple)
 utiliser HTML autant que possible
 utiliser des CSS optimisées avec CssRessource
 les règles CSS les + simples = + rapides

16. #1 Interactions utilisateurs
• Une intéraction utilisateur doit être inférieure à 100 ms
• Handler trop long à répondre bloque le thread (unique) JS
• Evénements ne peuvent être intercepté si JS en exécution
• Deffered Command, Incremental Command
• Le Layout est plus rapide avec les LayoutPanels

17. Démos #2
• Exemples du SDK
o Sample Showcase (Chargement à la demande)
o Sample Simple RPC
o Sample Simple RPC modifié en deRPC
• Mesure des performances avec SpeedTracer
o Comparaison Simple RPC / deRPC
o à suivre en 2010 dans la version 2.1 :
 SpeedTracer côté serveur et ...
 SpeedTracer en Intégration Continue
 identifier les regressions de perfs au commit

18. #2 Architecture : Principes
• Le test logiciel ne consiste pas à écrire des tests mais ...
des logiciels testables
• Quels sont les principes de structuration énoncés
pour les applications GWT?
• Le principe fondamental :
o isolation / séparation des responsabilités

19. #2 Bonne / mauvaise isolation

20. #2 Mauvaise isolation + Code natif

21. #2 Séparation des responsabilité

22. #2 Model View Presenter

23. #2 Model View Presenter
Martin Fowler l'entomologiste du pattern énonce :
o Passive View : A screen and components with all application specific
behavior extracted into a controller so that the widgets have their state controlled
entirely by controller. ... A Passive View handles this by reducing the behavior of the
UI components to the absolute minimum by using a controller that not just handles
responses to user events, but also does all the updating of the view. This allows testing
to be focused on the controller with little risk of problems in the view.”
o Presenter : The view of MVP is a structure of these widgets. It doesn't contain
any behavior that describes how the widgets react to user interaction. The active
reaction to user acts lives in a separate presenter object. The fundamental handlers for
user gestures still exist in the widgets, but these handlers merely pass control to the
presenter. The presenter then decides how to react to the event

24. Démos #3
• Exemples GWT Docs
o Sample Contacts 1
• Webdriver / Selenium 2
• Tests de charges serveur
o junit + contiperf + gwtrpc4j

25. Future ... GWT 2.1
• MVP refactorisation
o Model : RequestFactoryServlet, Record, SyncRequest
o Presenter : ActivityManager, Activity
o View : EditorSupport
• Améliorations Widget Library
o CellWidgets