javascript » Paradigma Tecnológico: La compañía ágil

Entendiendo qué es Gwt

publicado el Viernes, 15 de octubre de 2010 por: Manuel Carrasco Moñino
Etiquetas: gwt - java - javascript - Tecnología | 4 comentarios »

Aunque Gwt se está haciendo muy popular últimamente, es una de las tecnologías más desconocida en el mundo de los desarrolladores Web.

La mayoría creen que es demasiado complicado, otros opinan que sólo sirve para el mundillo Java, y otros creen que es otro framework más para hacer aplicaciones RIA.

En este artículo he hecho un collage ordenando algunas de mis ideas y otras extraídas de la red.

Misión

Gwt nace con la misión de mejorar radicalmente la experiencia web de los usuarios, al permitir a los desarrolladores utilizar las herramientas de Java para hacer Ajax y javascript que funcione en cualquier navegador moderno.

GWT no es …

No es una librería más de utilidades Javascript (jquery, prototype …)‏
No es una librería de widgets (jquery-ui, ext, scriptaculous, yui …)‏
No es un framework (mootools, dojo …)‏
No es ‘exclusivamente’ un kit para crear aplicaciones RIA.

GWT es …

Es un generador de javascript: convierte código java a javascript.
Es un compilador, preprocesador, linker y optimizador completo (no sólo compresión y ofuscación)‏
Es un SDK (kit de desarrollo)
Proporciona además un conjunto de herramientas para testear, depurar, estadísticas, etc ..
Además del compilador proporciona un conjunto de módulos: DOM, XML, I18N, JSON, RPC, y Widgets básicos, y mucho mas: css sprite, image bundling …
Resumiendo, es código java para ejecutarse en la máquina virtual ‘browser’ en lugar de sobre el ‘jre’
El código generado puede incluirse en cualquier html (estático o dinámico), y puede interaccionar con éste (modificar el DOM, ejecutar AJAX, validar formularios, por lo que es compatible con SEO y ‘progressive enhancement’

Por qué un compilador

Para separar la mantenibilidad del código de la efectividad del ejecutable.
Porque el javascript escrito a mano tiene un conflicto de intereses:
Identificadores largos y legibles → aplicaciones grandes y lentas.
Buen Formato → aplicaciones grandes y lentas.
Comentarios → aplicaciones grandes y lentas
La solución no es buscar convenciones en el código javascript escrito a mano, es crear un nivel de separación para que no se comprometan ambas (mantenibilidad, efectividad).
Muchos de los errores mas comunes (sintaxis, errores de escritura, etc) son fácilmente corregibles en tiempo de compilación en lugar de en tiempo de ejecución.

Por qué Java

La sintaxis javascript es mucho más próxima a la de java que en otros lenguajes, por lo que es mas sencilla la transformación desde java que desde otros.
Hay muchas mas herramientas en el ecosistema de Java para el desarrollo que para cualquier otro lenguaje.
El chequeo de tipos de java incrementa la productividad porque reduce errores.
La creación de paquetes es fácil, y podemos crear .jar que se comparten entre distintas aplicaciones.
La asistencia en la escritura de código evita errores y acelera la codificación.
El re-factoring es de verdad.
Diseño, patrones, OO, que hacen mas fácil de comprender el código Js y las llamadas Ajax, con mucha menos documentación.
Y sobre todo … TDD

Funcionalidades del Javascript generado por GWT:

Versionado de ficheros (para cada compilación)‏, evitando los problemas de los proxys y caches.
Los ficheros pueden ser cacheados para siempre.
Sólo está lo necesario para cada navegador y lenguaje (el usuario descarga sólo lo que usa).
Se elimina el código no usado (sólo quedan las clases y métodos utilizados).
Código muy ofuscado, muy comprimido y muy optimizado.
Ejecución muy rápida en browser pero código legible en eclipse.
Herramientas para Test y Debug.
Las librerías de lado servidor (RPC java) permiten que se puedan utilizar los mismos objetos java a ambos lados: Servidor ↔ Cliente

Rendimiento:

Javascript:
- GWT genera código mucho más pequeño que el que podamos escribir a mano. A diferencia de las aplicaciones tradicionales en javascript, el compilador de GWT analiza tu código e incluye exclusivamente lo necesario para cada navegador.
- Pudiera no ser más rápido, pero sí mas eficaz.
- Implementa su propio gestor de eventos, que evita ‘memory leaks’.
Usuario:
- Las aplicaciones GWT son normalmente más rápidas que las escritas a mano, y normalmente requieren menos trucos HTTP. Gwt elimina el uso envoltorios para funcionalidades incluidas nativamente sólo en un tipo/versión de navegador.
Desarrollo:
- Con el ahorro del tiempo invertido en depurar los problemas en cada navegador, puedes emplear mucho mas tiempo en la funcionalidad de tu aplicación. La eficiencia en el desarrollo es la parte favorita en GWT.

Conclusiones:

GWT no hace posible nada que no fuera posible hacer de otra manera, pero sí hace que la acción sea mucho mas productiva.
GWT no intenta ensalzar las virtudes de Java, sino reconocer el pragmatismo de las herramientas existentes, IDEs, entornos de prueba, tipos, etc.
GWT no quiere hacernos olvidar DOM, CSS, navegador, etc, sino permitir escribir abstracciones de todo ello y hacernos mas productivos que escribiendo código JS a mano.
Posiblemente, algún día GWT será capaz de compilar otros lenguages, o incluso procesar JS con anotaciones de tipos.
GWT hace productivo y posible el desarrollo de sitios webs de gran escala y abre la posibilidad de crear aplicaciones de nueva generación de manera fiable.

4 comentarios »

Be Sociable, Share!

Un puñado de razones para usar Gwt en lugar de jQuery

publicado el Martes, 6 de julio de 2010 por: Manuel Carrasco Moñino
Etiquetas: ajax - gwt - javascript - jquery - ria - Tecnología | 1 comentario »

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);
}
});

1 comentario »