Open-REX - GWT 2.0

10/06/2010 David Laurent

•  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.

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 !

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!

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

Des apps AJAX écrites en JAVA

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

Exemples introductifs •  Handler, Event, ServiceAsync RPC

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

Démarrage

#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. Démarrage 2. Récupération des données 3. Calcul de rendu, Affichage 4. Interactions utilisateur

#1 Démarrage

#1 Démarrage optimisé

#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)

#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

#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

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

#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

#2 Bonne / mauvaise isolation

#2 Mauvaise isolation + Code natif

#2 Séparation des responsabilité

#2 Model View Presenter

#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"

Démos #3 •  Exemples GWT Docs

o Sample Contacts 1

•  Webdriver / Selenium 2

•  Tests de charges serveur o  junit + contiperf + gwtrpc4j

Future ... GWT 2.1

•  MVP refactorisation o Model : RequestFactoryServlet, Record, SyncRequest o Presenter : ActivityManager, Activity o View : EditorSupport

•  Améliorations Widget Library o CellWidgets