Si eres un programador Web es muy seguro que has tenido que hacer algo de código Javascript y alguna que otra ‘chapucilla’ para que tu aplicación funcione en todos los navegadores.

También es un hecho que mas del 90% de los desarrolladores que utilizan javascript acaban utilizando técnicas de ‘cortar y pegar’ y que jamás han leído un libro del lenguage js. Y es una realidad que un alto porcentaje de nosotros hemos tenido que estudiar Java.

En este artículo pretendo simplemente exponer las ventajas de utilizar Gwt frente a una librería como jQuery y ver en qué casos está justificado su uso, y también intentaré que quede claro qué es Gwt y las ventajas de utilizar java frente a javascript, de manera que al final tengáis una idea clara a la hora de abordar un proyecto.

Diferencias entre GWT y jQuery

• En el objetivo
  • Jquery es una librería javascript que ayuda a manipular la página y el diálogo con el servidor, con métodos probados para todos los navegadores.
  • GWT es un generador de aplicaciones, de manera que una aplicación diseñada y programada en Java se convierte en una aplicación web optimizada que funciona en cualquier navegador.
• En las Herramientas
  • Javascript acarrea las dificultades implícitas a su diseño junto a la falta de herramientas buenas de edición, refactoring, testing, reusing, etc.
  • Con Java se pueden utilizar todas sus ventajas el diseño de software y patrones, y todo su ecosistema de desarrollo.
• En las funcionalidades
  • Jquery es muy bueno para añadir pequeñas funcionalidades en el cliente inyectadas en la pagina desde el servidor, o para insertar o modificar parrtes de la vista que se obtienen del servidor via Ajax. Sin embargo el hecho de utilizarlo en en mundo javascript acarrea una serie de inconvenientes:
    • Es difícil de aplicar patrones de desarrollo y difícil de testear.
    • La edición y el refactoring dista mucho de ser inteligente.
    • Es muy difícil de reaprovechar fragmentos del código en otras aplicaciones .
    • La inclusión de dependencias, ofuscación, compresión, versionado del código no es trivial, y es necesario crear tareas y scripts a mano en la fase de empaquetado o despliegue de la aplicación.
    • Nuevos navegadores implican muy probablemente ajustes en el código.
  • GWT no sólo permite hacer grandes aplicaciones, sino librerías javascript, e incluso código javascript sencillo para manejar unos cuantos elementos de nuestra página.
    • La lógica es java: patrones, paquetes, y Tests
    • IDEs completos (code completion, refactoring, coverage, debug …)
    • Integración con maven, las librerías GWT son una dependencia en el fichero pom
    • El compilador quita toda la paja, comprime, versiona, ofusca, optimiza, y mucho mas automáticamente.
    • Las nuevas versiones de compilador mejoran nuestra aplicación sin tocar nada de código: compatibiliza la aplicación para navegadores futuros, genera mejor código, más rápido, etc…

Cuándo utilizar GWT y cuándo jQuery

• Utiliza jQuery cuando el código necesario que tengas que hacer para la parte de presentación de de tu aplicación sea pequeño y la mayoría de dicho código ya esté en librerías (date-pickers, menus, validaciones etc.)
• Utiliza Gwt cuando el código en la capa de presentación sea imprescindible para tu aplicación, cuando necesites testear dicho código, y cuando ese código sea susceptible de ser usado en otras aplicaciones.

Gwt-Query

Pero si quieres la potencia de Gwt y la facilidad en la sintaxis de jQuery, atrévete con GQuery, un clón de jQuery desarrollado completamente en Java, y en la que llevo trabajando junto a Ray Cromwell algo mas de un año.

Y como muestra, aquí transcribo un trozo de código en javascript utilizando jQuery, y otro en java utilizando gQuery, supongo que sabrás diferenciarlos:

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'})
.find('img').addClass("hover").stop()
.animate({marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%',
width: '174px', height: '174px',padding: '20px'}, 200);
}, function() {
$(this).css({'z-index' : '0'})
.find('img').removeClass("hover").stop()
.animate({marginTop: '0', marginLeft: '0', top: '0', left: '0',
width: '100px', height: '100px', padding: '5px'}, 400);
});

$("ul.thumb li").hover(new Function() {
public void f(Element e) {
$(e).css("z-index", "10")
.find("img").addClass("hover").as(Effects).stop()
.animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', " +
"width: '174px', height: '174px', padding: '20px'", 200);
}} , new Function() {
public void f(Element e) {
$(e).css("z-index", "0")
.find("img").removeClass("hover").as(Effects).stop()
.animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', " +
"width: '100px', height: '100px', padding: '5px'", 600);
}
});