GWT: Why GWT, GQuery, and RequestFactory
-
Upload
manuel-carrasco-monino -
Category
Technology
-
view
2.057 -
download
7
description
Transcript of GWT: Why GWT, GQuery, and RequestFactory
Qué vamos a ver
Junio 2011 2Madrid JUG
• Introducción a GWT• Arquitectura y SDK• Ventajas• Trabajando con GWT • Widgets y Librerias• GWT ligero: Gquery• Ajax Fácil: RequestFactory• Talkwheel
ALTERNATIVAS RIA
3Junio 2011 Madrid JUG
ThinClient
RichClient
HTML Windows, Mac
Browser-based
Player-based
Client-based
Reduced maintenanceLocation independence
Combined benefitsof thin and rich client
Intuitive UIInmediate response
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.
Compila el
código Java
en JavascriptCódigo
escrito
en Java
¿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 ...
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 !
¿Qué es GWT?
La historia se repite
Java → JS<inherits
<replace-withInline JS native code
CompilerOptimizer
LinkerJavascript para cada navegador
Advanced IDE and tools for testing, debuging
C → ASM#include
#ifdefInline ASM native code
CompilerOptimizer
LinkerEnsamblador para cada
procesadorAdvanced IDE and tools for
testing, debuging
Un lenguaje de alto nivel permite que el Desarrollador no se pierda en detalles de bajo nivel (DOM, JS, Ajax, XD, Browsers ) PRODUCTIVIDAD
¿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
¿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 !!!
Junio 2011 Madrid JUG 10
¿RENDIMIENTO?
Genera menos código
Analiza el código e incluye solo el necesario para cada navegador
A veces más lento, pero más eficaz.
Implementa gestores propios para evitar 'leaks'
Aplicaciones más rápidas y con menos trucos HTTP.
Elimina el uso envoltorios para funcionalidades nativas de cada versión de navegador.
Con el ahorro del tiempo invertido en depurar los problemas en cada navegador, se puede emplear más tiempo en la funcionalidad de la aplicación.
La eficiencia en el desarrollo es la principal ventaja de Gwt.
JAVASCRIPT USUARIO DESARROLLO
ARQUITECTURA Y
SDK
Junio 2011 Madrid JUG 12
Java Server Side
Java Client Side
Java Code (IDE)
GWT server libs RPC/RF
GWT development Debug/Hosted/Test
GWT compiler Compiler/Optimizer
JRE Emulation Libs & Widgets
Test Runner FF/IE/Ch-Plugin
JVM App-Server
J-Byte Code
3ª Party Server libs
BrowserOther Backends(php, ruby, ...)
JavaScript Bundles (css, sprite)
3ª Party Server libs
Toolkit (SDK)
RPC/RF/JSON/XML RF/JSON/XML
Componentes del Toolkit
• Libreria emulada JRE• java.util• java.lang• Librería Core • JSON, XML, RPC, RF• DOM, UI, I18N• Compiler, Optimizer, Linker
Sólo en caso de Java: - Librería RPC - Librería RequestFactory - Logger: client → server
• Herramientas de debug• Testing library
(GWTestCase, HtmlUnit)• App Server: Jetty/Tomcat• Eclipse Plugin• Browser plugin• Maven plugin.• Designer
PARA EL CLIENTE PARA EL SERVIDOR
PARA EL DESARROLLO
Speed TracerGAE
PARA PRODUCCIÓN
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.
Ventajas
Gwt es simple
Junio 2011 Madrid JUG 16
DESARROLLAR UNA APLICACIÓNEN GWT PUEDE SER TAN SIMPLE COMO DESARROLLAR EN VISUAL BASIC
Gwt es barato y FIABLE
Junio 2011 Madrid JUG 17
Comunidad muy activa:• GWT-users cien mensajes diarios• GWT-contributors (lista moderada) 10 mensajes
diariosDesarrollo
• 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íasGoogle
SOPORTE
Gwt ahorra costes
Junio 2011 Madrid JUG 18
DESARROLLAR UNA APLICACIÓN EN GWT ES BASTANTE MÁS RÁPIDO QUE DESARROLARLA EN TECNOLOGÍA J2EE
TRABAJA OFFLINE
Junio 2011 Madrid JUG 19
NO ES NECESARIO UN SERVIDOR:- HTML5 (Data store)- Aplicaciones sólo visuales (Juegos …)
ALTAMENTE COMPATIBLE
Junio 2011 Madrid JUG 20
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 21
JAVA → Patrones, Depuración, TDD, IDEs, CI ...
Más Calidad
de Software Menos
errores
Más legible
Más
productividad
Junio 2011 Madrid JUG
Trabajando con GWT
Junio 2011 Madrid JUG
Estructura del proyecto
Junio 2011 Madrid JUG
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
Plugins en Eclipse
Junio 2011 Madrid JUG
Crear un Proyecto
Junio 2011 Madrid JUG
Crear un proyecto Maven
Junio 2011 Madrid JUG
Ejecutar, Depurar, Test, Navegar, Compilar
● Project → Run As → Web Application
● Project → Debug As → Web Application
● Project → Run As → Test
Junio 2011 Madrid JUG
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
GWT Widgets y Librer así
Junio 2011 Madrid JUG
Widgets
● http://code.google.com/webtoolkit/tools/gwtdesigner/
● http://gwt.google.com/samples/Showcase/Showcase.html
● Widgets: Button PushButton RadioButton CheckBox DatePicker ToggleButton TextBox PasswordTextBox TextArea Hyperlink ListBox CellList MenuBar Tree CellTree SuggestBox RichTextArea FlexTable Grid CellTable CellBrowser TabBar DialogBox
● Panels: PopupPanel StackPanel StackLayoutPanel HorizontalPanel VerticalPanel FlowPanel VerticalSplitPanel HorizontalSplitPanel SplitLayoutPanel DockPanel DockLayoutPanel TabPanel TabLayoutPanel DisclosurePanel
● http://www.sencha.com/examples/explorer.html
● http://www.smartclient.com/smartgwt/showcase/
● http://mosaic.arkasoft.com/gwt-mosaic-current/Showcase.html
Junio 2011 Madrid JUG
Librerías
● Multitud de librerías:
● Upload● Graficos: Chronoscope, Canvas● Enhancement: Gquery● APIS: gmaps, FaceBook, ● HTML5
Junio 2011 Madrid JUG
GQuery
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
Sintaxis
// Method chaining // Closures, Plugins $("#animate") .css("color", "red") .hover( new Function() { public void f(Element e) { $(e).css("color", "blue").as(Effects).stop().animate("fontSize: '+=10px'"); } }, new Function() { public void f(Element e) { $(e).css("color", "").as(Effects).stop().animate("fontSize: '-=10px'"); } } );
// JS Properties $("*").css($$("marginTop: 10px, marginLeft: 15px"));
// Static importsimport static com.google.gwt.query.client.GQuery.$;import static com.google.gwt.query.client.GQuery.$$;import static com.google.gwt.query.client.plugins.Effects.Effects;
// SVG $("circle").attr("stroke-opacity", "0.86"));
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; } });
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);
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(); }
Escribiendo pluginspublic 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");
Junio 2011 Madrid JUG
Request Factory
Junio 2011 Madrid JUG
● 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
Nuevo en GWT 2.1, 2.2, 2.3
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
// Entity classpublic class Subject { public static HashMap<Long, Subject> subjects = new HashMap<Long, Subject>(); private static long cont = 0; private Integer version = 0; private Long id = cont++; private String title; public Long getId() { return id; } public void setId(Long id) { this.id = id; } public Integer getVersion() { return version; } public void setVersion(Integer version) { this.version = version; } public void flush() { } public void persist() { version ++; subjects.put(getId(), this); } public void remove() { subjects.remove(getId()); } public static List<Subject> findAllSubjects() { return new ArrayList<Subject>(subjects.values()); } public static long countSubjects() { return subjects.size(); } public static Subject findSubject(Long id) { return subjects.get(id); } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; }
public static String myMethod(String arg) { return "Server " + arg; }}
// Proxy Class@ProxyForName("com.paradigma.server.Subject")public interface SubjectProxy extends EntityProxy { String getTitle(); Long getId(); Integer getVersion(); void setTitle(String title); void setId(Long id); void setVersion(Integer version);}
// Service Class@ServiceName("com.paradigma.server.Subject")public interface SubjectRequest extends RequestContext { Request<java.lang.Long> countSubjects(); Request<SubjectProxy> findSubject(Long id); InstanceRequest<SubjectProxy, java.lang.Void> remove(); InstanceRequest<SubjectProxy, java.lang.Void> persist(); Request<String> myMethod(String arg);}
// Request Interfacepublic interface MyRequestFactory extends RequestFactory { SubjectRequest subjectRequest();}
// Using it final EventBus eventBus = new SimpleEventBus();// Here come the magicfinal MyRequestFactory rf = GWT.create(MyRequestFactory.class);rf.initialize(eventBus);
// find entitiesrf.subjectRequest().findSubject(1l).fire(new Receiver<SubjectProxy>() { public void onSuccess(SubjectProxy response) { // Edit and persist SubjectRequest rq = rf.subjectRequest(); SubjectProxy editable = rq.edit(response); editable.setTitle("new title"); rq.persist().using(editable).fire(); }});// Call remote methodsrf.subjectRequest().myMethod("mi mensaje").fire(new Receiver<String>() { public void onSuccess(String response) { }});
Junio 2011 Madrid JUG
MVP: Modelo Vista Presentador
● Desarrollo lento● Vinculos complejos ● Muy acoplado● Dependencias cruzadas
MVC
● 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
MVP
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