Desarrollo de aplicaciones web SPA con Java utilizando GWT

www.i2e.es
Aplicaciones SPA con Java
Emilio Bravo Garcia
Jose Luis Ramirez Terry

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

www.i2e.es
Sobre Java, JavaScript y GWT

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.

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.

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.

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.

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.

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.

www.i2e.es
 Obtenemos un mayor rendimiento y una mejor
escalabilidad que con las aplicaciones web
tradicionales.

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.

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.

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

www.i2e.es
 Programas en Java.
 Depuras en Java
 Pruebas en Java
 GWT compila de Java a JavaScript.
 Despliegas JavaScript.

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.

www.i2e.es
La caja de herramientas

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

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.

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.

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

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.

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;
}-*/;

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();
}

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);
}
}

www.i2e.es
 Eclipse Google Plugin
 IntelliJ IDEA
 Maven

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.

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).

www.i2e.es
 Con el Super Dev Mode SDM y gracias a Source Maps
podemos depurar codigo Java directamente desde el
navegador.

www.i2e.es
 SDBG. Eclipse Debugger for GWT SuperDevMode SDM
 http://sdbg.github.io/

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.

www.i2e.es
Acelera el desarrollo …

www.i2e.es
 GWT proporciona su propio framework siguiendo el
patron MVP.
 http://www.gwtproject.org/doc/latest/DevGuideMv
pActivitiesAndPlaces.html

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.

www.i2e.es
 Evolución de JavaScript mas hacia Java y menos
hacia Script.

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/

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.

www.i2e.es
GWT en el mundo real

www.i2e.es
By http://paulhammant.com

www.i2e.es
 Adwords/Adsense
 Google Spreadsheet
 Wallet
 Groups
 Shopping Express
 Flights,Hotels
 Offers
 Orkut
 Blogger
 Takeout
 Android Play Store
Developer Portal

www.i2e.es
http://simbiotika.com/

www.i2e.es
http://fixner.com
Software en la nube para la gestión de empresas de servicios profesionales

www.i2e.es
 http://www.i2e.es
 Twitter: i2e_es
 emilio@i2e.es
 joseluis@i2e.es
 i2e@i2e.es

Desarrollo de aplicaciones web SPA con Java utilizando GWT

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Ingenieria Informatica Empresarial

Mehr von Ingenieria Informatica Empresarial (11)

Desarrollo de aplicaciones web SPA con Java utilizando GWT