Comparaison entre les performances des composants GWT vs GXT

Voici un comparatif que j'ai intégrer dans cet article qui mesure la différence de performance entre GWT et GXT et la rapidité d'affichage..

Le test a été créer par Dustin Mallory avec un projet GAE. En essayant les différents widgets GWT et GXT, on voit bien que les composants natives GWT sont beaucoup plus rapides que ceux de GXT. La librairie GXT ajoute plusieurs styles CSS, ressources et code JS ce qui alourdit le chargement des composants.

Idem pour le SmartGWT, son utilisation s'avère beaucoup plus lourde que GXT. Le SmartGWT est un JSNI wrapper de la librairie Javascript SmartClient. Ce qui le rend donc plus lent, lourd à charger et plus difficile à étendre que GXT qui est une vrai surcouche à GWT

Ecran modal GWT avec un bouton Fermer

Après avoir travailler pour longtemps avec des librairies GWT tierces (GXT, SmartGWT, GQuery..), revenir vers les composant natives GWT était très difficile au départ. Les composants présents dans les librairies tierces étaient beaucoup plus riches avec plus de fonctionnalités. Même les widgets basiques manquaient de styles et de Look&Feel.

Mais en utilisant les composants natives GWT, en remarque rapidement la facilité d'enrichir et d'étendre ses widgets, la légèreté et la rapidité d'exécution en comparaison avec SmartGWT par exemple. J'ai parlé de ça dans cet article avec une comparaison entre la vitesse de chargement des composants GWT et GXT, mais ça reste aussi valide pour le SmartGWT qui est un JSNI wrapper de la librairie Javascript SmartClient vers GWT donc plus lent, lourd à charger et plus difficile à étendre que GXT qui est une vrai surcouche à GWT

On a construit alors une bibliothèque plus riche et complète de Widget en se basant seulement sur les composants natives GWT. Parmi ces widget à ajouter, le DialogBox ou PopupPanel avec un bouton Fermer

Le composant GWT native DialogBox n'affiche pas un bouton Fermer X dans la fenêtre modale. il fallait donc appuyer sur Echap pour masquer la boite de dialogue.

Pour ajouter ce bouton, il faut étendre la classe DialogBox pour changer son header en appelant getCellElement(0,1) et le remplacer avec un HorizontalPanel qui va contenir le bouton Fermer :