ww

w.i

2e

.es

Aplicaciones SPA con Java

Emilio Bravo Garcia

Jose Luis Ramirez Terry

ww

w.i

2e

.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

ww

w.i

2e

.es

Sobre Java, JavaScript y GWT

ww

w.i

2e

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

ww

w.i

2e

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

ww

w.i

2e

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

ww

w.i

2e

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

ww

w.i

2e

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

ww

w.i

2e

.es

Mejora la experiencia de usuario. Al ejecutarse lainterfaz de usuario en el navegador, la interacción delusuario con la aplicación es mas fluida, al no sernecesario llamar al servidor para renderizar las paginasya no tendremos el efecto de pagina en blanco.

ww

w.i

2e

.es

Obtenemos un mayor rendimiento y una mejorescalabilidad que con las aplicaciones webtradicionales.

ww

w.i

2e

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

ww

w.i

2e

.es

Manifiesto GWT

La misión de GWT es mejorar radicalmentela experiencia de los usuarios con la webpermitiendo a los desarrolladores utilizarlas herramientas Java existentes paraconstruir aplicaciones Ajaxindependientes del navegador.

ww

w.i

2e

.es

Google Web Toolkit (GWT) permite crearaplicaciones AJAX en el lenguaje de programaciónJava que son compiladas a código JavaScriptoptimizado para los principales navegadores.

Código disponible bajo la licencia Apache 2.0

ww

w.i

2e

.es

Programas en Java.

Depuras en Java

Pruebas en Java

GWT compila de Java a JavaScript.

Despliegas JavaScript.

ww

w.i

2e

.es

Porque Java?

Google eligió Java sobre todo por las herramientasexistentes, además de por las librerías, libros,artículos y la amplia comunidad de desarrolladores.

Por otro lado necesitaban unlenguaje fuertemente tipado parala fase de compilación y Javacumplía con este requerimiento.

ww

w.i

2e

.es

La caja de herramientas

ww

w.i

2e

.es

El SDK de GWT tiene cuatro componentesprincipales

◦ Java-to-JavaScript Compiler.

◦ Super Dev Mode SDM

◦ JRE Emulation Library.

◦ GWT Web UI Class Library

ww

w.i

2e

.es

GWT Java-to-JavaScript Compiler: la función delcomponente es traducir el código desarrollado enJava al lenguaje JavaScript compatible con losnavegadores mas utilizados.

ww

w.i

2e

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

ww

w.i

2e

.es

JRE Emulation Library: contiene las bibliotecas másimportantes de las clases de Java. GWT emula partede 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

ww

w.i

2e

.es

GWT Web UI Class Library: contiene un conjunto deelementos de interfaz de usuario que permite lacreación de objetos tales como textos, cajas detexto, imágenes , botones y otros widgets.

ww

w.i

2e

.es

ww

w.i

2e

.es

Si la biblioteca de clases de GWT no satisface tusnecesidades, puedes mezclar JavaScriptmanualmente en el código fuente Java mediante lainterfaz JSNI o JSO.

Si ya tienes código JavaScript puedes envolverlousando JSNI y crear un paquete jar para que el restodel equipo pueda reutilizarlo fácilmente.

var first_name = “Frank”;public native String getFirstName()/*-{return $wnd.first_name;}-*/;

ww

w.i

2e

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

ww

w.i

2e

.es

Jsinterop (beta en GWT 2.7)

Permite importa y exporta de y hacia JavaScriptutilizando anotaciones Java.

@JsType

public interface ImageUtils {

public static Texture loadTexture(String url) {

return Js("$wnd.THREE.ImageUtils.loadTexture($0)", url);

}

}

ww

w.i

2e

.es

Eclipse Google Plugin

IntelliJ IDEA

Maven

ww

w.i

2e

.es

Podemos desarrollar la intefaz de usuario al estilo de Swing oSWT con las librería de widgets que proporciona GWT.

Recomendamos usar UiBinder para realizar la interfaz deusuario utilizando HTML y CSS.

Tambien podemos utilizar Twitter Bootstrap e integrarwidgets y componentes de jQuery.

ww

w.i

2e

.es

GWT puede comunicarse con cualquier tecnología deservidor, realizando llamadas AJAX desde el cliente ytransportando la información utilizando JSON o XML.

GWT proporciona GWT RPC y RequestFactory.

Podemos comunicarnos con servicios REST (RestyGWT facilitael trabajo).

ww

w.i

2e

.es

Con el Super Dev Mode SDM y gracias a Source Mapspodemos depurar codigo Java directamente desde el navegador.

ww

w.i

2e

.es

SDBG. Eclipse Debugger for GWT SuperDevMode SDM http://sdbg.github.io/

ww

w.i

2e

.es

ww

w.i

2e

.es

GWT compila el código Java en archivos JavaScriptoptimizados para cada uno de los navegadores IE, Firefox, Mozilla, Safari y Opera..

Podemos compilar desde la línea de comandos, ant o maven.

ww

w.i

2e

.es

Acelera el desarrollo …

ww

w.i

2e

.es

GWT proporciona su propio framework siguiendo elpatron MVP.

http://www.gwtproject.org/doc/latest/DevGuideMvpActivitiesAndPlaces.html

ww

w.i

2e

.es

ww

w.i

2e

.es

La web que viene

ww

w.i

2e

.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, aunquecada vez son mayores las contribuciones de otrasempresas y particulares.

ww

w.i

2e

.es

Evolución de JavaScript mas hacia Java y menoshacia Script.

ww

w.i

2e

.es

Web Components son una serie de estandares quepermiten la creacion de compenentes y widgetsreutilizables en documentos o aplicaciones web.http://webcomponents.org/

Polymer es la implementación de Web Componentsrealizada por Google. https://www.polymer-project.org/

ww

w.i

2e

.es

Java 8

Facilitar la integración con Polymer y JavaScriptgracias a JsInterop.

Mejorar la integración con HTML 5 gracias aElemental 2.0

Optimización y mejora de la compilaciónincremental.

ww

w.i

2e

.es

GWT en el mundo real

ww

w.i

2e

.es

ww

w.i

2e

.es

By http://paulhammant.com

ww

w.i

2e

.es

Adwords/Adsense

Google Spreadsheet

Wallet

Groups

Shopping Express

Flights,Hotels

Offers

Orkut

Blogger

Takeout

Android Play StoreDeveloper Portal

ww

w.i

2e

.es

http://simbiotika.com/

ww

w.i

2e

.es

http://fixner.com

Software en la nube para la gestión de empresas de servicios profesionales

ww

w.i

2e

.es

ww

w.i

2e

.es

http://www.i2e.es

Twitter: i2e_es

emilio@i2e.es

joseluis@i2e.es

i2e@i2e.es