Présentation Rex GWT 2.0
1 j'aime1,005 vues
Cette présentation sur GWT 2.0 aborde des expériences et des bonnes pratiques pour le développement d'applications web, en mettant l'accent sur l'importance des performances et de l'expérience utilisateur. Elle présente des exemples d'applications, des principes architecturaux clés, et des démonstrations pratiques, notamment sur la gestion des requêtes et le design d'interfaces. Les futurs développements comme la refactorisation MVP et les améliorations de la bibliothèque de widgets sont également évoqués.
Présentation Rex GWT 2.0
- 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
- 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