Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Desarrollo de aplicaciones web SPA con Java utilizando GWT

1,537 views

Published on

Desarrollo de aplicaciones web SPA (Single Page Application) o SPI (Single Page Interface) utilizando Java como lenguaje de programación y compiladas a JavaScript gracias al SDK de GWT.

En este presentación damos un paseo por las características mas importantes de GWT, el estado actual y las futuras versiones.

También mostramos algunas aplicaciones de ejemplo desarrolladas por Google, entre ellas el cliente web de Google Inbox, y otras desarrolladas por nosotros.

Si necesitáis mas información o alguna aclaración no dudéis en poneros en contacto con nosotros en http://i2e.es.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Desarrollo de aplicaciones web SPA con Java utilizando GWT

  1. 1. www.i2e.es Aplicaciones SPA con Java Emilio Bravo Garcia Jose Luis Ramirez Terry
  2. 2. www.i2e.es  En esta presentación se va a realizar una introducción al SDK de GWT y como este permite el desarrollo de aplicaciones SPA (Single Page Applications) utilizando Java como lenguaje de programación. Un poco de historia El SDK de GWT Frameworks sobre GWT Presente y Futuro de GWT Aplicaciones de Ejemplo
  3. 3. www.i2e.es Sobre Java, JavaScript y GWT
  4. 4. www.i2e.es  Una de las intenciones con la que fue creado Java y la JVM era conseguir el WORA ( "write once, run anywhere).  En 1995 Sun Microsystem publico la primera versión de Java y la JVM.  Durante un tiempo Java y la JVM fueron la mejor solución para conseguir el WORA, pero llego la Web y los smartphones y cambiaron el entorno.  Actualmente Java sigue siendo uno de los lenguajes mas utilizados.
  5. 5. www.i2e.es  Netscape tambien publico la primera versión de JavaScript en 1995.  Los comienzos fueron muy duros, la compatibilidad entre navegadores (y entre versiones) era un infierno.  Con la mejora de compatibilidad entre navegadores y el auge de la web, JavaScript se ha posicionado como uno de los lenguajes mas utilizados.
  6. 6. www.i2e.es  AJAX, acrónimo de Asynchronous JavaScript And XML.  La primera implementación en 1998 fue el Microsoft Remote Scripting (MSRS) que utilizaba un applet Java para comunicarse con el servidor.  En 2002 la comunidad de usuario modifico el applet de Java por el XMLHttpRequest.
  7. 7. www.i2e.es  AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente, XTML, CSS, JavaScript, XMLHttpRequest, XML o JSON para la transferencia de datos con el servidor.
  8. 8. www.i2e.es  Una aplicación SPA (Single Page Application) o SPI (Single Page Interface) es aplicación web de una unica pagina que carga y actualiza el contenido de forma dinamica.  El termino fue acuñado por primera por Steve Yen en 2005, aunque se venia discutiendo desde 2003.
  9. 9. www.i2e.es  Mejora la experiencia de usuario. Al ejecutarse la interfaz de usuario en el navegador, la interacción del usuario con la aplicación es mas fluida, al no ser necesario llamar al servidor para renderizar las paginas ya no tendremos el efecto de pagina en blanco.
  10. 10. www.i2e.es  Obtenemos un mayor rendimiento y una mejor escalabilidad que con las aplicaciones web tradicionales.
  11. 11. www.i2e.es  Alrededor del 2004/05 en Google decidieron realizar una nueva caja de herramientas para acelerar el desarrollado de aplicaciones SPA basadas en AJAX mejorando la experiencia del usuario.  La primera version de GWT se publico en Mayo de 2006.
  12. 12. www.i2e.es  Manifiesto GWT La misión de GWT es mejorar radicalmente la experiencia de los usuarios con la web permitiendo a los desarrolladores utilizar las herramientas Java existentes para construir aplicaciones Ajax independientes del navegador.
  13. 13. www.i2e.es  Google Web Toolkit (GWT) permite crear aplicaciones AJAX en el lenguaje de programación Java que son compiladas a código JavaScript optimizado para los principales navegadores.  Código disponible bajo la licencia Apache 2.0
  14. 14. www.i2e.es  Programas en Java.  Depuras en Java  Pruebas en Java  GWT compila de Java a JavaScript.  Despliegas JavaScript.
  15. 15. www.i2e.es  Porque Java? Google eligió Java sobre todo por las herramientas existentes, además de por las librerías, libros, artículos y la amplia comunidad de desarrolladores. Por otro lado necesitaban un lenguaje fuertemente tipado para la fase de compilación y Java cumplía con este requerimiento.
  16. 16. www.i2e.es La caja de herramientas
  17. 17. www.i2e.es  El SDK de GWT tiene cuatro componentes principales ◦ Java-to-JavaScript Compiler. ◦ Super Dev Mode SDM ◦ JRE Emulation Library. ◦ GWT Web UI Class Library
  18. 18. www.i2e.es  GWT Java-to-JavaScript Compiler: la función del componente es traducir el código desarrollado en Java al lenguaje JavaScript compatible con los navegadores mas utilizados.
  19. 19. www.i2e.es  Super Dev Mode SDM  Permite recompilar (java -> js) rapidamente el codigo y ver los resultados en el navegador.  Gracias a source maps podemos ver el codigo Java directamente en el navegador.
  20. 20. www.i2e.es  JRE Emulation Library: contiene las bibliotecas más importantes de las clases de Java. GWT emula parte de la API de Java.  http://code.google.com/intl/es- ES/webtoolkit/doc/1.6/RefJreEmulation.html ◦ java.lang ◦ java.lang.annotation ◦ java.util ◦ java.io ◦ java.sql
  21. 21. www.i2e.es  GWT Web UI Class Library: contiene un conjunto de elementos de interfaz de usuario que permite la creación de objetos tales como textos, cajas de texto, imágenes , botones y otros widgets.
  22. 22. www.i2e.es
  23. 23. www.i2e.es  Si la biblioteca de clases de GWT no satisface tus necesidades, puedes mezclar JavaScript manualmente en el código fuente Java mediante la interfaz JSNI o JSO.  Si ya tienes código JavaScript puedes envolverlo usando JSNI y crear un paquete jar para que el resto del equipo pueda reutilizarlo fácilmente. var first_name = “Frank”; public native String getFirstName()/*-{ return $wnd.first_name; }-*/;
  24. 24. www.i2e.es  JSO ◦ Nos permite utilizar código externo JavaScript como si fueran tipos de java. public class Customer extends JavaScriptObject { public final native String getFirstName() /*-{ return this.first_name; }-*/; public final native String getLastName() /*-{ return this.last_name; }-*/; public final native int computeAge() /*-{ return this.getComputedAge(); }-*/; final native String getArea(); }
  25. 25. www.i2e.es  Jsinterop (beta en GWT 2.7)  Permite importa y exporta de y hacia JavaScript utilizando anotaciones Java. @JsType public interface ImageUtils { public static Texture loadTexture(String url) { return Js("$wnd.THREE.ImageUtils.loadTexture($0)", url); } }
  26. 26. www.i2e.es  Eclipse Google Plugin  IntelliJ IDEA  Maven
  27. 27. www.i2e.es  Podemos desarrollar la intefaz de usuario al estilo de Swing o SWT con las librería de widgets que proporciona GWT.  Recomendamos usar UiBinder para realizar la interfaz de usuario utilizando HTML y CSS.  Tambien podemos utilizar Twitter Bootstrap e integrar widgets y componentes de jQuery.
  28. 28. www.i2e.es  GWT puede comunicarse con cualquier tecnología de servidor, realizando llamadas AJAX desde el cliente y transportando la información utilizando JSON o XML.  GWT proporciona GWT RPC y RequestFactory.  Podemos comunicarnos con servicios REST (RestyGWT facilita el trabajo).
  29. 29. www.i2e.es  Con el Super Dev Mode SDM y gracias a Source Maps podemos depurar codigo Java directamente desde el navegador.
  30. 30. www.i2e.es  SDBG. Eclipse Debugger for GWT SuperDevMode SDM  http://sdbg.github.io/
  31. 31. www.i2e.es
  32. 32. www.i2e.es  GWT compila el código Java en archivos JavaScript optimizados para cada uno de los navegadores IE, Firefox, Mozilla, Safari y Opera..  Podemos compilar desde la línea de comandos, ant o maven.
  33. 33. www.i2e.es Acelera el desarrollo …
  34. 34. www.i2e.es  GWT proporciona su propio framework siguiendo el patron MVP.  http://www.gwtproject.org/doc/latest/DevGuideMv pActivitiesAndPlaces.html
  35. 35. www.i2e.es
  36. 36. www.i2e.es La web que viene
  37. 37. www.i2e.es  www.gwtproject.org  Actualmente GWT esta dirigido por un comité formado por representantes de varias empresas.  http://www.gwtproject.org/steering.html  Google contiua siendo el que mas aporta, aunque cada vez son mayores las contribuciones de otras empresas y particulares.
  38. 38. www.i2e.es  Evolución de JavaScript mas hacia Java y menos hacia Script.
  39. 39. www.i2e.es  Web Components son una serie de estandares que permiten la creacion de compenentes y widgets reutilizables en documentos o aplicaciones web. http://webcomponents.org/  Polymer es la implementación de Web Components realizada por Google. https://www.polymer- project.org/
  40. 40. www.i2e.es  Java 8  Facilitar la integración con Polymer y JavaScript gracias a JsInterop.  Mejorar la integración con HTML 5 gracias a Elemental 2.0  Optimización y mejora de la compilación incremental.
  41. 41. www.i2e.es GWT en el mundo real
  42. 42. www.i2e.es
  43. 43. www.i2e.es By http://paulhammant.com
  44. 44. www.i2e.es  Adwords/Adsense  Google Spreadsheet  Wallet  Groups  Shopping Express  Flights,Hotels  Offers  Orkut  Blogger  Takeout  Android Play Store Developer Portal
  45. 45. www.i2e.es http://simbiotika.com/
  46. 46. www.i2e.es http://fixner.com Software en la nube para la gestión de empresas de servicios profesionales
  47. 47. www.i2e.es
  48. 48. www.i2e.es  http://www.i2e.es  Twitter: i2e_es  emilio@i2e.es  joseluis@i2e.es  i2e@i2e.es

×