IV Encuentros de Programadores Java: RIA        Desarrollo web con GWT       deCharlas.com (Oct-2010)                    M...
Misión de GWTTo radically improve the web experience for users by enabling developers   to use existing Java tools to buil...
¿Qué NO es GWT?    No es una librería más de utilidades JS:                    jquery, prototype...    No es una librer...
¿Qué es GWT?   Generador de javascript: convierte código java a javascript.         Es un compilador         Es un link...
Ventajas de usar un compilador frente a       escribir javascript a mano
La historia se repite.   C/C++                           Java    −   #include                     −   <inherits    −   #...
¿Porqué un compilador?    Para separar la mantenibilidad del código de la efectividad del       ejecutable.    Porque el...
¿Porqué Java?   La sintaxis javascript está más próxima a java que a     otros lenguages, por lo que es mas fácil su     ...
GWT nos facilita   Versionado de ficheros para cada compilación, evitando     problemas de cachés.   Descarga sólo lo qu...
¿Rendimiento?    JavaScript    −   GWT genera código mucho más pequeño que el que podamos        escribir a mano. A difer...
Toolkit.
Componentes del Toolkit   Libreria emulada JRE:         java.util         java.lang   Librería Core         JSON, XML...
¿Y qué más?   Historia de navegación (Botón atras, adelante)   ClientBundle: permite agrupar y manipular recursos en tie...
Nuevo en 2.1.0    Cell Widgets: listas, arboles, tablas, suggestions. Trabajan con      grandes cantidades de datos de ma...
Soporte, Comunidad.
Actividad Comunidad GWT   Comunidad muy activa:       – GWT-users cien mensajes diarios       – GWT-contributors (lista m...
Conclusiones
   GWT no hace posible nada que no fuera posible hacer de otra     manera, pero sí hace que la acción sea mucho mas produ...
Trabajando con GWT
Estructura del proyecto
Pasos para desarrollar GWT    Prepara el entorno de trabajo: Eclipse + plugins    Crea un nuevo proyecto (Template, Arch...
Plugins en Eclipse
Crear un Proyecto Google
Crear un Proyecto Google
Crear un proyecto MavenComprobar GWT SDK tiene que estar al principio en build path
webAppCreator$ /msoft/gwt/current/webAppCreator -maven -noant com.foo.Hello-out HelloCreated directory Hello/src/main/java...
Configure Google plugin
Ejecutar, Depurar, Test, Navegar    Project → Run As → Web Application    Project → Debug As → Web Application    Proje...
Configuración módulo *.gwt.xml<module rename-to=hello>  <!-- Inherit the core Web Toolkit stuff.                         -...
Plugin para browser    Añadir plugin, reiniciar browser, reconectar.                      Windows: IE, FF, Chrome       ...
Deferred Binding    Son clases java que no se utilizan hasta el      momento de compilación    Se seleccionan diferentes...
JSNI    Código Javascript en comentarios java    Permite utilizar Js dentro de GWT y al revés.    Usa la declaración na...
RPC    GWT puede hacer llamadas Ajax de 4 tipos                      XML                      JSON                    ...
Widgets    http://code.google.com/webtoolkit/doc/latest/DevGuideUiWidgets.html    http://code.google.com/webtoolkit/doc/...
Preguntas     http://manolocarrasco.blogspot.com                     twitter.com/dodotis               manolo@apache.org
Upcoming SlideShare
Loading in...5
×

Aprendiendo GWT

2,039

Published on

IV Encuentros de Programadores Java en la Universidad S. Jaume I, Castellon, Oct-2010

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,039
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Aprendiendo GWT"

  1. 1. IV Encuentros de Programadores Java: RIA Desarrollo web con GWT deCharlas.com (Oct-2010) Manuel Carrasco Moñino manolo@apache.org
  2. 2. Misión de GWTTo radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise Ajax for any modern browserMejorar 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. 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. 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. 5. Ventajas de usar un compilador frente a escribir javascript a mano
  6. 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. 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. 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. 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. 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.
  11. 11. Toolkit.
  12. 12. Componentes del Toolkit Libreria emulada JRE:  java.util  java.lang Librería Core  JSON, XML, RPC  DOM, UI, I18N Compiler, Optimizer, Linker Herramientas para desarrollo:  Scripts: webAppCreator, i18nCreator  Testing library (GWTestCase, HtmlUnit)  Customized App Server: Jetty/Tomcat  Eclipse Plugin  Browser plugin  Maven plugin Speed Tracer
  13. 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. 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
  15. 15. Soporte, Comunidad.
  16. 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.
  17. 17. Conclusiones
  18. 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
  19. 19. Trabajando con GWT
  20. 20. Estructura del proyecto
  21. 21. 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
  22. 22. Plugins en Eclipse
  23. 23. Crear un Proyecto Google
  24. 24. Crear un Proyecto Google
  25. 25. Crear un proyecto MavenComprobar GWT SDK tiene que estar al principio en build path
  26. 26. webAppCreator$ /msoft/gwt/current/webAppCreator -maven -noant com.foo.Hello-out HelloCreated directory Hello/src/main/javaCreated directory Hello/src/main/webapp[…]Añadir estas líneas al pom.xml en caso de que gwt-2.1.0 noesté 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
  27. 27. Configure Google plugin
  28. 28. Ejecutar, Depurar, Test, Navegar Project → Run As → Web Application Project → Debug As → Web Application Project → Run As → jUnit (
  29. 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. 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. 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. 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. 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
  34. 34. Widgets http://code.google.com/webtoolkit/doc/latest/DevGuideUiWidgets.html http://code.google.com/webtoolkit/doc/latest/RefWidgetGallery.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
  35. 35. Preguntas http://manolocarrasco.blogspot.com twitter.com/dodotis manolo@apache.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×