Este documento proporciona una introducción a Google Web Toolkit (GWT). GWT permite a los desarrolladores crear aplicaciones web dinámicas y aplicaciones Ajax utilizando Java como lenguaje de programación en lugar de JavaScript. El documento describe la arquitectura y SDK de GWT, las ventajas de usar GWT como productividad y compatibilidad, y cómo trabajar con widgets y librerías de GWT como GQuery.
GWT: Generador de JavaScript para aplicaciones web
1. GWT
Google Web Toolkit
Manuel Carrasco Moñino
manolo@apache.org
twitter.com/dodotis
Créditos:
2. Qué vamos a ver
•
Introducción a GWT
•
Arquitectura y SDK
•
Ventajas
•
Trabajando con GWT
•
Widgets y Librerias
•
GWT ligero: Gquery
•
Ajax Fácil: RequestFactory
•
Talkwheel
Junio 2011 Madrid JUG 2
3. ALTERNATIVAS RIA
Browser- Player- Client-
based based based
Thin Windows, Rich
HTML
Client Mac Client
Reduced maintenance Combined benefits Intuitive UI
Location independence of thin and rich client Inmediate response
Junio 2011 Madrid JUG 3
4. Misión de GWT
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.
l
o pi la e a
dig om Jav
Có rito C o t
esc ava dig ascrip
có av
J J
en en
5. ¿Qué NO es GWT?
No es una librería más de utilidades JS:
jquery, prototype...
No es una librería de widgets ricos JS
ext, scriptaculous, yui...
No es un framework JS, RIA, MVC, J2EE, etc
mootools, dojo ...
Vaadin, OpenLaslo, ZK, isNat ...
Zend, Rails ...
Struts, Spring MVC ...
6. ¿Qué es GWT?
Generador de javascript: convierte código java a javascript.
Compilador + Linker + Optimizador completo (Descarga sólo
lo necesario)
El código generado puede incluirse en cualquier página (Java,
Php, Rails...) e interacionar con ella y con el servidor (DOM,
AJAX).
El tiempo de compilación lo aprovecha para hacer su magia
(compresión, ofuscación, css sprite, selección …)
Proporciona librerías listas para usar: DOM, XML, JSON, I18N,
RPC, RF, Widgets, MVP, etc.
Puede interactuar con cualquier tipo de servidor (Ajax).
Nos da herramientas para testear, depurar, ver estadísticas, ver
rendimiento, etc ..
¡ Es un SDK !
7. La historia se repite
C → ASM Java → JS
#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 navegador
procesador Advanced IDE and tools for
Advanced IDE and tools for testing, debuging
testing, debuging
Un lenguaje de alto nivel permite que el AD
TIVID
Desarrollador no se pierda en detalles de DUC
bajo nivel (DOM, JS, Ajax, XD, Browsers ) PRO
8. ¿Por qué un compilador?
Separar la mantenibilidad del código de la efectividad del
ejecutable.
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).
Los errores comunes (sintaxis, errores de tipado etc) son
corregibles en tiempo de compilación y no en el de ejecución.
En tiempo de compilación se puede inyectar funcionalidades.
Versionado, Ofuscación
Peculiaridades/Hacks para cada navegador
Compresión, Sprite …
Conversion objetos servidor ↔ cliente
Cross domain
9. ¿Por qué Java?
Sintaxis javascript próxima a java: fácil transformación
Ecosistema de herramientas Java
Diseño, patrones y POO: código más comprensible, menos
documentación
AJAX más intuitivo: patrones, interfaces, RPC, mismos
objetos
Reaprovechamiento de código: librerias, maven …
Universal, la mayoría de programadores lo conocen.
Incremento de productividad:
El chequeo de tipos reduce errores
Asistencia en la escritura de código
Refactoring de verdad
Debug
!!! TDD !!!
10. ¿RENDIMIENTO?
JAVASCRIPT USUARIO DESARROLLO
Genera menos código Aplicaciones más rápidas Con el ahorro del tiempo
y con menos trucos HTTP. invertido en depurar los
Analiza el código e incluye problemas en cada
solo el necesario para Elimina el uso envoltorios navegador, se puede
cada navegador para funcionalidades emplear más tiempo en
nativas de cada versión la funcionalidad de la
A veces más lento, pero de navegador. aplicación.
más eficaz.
La eficiencia en el
Implementa gestores desarrollo es la principal
propios para evitar 'leaks' ventaja de Gwt.
Junio 2011 Madrid JUG 10
12. Java Code (IDE)
Java Server Java Client
Side Side
Toolkit (SDK)
GWT development GWT compiler
Debug/Hosted/Test Compiler/Optimizer
GWT server JRE Emulation
libs RPC/RF Libs & Widgets
Test Runner FF/IE/Ch-Plugin
3ª Party 3ª Party
Server libs Server libs
JavaScript Bundles
J-Byte Code
(css, sprite)
RPC/RF/JSON/XML RF/JSON/XML Other Backends
JVM App-Server Browser
(php, ruby, ...)
Junio 2011 Madrid JUG 12
13. Componentes del Toolkit
PARA EL CLIENTE PARA EL SERVIDOR
•
Libreria emulada JRE Sólo en caso de Java:
•
java.util - Librería RPC
•
java.lang - Librería RequestFactory
•
Librería Core - Logger: client → server
•
JSON, XML, RPC, RF
•
DOM, UI, I18N
•
Compiler, Optimizer, Linker
PARA EL DESARROLLO PARA PRODUCCIÓN
•
Herramientas de debug Speed Tracer
•
Testing library GAE
(GWTestCase, HtmlUnit)
•
App Server: Jetty/Tomcat
•
Eclipse Plugin
•
Browser plugin
•
Maven plugin.
•
Designer
14. Resumen
•
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.
16. Gwt es simple
DESARROLLAR UNA APLICACIÓN
EN GWT PUEDE SER TAN SIMPLE
COMO DESARROLLAR
EN VISUAL BASIC
Junio 2011 Madrid JUG 16
17. Gwt es barato y FIABLE
SOPORTE
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
•
Excelentes desarrolladores.
Documentación
•
Muy bien explicado
•
Muy Actualizada
Cientos de librerías
Google
Junio 2011 Madrid JUG 17
18. Gwt ahorra costes
DESARROLLAR UNA APLICACIÓN EN
GWT ES BASTANTE MÁS RÁPIDO QUE
DESARROLARLA
EN TECNOLOGÍA J2EE
Junio 2011 Madrid JUG 18
19. TRABAJA OFFLINE
NO ES NECESARIO UN SERVIDOR:
- HTML5 (Data store)
- Aplicaciones sólo visuales
(Juegos …)
Junio 2011 Madrid JUG 19
20. ALTAMENTE COMPATIBLE
Los móviles están equipados con
navegadores modernos y rápidos
GWT produce Js y Ajax pequeño y
optimizado para cada versión
Junio 2011 Madrid JUG 20
21. JAVA → Patrones, Depuración, TDD, IDEs, CI ...
Más idad
os tiv
alid
ad Men s duc
C re l e pro
Más ftware erro sl egib
de S
o Má
Junio 2011 Madrid JUG 21
24. Pasos para desarrollar GWT
● Prepara el entorno de trabajo: Eclipse + plugins
● Crea un nuevo proyecto (Template, Archetype, webAppCreator):
● Configura el módulo
● Crea tu página html con la llamada al JS resultante
● Desarrolla: cliente, servidor, RPC
● Desarrolla
● Testea: TestCase, GWTTestCase
● Prueba y depura: DevMode + Browser + Plugin
● Despliega
● Compila a JS
● Speed tracer
●
Entrega
Junio 2011 Madrid JUG
28. Ejecutar, Depurar, Test, Navegar, Compilar
● Project → Run As → Web Application
● Project → Debug As → Web Application
● Project → Run As → Test
Junio 2011 Madrid JUG
29. Plugin para browser
● Suele ser bastante automático.
● Windows: IE, FF, Chrome
● Linux: FF, Chrome (experimental)
● Mac: FF, Safari.
● Para conectarse desde otros pcs: -bindAddress 0.0.0.0
Junio 2011 Madrid JUG
34. Jquery & GWT
•
Filosofía jquery: Haz mas, escribe menos: do more, write less.
•
Permite utilizar GWT en escenarios donde se necesite
progressive enhancement
•
O donde utilizar GWT widgets pueda ser muy pesado
•
Facil de entender y usar para los que conocen jquery
•
Muy útil en aplicaciones que necesiten manipular DOM o SVG
•
Java type-safe
•
Testing, Debug
•
Y a diferencia de jquery ...
●
Mayor velocidad de selectores: Benchmark
●
Menos codigo compilado, deferred binding.
●
Reutilizacion de clases
●
Descarga sólo lo que utilices
●
Async loading
36. Colecciones
// Iterate
$("table").each(new Function(){
public void f(Element e) {
if ($(e).hasClass("whatever")) {
$(e).attr("myattr", "something");
}
}
});
// Maps
List<String> ids = $("table").map(new Function(){
public Object f(Element e, int i) {
return e.getId();
}
});
// Filter elements
$("div").filter(new Predicate(){
public boolean f(Element e, int index) {
return index % 4 == 0;
}
});
37. Type-safe
//it easy now to specify shorthand property...
$("#hello").css(CSS.BACKGROUND.with(
RGBColor.TRANSPARENT,
UriValue.url("back.gif"),
BackgroundRepeat.NO_REPEAT,
BackgroundAttachment.SCROLL,
BackgroundPosition.CENTER))
.css(CSS.BORDER.with(BorderWidth.THIN, BorderStyle.DASHED, RGBColor.AQUA))
.css(CSS.TEXT_ALIGN.with(TextAlign.CENTER))
// can take a constant value
.css(CSS.FONT_SIZE.with(FontSize.SMALLER))
// a length
.css(CSS.FONT_SIZE.with(Length.px(4.5)))
.width(100);
38. Interacciona con GWT
// enhance GWT widgets
List<Label> labels = $("div").widgets(Label.class);
$(labels).append($("<img src='push.gif'/>").width(20));
$(labels).click(new Function() {
public void f(Widget w) {
Label l = (Label) w;
}
});
// Decouple code and use gquery to locate widgets.
CellTree t = $("div.gwt-CellTree").widget(0);
if (t != null) {
t.getDefaultNodeSize();
}
39. Escribiendo plugins
public class Enhance extends GQuery {
// A shortcut to the class
public static final Class<Enhance> Enhance = Enhance.class;
// Register the plugin in GQuery
static {
GQuery.registerPlugin(Enhance.class, new Plugin<Enhance>() {
public Enhance init(GQuery gq) {
return new Enhance(gq);
}
});
}
// Initialization
public Enhance(GQuery gq) {
super(gq);
}
public GQuery nuevoMetodo() {
for (Element element : elements()) {
$(element).hide();
}
return this;
}
}
// Plugin usage
$("input").as(Enhance).nuevoMetodo().css("color", "red");
41. Nuevo en GWT 2.1, 2.2, 2.3
●
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
●
Integración with SpringSource developer tools: Roo
●
HTML5 Canvas
●
Google Integración
●
Soporte para Single Sign On
●
Local Storage
Junio 2011 Madrid JUG
42. Request Factory
● Facilita el uso de acceso a datos en el cliente.
● Permite que puedas programar la parte del servidor en modo
data-centric, proporcionando un alto nivel de abstracción en la
capa de cliente basada en service-oriented.
● En lado de cliente hace un seguimiento de los objetos y envia las
modificaciones al servidor.
● La comunicacion es pequeña (sólo lo que se modifica)
● proporciona mecanismos de batch y cache.
● RF proporciona su propio servlet y el código necesario para
convertir objetos y llamar a métodos.
● Se integra con widgets de presentación y editores
● Fácil de testear y muy útil para hacer una aplicación MVP
43. // Proxy Class
@ProxyForName("com.paradigma.server.Subject")
// Entity class public interface SubjectProxy extends EntityProxy {
public class Subject { String getTitle();
Long getId();
public static HashMap<Long, Subject> subjects Integer getVersion();
= new HashMap<Long, Subject>(); void setTitle(String title);
private static long cont = 0; void setId(Long id);
private Integer version = 0; void setVersion(Integer version);
private Long id = cont++; }
private String title;
public Long getId() { // Service Class
return id; @ServiceName("com.paradigma.server.Subject")
} public interface SubjectRequest extends RequestContext {
public void setId(Long id) { Request<java.lang.Long> countSubjects();
this.id = id; Request<SubjectProxy> findSubject(Long id);
} InstanceRequest<SubjectProxy, java.lang.Void> remove();
public Integer getVersion() { InstanceRequest<SubjectProxy, java.lang.Void> persist();
return version; Request<String> myMethod(String arg);
} }
public void setVersion(Integer version) {
this.version = version; // Request Interface
} public interface MyRequestFactory extends RequestFactory {
public void flush() { SubjectRequest subjectRequest();
} }
public void persist() {
version ++;
subjects.put(getId(), this);
}
public void remove() { // Using it
subjects.remove(getId()); final EventBus eventBus = new SimpleEventBus();
} // Here come the magic
public static List<Subject> findAllSubjects() { final MyRequestFactory rf = GWT.create(MyRequestFactory.class);
return new ArrayList<Subject>(subjects.values()); rf.initialize(eventBus);
}
public static long countSubjects() { // find entities
return subjects.size(); rf.subjectRequest().findSubject(1l).fire(new Receiver<SubjectProxy>() {
} public void onSuccess(SubjectProxy response) {
public static Subject findSubject(Long id) { // Edit and persist
return subjects.get(id); SubjectRequest rq = rf.subjectRequest();
} SubjectProxy editable = rq.edit(response);
public String getTitle() { editable.setTitle("new title");
return title; rq.persist().using(editable).fire();
} }
public void setTitle(String title) { });
this.title = title; // Call remote methods
} rf.subjectRequest().myMethod("mi mensaje").fire(new Receiver<String>() {
public void onSuccess(String response) {
public static String myMethod(String arg) { }
return "Server " + arg; });
}
}
45. MVC
● Desarrollo lento
● Vinculos complejos
● Muy acoplado
● Dependencias cruzadas
46. MVP
● Objetivo: Crear una vista simple
● Testabilidad de la vista no es
necesaria porque utilizamos
componentes testados.
● Se pueden crear Mock muy
simples
● Desarrollo Rapido con TDD
● Muy desacoplado
● Dependencias muy simples
47. Talkwheel es una plataforma de discusión interactiva que facilita las conversaciones en
grupo:
Tiempo real.
Pretende centralizar todas las conversaciones.
Se Trabaja en añadir motores y elementos de análisis y conocimiento.
Hacer la navegación muy visual.
Servidor MUY ligero
Construida en: Java + GWT + Gquery + SVG
Primera versión : http://talkwheel.com