Framework Java open source que facilita el desarrollo de aplicaciones Ajax más robustas y más fácilmente mantenibles, mejorando la productividad de los desarrolladores y el rendimiento de los usuarios. En el entorno de la empresa permite desarrollar aplicaciones web ricas en menor tiempo, con menor coste y reutilizando los recursos humanos y técnicos de los que ya se disponía para el desarrollo.

1. Google Web Toolkit (GWT)
en entornos empresariales
Juan José Vázquez, Tecsisa
1 de Octubre de 2009 Tecsisa

2. Índice
1. Evolución de las aplicaciones web 2. Google Web Toolkit
o Cliente “pesado” vs cliente “ligero” o ¿ Qué es GWT ?
o Del cliente “ligero” a Ajax o Demo: desarrollo con Eclipse
o El paradigma Ajax o Ejemplo de código
o Aplicaciones web ricas (RIAs) o Métricas
o Demo: RIAs o Beneficios de GWT para la empresa
o Librerías y frameworks para RIAs o Demo: Google Wave
o Recursos
3. Preguntas y Respuestas
1 de Octubre de 2009 Tecsisa 2

3. Evolución de las aplicaciones web
Cliente “pesado” vs cliente “ligero”
Cliente “pesado” Cliente “ligero”
La mayor parte de la aplicación se ejecuta en la La mayor parte de la aplicación se ejecuta en el
máquina del usuario. servidor.
La interfaz de usuario se compone de ventanas de La interfaz de usuario se ejecuta en el navegador o
escritorio del sistema operativo. browser. Se trata típicamente de aplicaciones web.
Suelen implicar mayor número de conexiones a la Los accesos a la base de datos se concentran
base de datos (salvo en soluciones distribuidas). empleando data sources y pools de conexiones.
El despliegue de versiones de la aplicación en la El despliegue de versiones de la aplicación se realiza
organización implica instalar en cada puesto. en el servidor de aplicaciones. Cada puesto necesita
tan sólo un navegador web.
Típicamente las interfaces tienen gran riqueza e Las interfaces suelen ser poco ricas y con
interactividad sin comprometer la accesibilidad. interactividad limitada que puede comprometer la
accesibilidad.
Resulta más sencillo crear una buena experiencia de Es difícil crear una buena experiencia de usuario.
usuario.
Los conocimientos técnicos requeridos para su Implican un equipo multidisciplinar que cubra un
desarrollo abarcan unas pocas tecnologías. amplio espectro de habilidades técnicas.
1 de Octubre de 2009 Tecsisa 3

4. Evolución de las aplicaciones web
Del cliente “ligero” a Ajax
1990 1995 2000 2005 2010
lista correo www-talk,
World Wide Web HTML, WAI, XML, RDF/OWL, CSS,
Internet Society (ISOC), XHTML2 Working Group,
Consortium (W3C), XForms, XHTML, WSDL, XSL, Xpath, DOM,
The Internet Engineering HTML 5
lista correo www-style Geolocation, Semantic Web, Web Services…
Task Force (IETF)
HISTORIA
HTML2, CSS, ECMAScript, HTML 5, Chrome, CSS 2.1,
HTML 4, XHTML, CSS2, Safari, Firefox, Flash 8,
HTML, Nexus, Mosaic Netscape, IE, Java (Applet), Silverlight, Flash 10,
Mozilla, JavaScript, Flash IE 7, JavaScript 1.7
ActiveX GWT, jQuery, ExtJS…
CLIENTE
PHP 5, J2EE 1.4, PHP 5.3, JEE 6,
Perl, Ruby, PHP, Python PHP 4, J2EE, JSP, Python 2.4, ASP.NET 2.0, Python 2.4, ASP.NET 3.5,
CGI, Python ASP, Java Servlet Python 2, ASP.NET Ruby On Rails SOA, RESTful…
SERVIDOR
Ajax se populariza
Ajax es posible (XHR) Web 2.0
CLIENTE + SERVIDOR
1 de Octubre de 2009 Tecsisa 4

5. Evolución de las aplicaciones web
El paradigma Ajax (I)
“Ajax (Asynchronous JavaScript and XML) es un conjunto de técnicas de desarrollo
web que se aplican en el lado del cliente para crear aplicaciones web interactivas o
RIAs (Rich Internet Applications).” (Wikipedia)
• Disponible desde 1996, a través del ActiveX de Microsoft XMLHttpRequest (XHR) nacido
durante el desarrollo del Outlook Web Access (OWA).
• Popularizado a partir de 2005 gracias al ensayo de Jesse James Garrett Ajax: A New Approach
to Web Applications (1) y por aplicaciones como Google Maps, Google Suggest, Gmail, Flickr y
Facebook entre otras.
• Ha revalorizado el uso del JavaScript dando lugar a numerosas librerías y frameworks que
facilitan el desarrollo.
• Fuerte dependencia del navegador. Resulta difícil tener una aplicación 100% compatible con
todos los navegadores (cross-browser).
• No está limitado al uso de XML y JavaScript, ni está obligado a ser asíncrono.
• Supone un reto para los analistas y desarrolladores al introducir nuevos patrones de
interacción que impactan en la usabilidad de las aplicaciones.
(1) http://www.adaptivepath.com/ideas/essays/archives/000385.php
1 de Octubre de 2009 Tecsisa 5

6. Evolución de las aplicaciones web
El paradigma Ajax (II)
1 de Octubre de 2009 Tecsisa 6

7. Evolución de las aplicaciones web
Aplicaciones web ricas (RIAs)
“Rich Internet Applications (RIAs) son aplicaciones que poseen la mayoría de
características de las aplicaciones de escritorio y que típicamente se ejecutan sobre
plug-ins del navegador web o sobre máquina virtuales.” (Wikipedia)
• Comparten los beneficios de las aplicaciones de escritorio con los de las aplicaciones web.
• Pueden verse como aplicaciones web de cliente “pesado”.
• Ajax, más el uso de sofisticadas librerías de JavaScript, hacen posible el desarrollo de RIAs
que se ejecutan en el navegador web.
• Otras tecnologías permiten el desarrollo de RIAs, sin el uso de JavaScript, pero con la
instalación de plug-ins en el navegador: Adobe Flash/Flex/AIR, OpenLaszlo, JavaFX, Mozilla
XUL, Microsoft Silverlight entre otras.
• Presentan una alta interactividad “posibilitando” una buena experiencia de usuario.
• Permiten minimizar las comunicaciones con el servidor disminuyendo el tráfico.
• Son típicamente más rápidas que las aplicaciones web tradicionales.
• Pueden permitir la interacción off-line (i.e. Google Docs).
• Se mantienen e instalan más fácilmente pero la complejidad de las soluciones es mayor.
1 de Octubre de 2009 Tecsisa 7

8. Evolución de las aplicaciones web
Demo: RIAs
Open Laszlo Google Docs
http://www.openlaszlo.org/lps_demos/demos/amazon/amazon.lzx?lzt=html&lzr=swf9 http://docs.google.com
1 de Octubre de 2009 Tecsisa 8

9. Evolución de las aplicaciones web
Librerías y frameworks para RIAs
Para aplicaciones Ajax (con el navegador suele ser suficiente):
Javascript Java .NET
Prototype Google Web Toolkit (GWT) Ajax.NET
jQuery DWR ASP.NET AJAX
Ext Echo WPF
Script.aculo.us ZK Otros
MooTools RichFaces Quicknet (PHP)
Yahoo! UI Library IceFaces Sajax (PHP)
Dojo Toolkit Ext JS Pyjamas (Python)
Además de otros frameworks que necesitan plug-ins o máquinas virtuales:
• Adobe Flash/Flex/Air, OpenLaszlo.
• Microsoft Silverlight.
• JavaFX.
• Mozilla XUL/Prism.
1 de Octubre de 2009 Tecsisa 9

10. Google Web Toolkit
¿Qué es GWT?
Framework Java open source que facilita el desarrollo de aplicaciones Ajax
más robustas y más fácilmente mantenibles, mejorando la productividad de
los desarrolladores y el rendimiento de los usuarios.
• Permite que las aplicaciones web se desarrollen y depuren en Java usando IDEs ampliamente
extendidos en las organizaciones como NetBeans, Eclipse, RSA o IntelliJIdea.
• Provee un compilador de Java a JavaScript que optimiza el resultado y lo habilita para
visualizarse correctamente en todos los navegadores (cross-browser) de forma eficiente. El
enfoque es: JavaScript es el código máquina del navegador.
• Posee dos modos de funcionamiento:
– Hosted Mode: permite ejecutar y depurar la aplicación sobre la JVM con el consiguiente ahorro de
tiempo.
– Web Mode: la aplicación se ejecuta en su versión final como HTML + JavaScript.
• Soporte para el botón “back” del navegador y la “historia“ de la navegación.
• Comunicación con el servidor a través de RPC, XML o JSON.
• Librería de componentes o “widgets” reutilizables y extensibles al estilo de Java Swing.
• Soporte para la internacionalización de las aplicaciones y testing unitario.
1 de Octubre de 2009 Tecsisa 10

11. Google Web Toolkit
Demo: desarrollo con Eclipse
Veamos una demo de GWT
1 de Octubre de 2009 Tecsisa 11

12. Google Web Toolkit
Ejemplo de código
/**
* Punto de entrada a la aplicación
* GWT Demo.
*/
public class GwtDemo implements EntryPoint {
public void onModuleLoad() {
// Se crea un botón y una etiqueta
final Button btnSaludo = new Button("Saluda");
final Label lblHolaMundo = new Label();
// Maneja el clic del botón
btnSaludo.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
lblHolaMundo.setText("Hola Mundo!");
}
});
// Los widgets se añaden al panel
RootPanel.get().add(btnSaludo);
RootPanel.get().add(lblHolaMundo);
}
}
1 de Octubre de 2009 Tecsisa 12

13. Google Web Toolkit
Métricas: tamaño script compilado
Fuente: Google, 2007
1 de Octubre de 2009 Tecsisa 13

14. Google Web Toolkit
Métricas: ancho de banda y tiempo de arranque
Fuente: Google, 2007
1 de Octubre de 2009 Tecsisa 14

15. Google Web Toolkit
Beneficios de GWT para la empresa
• Permite desarrollar aplicaciones web ricas en menor tiempo, con menor coste y reutilizando
los recursos humanos y técnicos de los que ya se disponía para el desarrollo OO:
– IDEs + plug-ins específicos como Google Plugin for Eclipse o GWT Designer (estilo ASP.NET)
– Patrones OO
– Detección de errores en tiempo de compilación
– Reutilización de widgets o componentes (creación de librerías corporativas)
– Encapsulación de buenas prácticas de desarrollo Ajax (hazlo bien una vez, aplícalo siempre)
– Testing unitario
– Integración continua
– Cross-browser
– Internacionalización
• Optimización del tráfico de red.
• Ideal para el desarrollo de interfaces en entornos SOA y cloud computing.
• Proyecto open source (licencia Apache 2.0) pero tutelado por Google que lo aplica en el
desarrollo de sus aplicaciones.
• Miles de usuarios en las listas de desarrollo y cientos que contribuyen y prueban.
1 de Octubre de 2009 Tecsisa 15

16. Google Web Toolkit
Demo: Google Wave
Google Wave: Developer preview
1 de Octubre de 2009 Tecsisa 16

17. Recursos
Bibliografía:
• GWT in Action: Easy Ajax with the Google Web Toolkit (Manning Publications)
• GWT in Practice (Manning Publications)
• Pro Web 2.0 Application Development with GWT (Apress)
• Google Web Toolkit Applications (Addison-Wesley Professional)
Web:
• http://code.google.com/webtoolkit [Sitio principal]
• http://googlewebtoolkit.blogspot.com [Blog GWT]
• http://code.google.com/p/google-web-toolkit [Código fuente, incidencias, etc.]
• http://programa-con-google.blogspot.com [Blog desarrollo Google en castellano]
• http://www.tecsisa.com/index.igw?item=1635&lang=es_ES&site=1 [Artículo en
castellano]
1 de Octubre de 2009 Tecsisa 17

18. Preguntas y Respuestas
¿?
1 de Octubre de 2009 Tecsisa 18

19. Información de contacto
Juan José Vázquez
jvazquez@tecsisa.com
TECSISA
Calle del Arte, 21
Oficina 6ºC
28033 Madrid
www.tecsisa.com
1 de Octubre de 2009 Tecsisa 19