1. IV Encuentros de Programadores Java: RIA
Desarrollo web con GWT
deCharlas.com (Oct-2010)
Manuel Carrasco Moñino
manolo@apache.org
2. Misión de GWT
To radically improve the web experience for users by enabling developers
to use existing Java tools to build no-compromise Ajax for any modern
browser
Mejorar radicalmente la experiencia web de los usuarios, al
permitir a los desarrolladores utilizar las herramientas de
Java para hacer Ajax que funcione en cualquier navegador
moderno.
3. ¿Qué NO es GWT?
No es una librería más de utilidades JS:
jquery, prototype...
No es una librería de widgets
ext, scriptaculous, yui...
No es un framework
mootools, dojo ...
No es sólo un kit para crear aplicaciones RIA.
4. ¿Qué es GWT?
Generador de javascript: convierte código java a javascript.
Es un compilador
Es un linker
Es un optimizador completo (no sólo compresión y ofuscación)
Es un SDK
El código generado puede incluirse en cualquier página e
interacionar con ella.
Proprorciona además un conjunto de herramientas para testear,
depurar, estadísticas, rendimiento, etc ..
Proporciona un conjunto de módulos cliente: DOM, XML, JSON,
I18N, RPC, Widgets, MVP, etc.
Y... mucho mas (css sprite, image bundling, uibinder ...)
Es código java para la máquina virtual 'browser' en lugar de 'jre'
5. Ventajas de usar un compilador frente a
escribir javascript a mano
6. La historia se repite.
C/C++ Java
− #include − <inherits
− #ifdef − <replace-with
− Inline ASM native code − Inline JS native code
− Compiler − Compiler
− Optimizer − Optimizer
− Linker − Linker
− Ensamblador para cada − Javascript para cada
procesador navegador
− Advanced IDE and tools − Advanced IDE and tools
for testing, debuging for testing, debuging
7. ¿Porqué un compilador?
Para separar la mantenibilidad del código de la efectividad del
ejecutable.
Porque el JS escrito a mano tiene un conflicto de intereses:
Identificadores largos = 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 tipado etc)
son fácilmente corregibles en tiempo de compilación en lugar de
en tiempo de ejecución.
En tiempo de compilación se puede inyectar funcionalidades.
8. ¿Porqué Java?
La sintaxis javascript está más próxima a java que a
otros lenguages, por lo que es mas fácil su
transformación.
Ecosistema de herramientas Java.
Diseño, patrones y POO: implican código mas comprensible
y menos documentación.
El AJAX mas intuitivo: patrones, interfaces, RPC, mismos
objetos.
Incremento de productividad:
El chequeo de tipos reduce errores.
Asistencia en la escritura de código.
Refactoring de verdad.
Debug
!!! TDD !!!
9. GWT nos facilita
Versionado de ficheros para cada compilación, evitando
problemas de cachés.
Descarga sólo lo que se usa.
Sólo lo necesario para cada navegador y lenguaje.
Eliminar código no usado (sólo las clases, y métodos utilizados).
Código muy ofuscado, comprimido y optimizado.
Los ficheros pueden ser cacheados para siempre.
Ejecución más rápida en browser pero con código legible en
IDE.
Herramientas para Test y Debug.
Mismos objetos Servidor <=> Cliente
Creación, selección e inclusión de librerías.
Deja a GWT hacer las cosas que deberíamos hacer a mano,
o que dejamos de hacer por desconocimiento, complejidad, etc.
10. ¿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, 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 gestores propios para evitar '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 en esa 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.
13. ¿Y qué más?
Historia de navegación (Botón atras, adelante)
ClientBundle: permite agrupar y manipular recursos en tiempo de
compilación (Imágenes, Optimización de Css, Sprite, lenguages …)
UIBinder: lenguage declarativo y extensivo para construir
interfaces de usuario. Injecta constructores en el código Java, y
genera HTML en tiempo de compilación.
Code split: fragmenta el código javascript en partes para que sean
cargadas asíncronamente.
LayoutPanels: comportamiento predecible de la disposición de
elementos.
Compresión: Utiliza las mas avanzadas técnicas de compresión.
JSNI (JavaScript Native Interface)
Deferred Binding
SOYC (Story of your compile)
14. Nuevo en 2.1.0
Cell Widgets: listas, arboles, tablas, suggestions. Trabajan con
grandes cantidades de datos de manera optimizada.
MVP Framework: Modelo Vista Presentador y EventBus.
Request Factory: es la alternativa a RPC, son servicios
orientados a datos (validaciones, persistencia)
Editors: Permite producir fácilmente widgets para editar objetos
de dominio
Server-side Speed Traces: El servidor manda datos de rendimiento
(ddbb, memcache, etc) a speed tracer.
Logging: enviar logs de cliente al servidor
Safe HTML: Evita vulnabilidades XSS en cliente
Integration with SpringSource developer tools: Roo
16. Actividad Comunidad GWT
Comunidad muy activa:
– GWT-users cien mensajes diarios
– GWT-contributors (lista moderada) 10 mensajes diarios
Desarrollo
– Grupo de committers limitado
– Decenas de contributors
– Exhaustiva revisión de código
– Tests muy exigentes
– Elevada calidad de código (javadocs, codstyle …)
– Excelentes desarrolladores.
Documentación
– Muy bien explicado
– Muy Actualizada
Cientos de librerías
Google.
18. 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
lenguajes, 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.
Ray Cromwell
25. Crear un proyecto Maven
Comprobar 'GWT SDK' tiene que estar al principio en build path
26. webAppCreator
$ /msoft/gwt/current/webAppCreator -maven -noant com.foo.Hello
-out Hello
Created directory Hello/src/main/java
Created directory Hello/src/main/webapp
[…]
Añadir estas líneas al pom.xml en caso de que gwt-2.1.0 no
esté disponible en maven.org
<repositories>
<repository>
<id>gwt.milestone</id>
<url>http://google-web-
toolkit.googlecode.com/svn/2.1.0/gwt/maven</url>
</repository>
</repositories>
Opción -maven sólo disponible a partir de 2.1.0
28. Ejecutar, Depurar, Test, Navegar
Project → Run As → Web Application
Project → Debug As → Web Application
Project → Run As → jUnit (
29. Configuración módulo *.gwt.xml
<module rename-to='hello'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. You can change -->
<!-- the theme of your GWT application by uncommenting -->
<!-- any one of the following lines. -->
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
<!-- <inherits name='com.google.gwt.user.theme.chrome.Chrome'/> -->
<!-- <inherits name='com.google.gwt.user.theme.dark.Dark'/> -->
<!-- Other module inherits -->
<!-- Specify the app entry point class. -->
<entry-point class='com.foo.client.Hello'/>
<!-- Specify the paths for translatable code -->
<source path='client'/>
<source path='shared'/>
<!-- Specify the paths for translatable code -->
<stylesheet src="JsUpload.css"/>
<!-- Imported modules properties -->
<set-property name="export" value="yes" />
<!-- Languages -->
<!-- <extend-property name="locale" values="es" /> -->
<!-- Linkers -->
<add-linker name="xs"/>
<!-- Deferred binding, … -->
<replace-with class="com.foo.MyClassIE">
<when-type-is class="com.foo.MyClass"/>
<any>
<when-property-is name="user.agent" value="ie6"/>
<when-property-is name="user.agent" value="ie8"/>
</any>
</replace-with>
</module>
30. Plugin para browser
Añadir plugin, reiniciar browser, reconectar.
Windows: IE, FF, Chrome
Linux: FF, Chrome (experimental)
Mac: FF, Safari.
Para conectarse desde otros browsers: -bindAddress 0.0.0.0
31. Deferred Binding
Son clases java que no se utilizan hasta el
momento de compilación
Se seleccionan diferentes implementaciones para
cada navegador, lenguage …
Hace posible el emulador JRE de GWT
Elimina el código innecesario para cada
plataforma.
Es el principal responsable del rendimiento del
código JS generado por GWT
32. JSNI
Código Javascript en comentarios java
Permite utilizar Js dentro de GWT y al revés.
Usa la declaración 'native' que indica a java que
ese método se resolverá en tiempo de 'runtime'
Los métodos nativos se puede utilizar en los IDEs
sin que marquen el código con error.
El compilador GWT lo detecta y lo copia en el
fichero javascript resultante
Finalmente se comprime y obfusca junto con el
resto de código
33. RPC
GWT puede hacer llamadas Ajax de 4 tipos
XML
JSON
TEXT o HTML
RPC
RPC es un contrato entre servidor (java) y cliente.
Se pasan objetos (pojo) que se puedan serializar.
No todos los objetos serializables en JRE son serializables
Tienen que ser compatibles con la emulación JRE de GWT.
En el servidor hay que extender RemoteServiceServlet
Realmente se transfieren objetos jSON especiales que ambos extremos
saben convertir en su propia representación de objeto