GWT            Google Web Toolkit                            Manuel Carrasco Moñino                            manolo@apac...
Qué vamos a ver              •                  Introducción a GWT              •                  Arquitectura y SDK     ...
ALTERNATIVAS RIA                   Browser-      Player-            Client-                    based        based         ...
Misión de GWT   Mejorar radicalmente la experiencia web de los usuarios,al permitir a los desarrolladores utilizar las her...
¿Qué NO es GWT?No es una librería más de utilidades JS:          jquery, prototype...No es una librería de widgets ricos ...
¿Qué es GWT?    Generador de javascript: convierte código java a javascript.               Compilador + Linker + Optimiz...
La historia se repite    C → ASM                                    Java → JS          #include                           ...
¿Por qué un compilador?    Separar la mantenibilidad del código de la efectividad del    ejecutable.    El JS escrito a ...
¿Por qué Java?    Sintaxis javascript próxima a java: fácil transformación    Ecosistema de herramientas Java    Diseño...
¿RENDIMIENTO?     JAVASCRIPT                        USUARIO                   DESARROLLOGenera menos código            Apl...
ARQUITECTURA      Y    SDK
Java Code (IDE)                               Java Server              Java Client                                  Side  ...
Componentes del Toolkit           PARA EL CLIENTE                 PARA EL SERVIDOR    •         Libreria emulada JRE      ...
Resumen•    GWT no hace posible nada que no fuera posible hacer de otra    manera, pero sí hace que la acción sea mucho ma...
Ventajas
Gwt es simpleDESARROLLAR UNA APLICACIÓNEN GWT PUEDE SER TAN SIMPLECOMO DESARROLLAREN VISUAL BASICJunio 2011        Madrid ...
Gwt es barato y FIABLE                             SOPORTE         Comunidad muy activa:           •             GWT-users...
Gwt ahorra costesDESARROLLAR UNA APLICACIÓN ENGWT ES BASTANTE MÁS RÁPIDO QUEDESARROLARLAEN TECNOLOGÍA J2EEJunio 2011      ...
TRABAJA OFFLINENO ES NECESARIO UN SERVIDOR: - HTML5 (Data store) - Aplicaciones sólo visuales   (Juegos …)Junio 2011      ...
ALTAMENTE COMPATIBLE  Los móviles están equipados con  navegadores modernos y rápidos  GWT produce Js y Ajax pequeño y  op...
JAVA → Patrones, Depuración, TDD, IDEs, CI ...                                                                         Más...
Trabajando con GWTJunio 2011     Madrid JUG
Estructura del proyectoJunio 2011      Madrid JUG
Pasos para desarrollar GWT●   Prepara el entorno de trabajo: Eclipse + plugins●   Crea un nuevo proyecto (Template, Archet...
Plugins en EclipseJunio 2011        Madrid JUG
Crear un ProyectoJunio 2011     Madrid JUG
Crear un proyecto MavenJunio 2011     Madrid JUG
Ejecutar, Depurar, Test, Navegar, Compilar●   Project → Run As → Web Application●   Project → Debug As → Web Application● ...
Plugin para browser●   Suele ser bastante automático.     ●   Windows: IE, FF, Chrome     ●   Linux: FF, Chrome (experimen...
GWT Widgets y LibreríasJunio 2011        Madrid JUG
Widgets●    http://code.google.com/webtoolkit/tools/gwtdesigner/●    http://gwt.google.com/samples/Showcase/Showcase.html ...
Librerías●   Multitud de librerías:     ●   Upload     ●   Graficos: Chronoscope, Canvas     ●   Enhancement: Gquery     ●...
GQueryJunio 2011   Madrid JUG
Jquery & GWT•        Filosofía jquery: Haz mas, escribe menos: do more, write less.•        Permite utilizar GWT en escena...
Sintaxis    // Static imports    import static com.google.gwt.query.client.GQuery.$;    import static com.google.gwt.query...
Colecciones    // Iterate    $("table").each(new Function(){      public void f(Element e) {        if ($(e).hasClass("wha...
Type-safe     //it easy now to specify shorthand property...     $("#hello").css(CSS.BACKGROUND.with(                     ...
Interacciona con GWT        // enhance GWT widgets        List<Label> labels = $("div").widgets(Label.class);        $(lab...
Escribiendo plugins      public class Enhance extends GQuery {          // A shortcut to the class          public static ...
Request FactoryJunio 2011   Madrid JUG
Nuevo en GWT 2.1, 2.2, 2.3●  Cell Widgets: listas, arboles, tablas, suggestions. Trabajan con grandescantidades de datos d...
Request Factory●   Facilita el uso de acceso a datos en el cliente.●   Permite que puedas programar la parte del servidor ...
// Proxy Class                                                             @ProxyForName("com.paradigma.server.Subject")//...
MVP: Modelo Vista PresentadorJunio 2011           Madrid JUG
MVC●   Desarrollo lento●   Vinculos complejos●   Muy acoplado●   Dependencias cruzadas
MVP●   Objetivo: Crear una vista simple     ●   Testabilidad de la vista no es         necesaria porque utilizamos        ...
Talkwheel es una plataforma de discusión interactiva que facilita las conversaciones engrupo:     Tiempo real.     Pretend...
Próxima SlideShare
Cargando en…5
×

GWT: Why GWT, GQuery, and RequestFactory

2.436 visualizaciones

Publicado el

Spanish Presentation
First meeting of Madrid Java User Group (JUG)
Manuel Carrasco Moñino

Publicado en: Tecnología
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
2.436
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
45
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.

GWT: Why GWT, GQuery, and RequestFactory

  1. 1. GWT Google Web Toolkit Manuel Carrasco Moñino manolo@apache.org twitter.com/dodotisCréditos:
  2. 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 • TalkwheelJunio 2011 Madrid JUG 2
  3. 3. ALTERNATIVAS RIA Browser- Player- Client- based based based Thin Windows, Rich HTML Client Mac ClientReduced maintenance Combined benefits Intuitive UILocation independence of thin and rich client Inmediate response Junio 2011 Madrid JUG 3
  4. 4. Misión de GWT Mejorar radicalmente la experiencia web de los usuarios,al permitir a los desarrolladores utilizar las herramientas deJava para hacer Ajax que funcione en cualquier navegadormoderno. 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. 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. 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. 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 forAdvanced 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. 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. 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. 10. ¿RENDIMIENTO? JAVASCRIPT USUARIO DESARROLLOGenera menos código Aplicaciones más rápidas Con el ahorro del tiempo y con menos trucos HTTP. invertido en depurar losAnaliza el código e incluye problemas en cadasolo el necesario para Elimina el uso envoltorios navegador, se puedecada navegador para funcionalidades emplear más tiempo en nativas de cada versión la funcionalidad de laA veces más lento, pero de navegador. aplicación.más eficaz. La eficiencia en elImplementa gestores desarrollo es la principalpropios para evitar leaks ventaja de Gwt. Junio 2011 Madrid JUG 10
  11. 11. ARQUITECTURA Y SDK
  12. 12. Java Code (IDE) Java Server Java Client Side SideToolkit (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. 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. 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.
  15. 15. Ventajas
  16. 16. Gwt es simpleDESARROLLAR UNA APLICACIÓNEN GWT PUEDE SER TAN SIMPLECOMO DESARROLLAREN VISUAL BASICJunio 2011 Madrid JUG 16
  17. 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 GoogleJunio 2011 Madrid JUG 17
  18. 18. Gwt ahorra costesDESARROLLAR UNA APLICACIÓN ENGWT ES BASTANTE MÁS RÁPIDO QUEDESARROLARLAEN TECNOLOGÍA J2EEJunio 2011 Madrid JUG 18
  19. 19. TRABAJA OFFLINENO ES NECESARIO UN SERVIDOR: - HTML5 (Data store) - Aplicaciones sólo visuales (Juegos …)Junio 2011 Madrid JUG 19
  20. 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ónJunio 2011 Madrid JUG 20
  21. 21. JAVA → Patrones, Depuración, TDD, IDEs, CI ... Más idad os tiv alid ad Men s duc C re l e proMás ftware erro sl egibde S o MáJunio 2011 Madrid JUG 21
  22. 22. Trabajando con GWTJunio 2011 Madrid JUG
  23. 23. Estructura del proyectoJunio 2011 Madrid JUG
  24. 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 ● EntregaJunio 2011 Madrid JUG
  25. 25. Plugins en EclipseJunio 2011 Madrid JUG
  26. 26. Crear un ProyectoJunio 2011 Madrid JUG
  27. 27. Crear un proyecto MavenJunio 2011 Madrid JUG
  28. 28. Ejecutar, Depurar, Test, Navegar, Compilar● Project → Run As → Web Application● Project → Debug As → Web Application● Project → Run As → TestJunio 2011 Madrid JUG
  29. 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.0Junio 2011 Madrid JUG
  30. 30. GWT Widgets y LibreríasJunio 2011 Madrid JUG
  31. 31. 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.htmlJunio 2011 Madrid JUG
  32. 32. Librerías● Multitud de librerías: ● Upload ● Graficos: Chronoscope, Canvas ● Enhancement: Gquery ● APIS: gmaps, FaceBook, ● HTML5Junio 2011 Madrid JUG
  33. 33. GQueryJunio 2011 Madrid JUG
  34. 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
  35. 35. Sintaxis // Static imports import 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; // 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")); // SVG $("circle").attr("stroke-opacity", "0.86"));
  36. 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. 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. 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. 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");
  40. 40. Request FactoryJunio 2011 Madrid JUG
  41. 41. Nuevo en GWT 2.1, 2.2, 2.3● Cell Widgets: listas, arboles, tablas, suggestions. Trabajan con grandescantidades 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 dedominio● 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. 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. 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; }); }}
  44. 44. MVP: Modelo Vista PresentadorJunio 2011 Madrid JUG
  45. 45. MVC● Desarrollo lento● Vinculos complejos● Muy acoplado● Dependencias cruzadas
  46. 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. 47. Talkwheel es una plataforma de discusión interactiva que facilita las conversaciones engrupo: 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 ligeroConstruida en: Java + GWT + Gquery + SVGPrimera versión : http://talkwheel.com

×