Desarrollo de aplicaciones web SPA con Java utilizando GWT
-
Upload
ingenieria-informatica-empresarial -
Category
Software
-
view
482 -
download
2
Transcript of Desarrollo de aplicaciones web SPA con Java utilizando GWT
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
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
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
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
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
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
GWT proporciona su propio framework siguiendo elpatron MVP.
http://www.gwtproject.org/doc/latest/DevGuideMvpActivitiesAndPlaces.html
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
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
Adwords/Adsense
Google Spreadsheet
Wallet
Groups
Shopping Express
Flights,Hotels
Offers
Orkut
Blogger
Takeout
Android Play StoreDeveloper Portal
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
http://www.i2e.es
Twitter: i2e_es