Your SlideShare is downloading. ×
0
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Desarrollo de aplicaciones AJAX con GWT
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Desarrollo de aplicaciones AJAX con GWT

2,183

Published on

Desarrollo de aplicaciones web 100% AJAX mediante Java utilizando Google Web Toolkit. Transparencias de la charla de GWT de codemotion 2012

Desarrollo de aplicaciones web 100% AJAX mediante Java utilizando Google Web Toolkit. Transparencias de la charla de GWT de codemotion 2012

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,183
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • 06/03/12 AUTORE
  • Transcript

    • 1. Desarrollo de aplicaciones Web conGoogle Web ToolkitEmilio Bravo Garciawww.i2e.es
    • 2. Indice• Introducción• GWT ToolBox• Interfaz de Usuario• Comunicación con el servidor• Depuración y test• Compilación y despliegue• Extra• Aplicaciones de Ejemplo Emilio Bravo Garcia 2 emilio@i2e.es – www.i2e.es
    • 3. Introducción• Arquitectura• AJAX• Google Web Toolkit
    • 4. Introducción - Arquitectura• SPA (Single Page Application) o SPI (Single Page Interface).• No existe navegación entre paginas. La interacción del usuario con la aplicación no implica un cambio de pagina. Emilio Bravo Garcia 4 emilio@i2e.es – www.i2e.es
    • 5. Introducción - Arquitectura• Thin Server Architecture – thinserverarchitecture.com• No uses plantillas en el lado del servidor para crear la pagina web.• Usa el clásico modelo cliente- servidor, donde el cliente se ejecuta en el navegador.• Separate concerns using protocol between client and server Emilio Bravo Garcia 5 emilio@i2e.es – www.i2e.es
    • 6. Introducción - Arquitectura Emilio Bravo Garcia 6 emilio@i2e.es – www.i2e.es
    • 7. Introducción - Arquitectura• Rich Internet Applications Emilio Bravo Garcia 7 emilio@i2e.es – www.i2e.es
    • 8. Introducción - AJAX• 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 y XML o JSON para la transferencia de datos con el servidor. Emilio Bravo Garcia 8 emilio@i2e.es – www.i2e.es
    • 9. Introducción - AJAX• HTML5 + CSS3 Emilio Bravo Garcia 9 emilio@i2e.es – www.i2e.es
    • 10. Introducción - AJAX• El navegador web como maquina virtual universal. • El navegador web se esta posicionando como el entorno preferente para el acceso a los servicios que ofrece la web. La industria esta apostando por los estándares y por las plataformas abiertas. • Presente en escritorio, tabletas y smartphones. Emilio Bravo Garcia 10 emilio@i2e.es – www.i2e.es
    • 11. Introducción - GWT• Version 1.0 Build 1.0.21 - May 25, 2006• 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. Emilio Bravo Garcia 11 emilio@i2e.es – www.i2e.es
    • 12. Introducción - GWT• Google Web Toolkit (GWT) permite crear aplicaciones AJAX en el lenguaje de programación Java que son compiladas en código JavaScript optimizado para los principales navegadores.• GWT no es un framework, es un toolkit para el desarrollo de aplicaciones 2.0.• Código disponible bajo la licencia Apache 2.0 Emilio Bravo Garcia 12 emilio@i2e.es – www.i2e.es
    • 13. Introducción - GWT• Programas en Java• Depuras en Java• Pruebas en Java• GWT compila Java a JavaScript Emilio Bravo Garcia 13 emilio@i2e.es – www.i2e.es
    • 14. Introducción - GWT• Mejora la experiencia de usuario. Al no ser necesario llamar al servidor para renderizar las paginas ya no tendremos el efecto de pagina en blanco. Emilio Bravo Garcia 14 emilio@i2e.es – www.i2e.es
    • 15. GWT Toolbox
    • 16. GWT ToolBoxGWT SDK Google Plugin Speed Tracer GWT For Eclipse Designer Emilio Bravo Garcia 16 emilio@i2e.es – www.i2e.es
    • 17. GWT ToolBox - SDK• GWT SDK tiene cuatro componentes principales • Java-to-JavaScript Compiler (+ Optimizer y Linker). • Development Mode. • JRE Emulation Library. • GWT Web UI Class Library Emilio Bravo Garcia 17 emilio@i2e.es – www.i2e.es
    • 18. GWT ToolBox - SDKGWT Java-to-JavaScript Compiler: compila el códigodesarrollado en Java a JavaScript optimizado ycompatible con los principales navegadores. Emilio Bravo Garcia 18 emilio@i2e.es – www.i2e.es
    • 19. GWT ToolBox - SDKDevelopment Mode : Permite ejecutar la aplicación en la JVM yen el navegador a través de un plugin. Utiliza Jetty comoservidor web embebido. Emilio Bravo Garcia 19 emilio@i2e.es – www.i2e.es
    • 20. GWT ToolBox - SDK• JRE Emulation Library: contiene las bibliotecas más importantes de las clases de Java. GWT emula parte de la API de Java. • java.lang • java.lang.annotation • java.util • java.io • java.sql Emilio Bravo Garcia 20 emilio@i2e.es – www.i2e.es
    • 21. GWT ToolBox - SDKGWT Web UI Class Library: contiene un conjunto deelementos de interfaz de usuario que permite la creación deobjetos tales como textos, cajas de texto, imágenes , botones yotros widgets. Emilio Bravo Garcia 21 emilio@i2e.es – www.i2e.es
    • 22. GWT ToolBox - Proceso de desarrollo Diseño/ Desarrollo Depuración Optimización Emilio Bravo Garcia 22 emilio@i2e.es – www.i2e.es
    • 23. Interfaz de Usuario• Estructura del Proyecto• Model View Presenter (MVP)• Paneles y Widgets• UiBinder• Acceso a JavaScript• Otras Características
    • 24. Interfaz Usuario – Estructura del Proyecto Emilio Bravo Garcia 24 emilio@i2e.es – www.i2e.es
    • 25. Interfaz Usuario – Estructura del Proyecto• Ficheros de configuración para una aplicación GWT • Fichero gwt.xml donde definimos la aplicación y sus dependencias. • Fichero Html desde el que iniciamos el código JavaScript • Fichero CSS con los estilos. • Clase Java que implementa el EntryPoint (el main para GWT). Emilio Bravo Garcia 25 emilio@i2e.es – www.i2e.es
    • 26. Interfaz Usuario – MVP Emilio Bravo Garcia 26 emilio@i2e.es – www.i2e.es
    • 27. Interfaz Usuario – MVP• MVP - Activities y Places• Un Activity representa algo que el usuario está haciendo. No contiene widgets o código de interfaz de usuario. Es equivalente al Presenter• Un Places un objeto Java que representa un estado particular de la interfaz de usuario. Un Place se puede convertir desde y en una URL. Emilio Bravo Garcia 27 emilio@i2e.es – www.i2e.es
    • 28. Interfaz Usuario – MVP• Editors• GWT Editor framework permite mapear un grafo de objetos en un grafo de editores. El escenario mas común es mapear objetos devueltos por un servicio RPC en la UI (databinding). Emilio Bravo Garcia 28 emilio@i2e.es – www.i2e.es
    • 29. Interfaz Usuario – Paneles y Widgets• Layouts Panels • RootLayoutPanel • LayoutPanel • DockLayoutPanel • SplitLayoutPanel • StackLayoutPanel • TabLayoutPanel Emilio Bravo Garcia 29 emilio@i2e.es – www.i2e.es
    • 30. Interfaz Usuario – Paneles y Widgets• GXT y Smart GWT Emilio Bravo Garcia 30 emilio@i2e.es – www.i2e.es
    • 31. Interfaz Usuario – UiBinder• UIBinder permite definir la interfaz mediante XML, además podemos utilizar un layout HTML + CSS <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:i2e="urn:import:es.i2e.gwt.user.client.ui.rating"> <g:HTMLPanel ui:field="layoutGlobal"> <div class="layout_left"> <div id="user_bar"> <div id="business_bar_info"> Emilio Bravo Garcia 31 emilio@i2e.es – www.i2e.es
    • 32. Interfaz Usuario – Acceso a JavaScript• JSNI• JSNI nos permite envolver código javascript en métodos Java public static native void alert(String msg) / *-{ $wnd.alert(msg); }-*/; Emilio Bravo Garcia 32 emilio@i2e.es – www.i2e.es
    • 33. Interfaz Usuario – Otras Características• GWT.runAsync() para la optimización de la descarga de la aplicación.• ImageBundle y ClientBundle para optimizar la descarga de los recursos. Emilio Bravo Garcia 33 emilio@i2e.es – www.i2e.es
    • 34. Interfaz Usuario – Otras Características• i18n• ARIA para aplicaciones accesibles• Soporte de características de HTML5 (Client-side Storage ,Canvas, Audio, Video).• Integración sencilla con las apis de Google. Emilio Bravo Garcia 34 emilio@i2e.es – www.i2e.es
    • 35. Comunicación con el Servidor• Introducción• GWT RPC• Request Factory• RESTful
    • 36. Comunicación – Introducción• GWT puede comunicarse con cualquier tecnología de servidor, realizando llamadas AJAX desde el cliente y transportando la información utilizando JSON o XML. Emilio Bravo Garcia 36 emilio@i2e.es – www.i2e.es
    • 37. Comunicación – GWT RPC• GWT proporciona por defecto el mecanismo GWT RPC, se encarga de la serializacion entre Java <-> JSON para realizar las llamada. En la parte servidor utiliza Servlets que se encargan de manejar la comunicación. Emilio Bravo Garcia 37 emilio@i2e.es – www.i2e.es
    • 38. Comunicación – Request Factory• RequestFactory Facilita implementar una capa de acceso a datos tanto en el cliente como en el servidor.• Permite estructurar el servidor de una manera orientada a los datos en vez de al servicio, proporciona un nivel de abstracción mayor que GWT-RPC.• Implementa su propio protocolo para el intercambio de datos entre el cliente y el servidor. Solo envía los atributos del objeto que han sido modificados. Emilio Bravo Garcia 38 emilio@i2e.es – www.i2e.es
    • 39. Comunicación – Restful• GWT AutoBean para la serializacion JSON.• Restlet http://www.restlet.org/• RestyGWT http://restygwt.fusesource.org/ Emilio Bravo Garcia 39 emilio@i2e.es – www.i2e.es
    • 40. Depuración y Test• Development Mode• Source Maps (2.5)• Logging• Test
    • 41. Depuración – Development Mode• Instalando un plugin podemos ejecutar la aplicación desde el navegador de nuestra elección y utilizar herramientas como firebug mientras depuramos el código Java desde Eclipse. Emilio Bravo Garcia 41 emilio@i2e.es – www.i2e.es
    • 42. Depuración y Test – SourceMaps (2.5)• Podemos ver el código Java directamente en el Navegador http://www.youtube.com/watch?v=-xJl22Kvgjg Emilio Bravo Garcia 42 emilio@i2e.es – www.i2e.es
    • 43. Depuración – Logging• Emula java.util.logging• Esto permite compartir el código de logging entre cliente y servidor.• Podemos hacer logging remoto, almacenando las trazas de logging de cliente en el fichero de logs del servidor. Emilio Bravo Garcia 43 emilio@i2e.es – www.i2e.es
    • 44. Test• Para ejecutar los test utiliza HtmlUnit, librería de Java que emula un navegador web.• Al estar HtmlUnit escrito enteramente en Java, podemos ejecutar y depurar directamente desde eclipse.• Podemos utilizar herramientas como selenium para realizar pruebas de usuarios sobre la aplicación desplegada. Emilio Bravo Garcia 44 emilio@i2e.es – www.i2e.es
    • 45. Test• Si hemos implementado una arquitectura MVP podemos testear directamente los presenters sin tener que emular el navegador.• Esto mejorara considerablemente el rendimiento de los test y nos permite hacer test de unidad sobre los presenters. Emilio Bravo Garcia 45 emilio@i2e.es – www.i2e.es
    • 46. Compilación y despliegue• Introducción• Ant• Maven• Despliegue
    • 47. Compilación – Introducción• GWT compila el código Java en archivos JavaScript independientes que estarán disponibles a través de cualquier servidor web. Las aplicaciones GWT admiten automáticamente los navegadores IE, Firefox, Chrome, Safari y Opera.• La compilación es un proceso lento. Emilio Bravo Garcia 47 emilio@i2e.es – www.i2e.es
    • 48. Compilación – Ant• Podemos configurar fácilmente una tarea de ant que ejecute el compilador de GWT <target name="compile-gwt" depends="prepare" description="Compila la clases java a JavaScript"> <echo>Realizando la compilacion de gwt con ${gwt.sdk.location}</echo> <java classname="com.google.gwt.dev.Compiler" classpathref="gwt.compile.classpath" fork="true" failonerror="true" > <jvmarg value="-Xms512m" /> … Emilio Bravo Garcia 48 emilio@i2e.es – www.i2e.es
    • 49. Compilación y Despliegue - Maven• http://mojo.codehaus.org/gwt-maven-plugin/ Emilio Bravo Garcia 49 emilio@i2e.es – www.i2e.es
    • 50. Despliegue• El código se empaqueta en un war y se pueden desplegar en cualquier contenedor de Servlets estándar.• Si no hemos utilizado Java para los servicios remotos podemos desplegar en cualquier servidor web http. Emilio Bravo Garcia 50 emilio@i2e.es – www.i2e.es
    • 51. Despliegue – Proceso de trabajo Refrescar Funciona? Si Compilar No Desarrollar Desplegar Emilio Bravo Garcia 51 emilio@i2e.es – www.i2e.es
    • 52. Extra• Aplicaciones Móviles• Juegos• Dart
    • 53. Extra – Aplicaciones Móviles• http://m-gwt.com/• Permite desarrollar aplicaciones móviles con aspecto nativo basadas en GWT MVP• http://code.google.com/p/gwt-phonegap/• Wrapper en Java de la API JavaScript de PhoneGap. Emilio Bravo Garcia 53 emilio@i2e.es – www.i2e.es
    • 54. Extra – Aplicaciones Móviles• m-gwt Emilio Bravo Garcia 54 emilio@i2e.es – www.i2e.es
    • 55. Extra - Juegos• PlayN es una librería multiplataforma que permite a los desarrolladores programar utilizando Java a través de GWT y compilar a HTML5, Flash, Java o Android Nativo.• https://developers.google.com/playn Emilio Bravo Garcia 55 emilio@i2e.es – www.i2e.es
    • 56. Extra - Juegos• El ejemplo mas famoso que utiliza PlayN es la versión web de Angry Birds disponible en G+ y Chrome Web Store. Emilio Bravo Garcia 56 emilio@i2e.es – www.i2e.es
    • 57. Extra - Dart• Lars Bak: “lenguaje estructurado pero flexible para programación Web”.• http://www.dartlang.org/• Al igual que GWT, tiene un compilador de Dart a JavaScript.• Google integrará una máquina virtual nativa en Google Chrome y facilitará a sus competidores la integración en sus navegadores Emilio Bravo Garcia 57 emilio@i2e.es – www.i2e.es
    • 58. Extra - Dart• ¿Sustituirá Dart a GWT?• Google tiene muchas aplicaciones realizadas en GWT.• Si es necesario en un futuro proporcionara herramientas para facilitar la integración/migracion de GWT y Dart• Conversaciones en G+ sobre el futuro de GWT y Dart: • https://plus.google.com/u/0/112745976227102540584/posts/MjZgFK6gjLq • https://plus.google.com/u/0/117487419861992917007/posts/6YWpsHpqMqZ Emilio Bravo Garcia 58 emilio@i2e.es – www.i2e.es
    • 59. Aplicaciones de Ejemplohttp://gwtgallery.appspot.com/
    • 60. Simbiotika.com Emilio Bravo Garcia 60 emilio@i2e.es – www.i2e.es
    • 61. Google AdWords Emilio Bravo Garcia 61 emilio@i2e.es – www.i2e.es
    • 62. Google Offers Emilio Bravo Garcia 62 emilio@i2e.es – www.i2e.es
    • 63. Google Flights Emilio Bravo Garcia 63 emilio@i2e.es – www.i2e.es
    • 64. Google Web Fonts Emilio Bravo Garcia 64 emilio@i2e.es – www.i2e.es
    • 65. Google Orkut Emilio Bravo Garcia 65 emilio@i2e.es – www.i2e.es
    • 66. Trabber Emilio Bravo Garcia 66 emilio@i2e.es – www.i2e.es
    • 67. Bonitasoft User Experience Emilio Bravo Garcia 67 emilio@i2e.es – www.i2e.es
    • 68. Lombardi Blueprint Emilio Bravo Garcia 68 emilio@i2e.es – www.i2e.es
    • 69. Gracias por su atenciónhttp://www.i2e.esTwitter: i2e_esemilio@i2e.es Emilio Bravo Garcia 69 emilio@i2e.es – www.i2e.es

    ×