SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
Introducción a GWT
                          “Google Web Toolkit”
                              ADWE Murcia, 6 de Julio 2011
                                Miguel García, @mglpia
                                miguel.garcia.lopez@gmail.com




lunes 25 de julio de 11
Previo
                      • AJAX: Asynchronous JS and XML    XmlHttpRequest


                      • “Sitio Web” vs. “Aplicación Web”
                      • SPI: Single Page Interface
                      • “Centrado en el Servidor” vs “el Cliente”
                      • Serialización en JSON, XML
                      • JavaScript muy optimizado hoy en día
lunes 25 de julio de 11
Qué es GWT
                          • Nota: GWT != GAE (Google App Engine)
                          • Toolkit desarrollo clientes Web - RIA
                          • Centrado en el navegador:    CPU, RAM, pide por esa boca


                          • Desarrollo en Java
                                             Lenguaje muy extendido


                          • Abstrae de diferencias navegadores
                          • Detalles a continuación...
lunes 25 de julio de 11
Plugin para Eclipse
                          • Creación de proyectos GWT
                          • Integración debugger, “Run as...”
                          • Editores para ficheros usados por GWT
                          • Integración tests unitarios
                          • Otros: Maven plugin, NetBeans, IntelliJ
lunes 25 de julio de 11
Compilador GWT
                  • “Compila” código Java > JavaScript + HTML
                  • Una versión distinta por navegador/engine
                  • No uso de binarios (.jar): código fuente
                  • Clases del JRE/JDK “blacklisted”
                                                   ¡(Re-)Escritas en JS!


                  • Posibilidad de llamar métodos “nativos” JS
                  • OBFUSCATED, PRETTY, DETAILED
lunes 25 de julio de 11
Interfaz Usuario
                          • Extensa librería de widgets          Composite


                          • Diseño/layout vía:
                           • “A pelo”, programáticamente               panel.setLayout(...)

                           • UIBinder XML-based, componentes/handlers inyectados @UiField, ...

                           • GWT Designer       Diseño gráfico drag-and-drop

                           • HTML + GWT (= HTML + JS)
                          • “Wrappers” librerías componentes JS                     ExtJS,YUI...


                          • Soporte para internacionalización
lunes 25 de julio de 11
                          • “CSS-skinning”
Comunicación con Servidor
                   Antes que nada... IMHO no es lo mejor para data-centric apps




                                      (Vía http://www.zkoss.org/)

lunes 25 de julio de 11
Comunicación con Servidor
                    • Con un servidor Java: GWT-RPC
                    • Librería peticiones HTTP
                    • Librerías manejo JSON y XML
                    • API/Naturaleza asíncrona onSuccess() onError()


                    • Múltiples opciones 3ªs partes
                                                 resty-gwt, ...




lunes 25 de julio de 11
Ejecución y Depuración
        • Depuración: “en Java” + Plugin navegador         Hosted Mode


        • Herramientas examen Web    Firebug + PRETTY/DETAILED


        • GWT Logging Framework
        • Código servidor: lo que queramos     Mundo Java, o PHP, o ...




lunes 25 de julio de 11
Otros
                  • APIs de Google GWT-izadas                  Maps, Charts, ...


                  • Soporte al historial navegador
                  • No Eclipse-exclusivo           Otros IDEs, command-line, Maven


                  • Documentación de alta calidad, detalles,
                          tutoriales
                  • Patrones de arquitectura: MVC, MVP, ...
                  • Reutilización código JavaScript
                  • Speed Tracer       Google Chrome Plugin

lunes 25 de julio de 11
“Caso de Éxito”
             • Aplicación gestión equipos de vídeo móviles
             • Servidor Java EE (Glassfish 3.1 OSE, EJB’s + REST)
             • BDD PostgreSQL 9.0
             • Aplicación de escritorio Swing(NetBeans Platform)


             • Cliente(s) web: ubicuidad, ligero, móvil/tablets
             • resty-gwt         , gwt-google-apis
                          cliente REST            Google Maps


             • atmosphere[-gwt] para “comet” (“server push”)
lunes 25 de julio de 11
Demo


                  •       Primera toma de contacto desarrollo GWT...




lunes 25 de julio de 11
Enlaces de Interés
                          •   http://code.google.com/p/murgtug-mediaplayer/

                          •   http://code.google.com/webtoolkit

                          •   http://code.google.com/p/gwt-rest/

                          •   http://java.net/projects/gwt4nb/pages/Home

                          •   http://mojo.codehaus.org/gwt-maven-plugin/

                          •   http://code.google.com/p/gwtchismes/

                          •   http://code.google.com/p/gwt-google-apis/

                          •   http://www.youtube.com/watch?v=PDuhR18-EdM

                          •   http://www.youtube.com/watch?v=aW--Wlf9EFs
lunes 25 de julio de 11

Más contenido relacionado

La actualidad más candente

La actualidad más candente (11)

Gwt I - entendiendo gwt
Gwt I - entendiendo gwtGwt I - entendiendo gwt
Gwt I - entendiendo gwt
 
Java EE moderno, de monolitos a Payara Micro
Java EE moderno, de monolitos a Payara MicroJava EE moderno, de monolitos a Payara Micro
Java EE moderno, de monolitos a Payara Micro
 
Django avanzado: Dia1
Django avanzado: Dia1Django avanzado: Dia1
Django avanzado: Dia1
 
Creando Aplicaciones Web en el 2015
 Creando Aplicaciones Web en el 2015 Creando Aplicaciones Web en el 2015
Creando Aplicaciones Web en el 2015
 
Los mejores trucos y prácticas para configurar drupal
Los mejores trucos y prácticas para configurar drupalLos mejores trucos y prácticas para configurar drupal
Los mejores trucos y prácticas para configurar drupal
 
React – ¿Qué es React.js?
React – ¿Qué es React.js?React – ¿Qué es React.js?
React – ¿Qué es React.js?
 
Moodle 2.8: novedades
Moodle 2.8: novedadesMoodle 2.8: novedades
Moodle 2.8: novedades
 
Introducción al ecosistema de React.js
Introducción al ecosistema de React.jsIntroducción al ecosistema de React.js
Introducción al ecosistema de React.js
 
Taller OSM - FLISOL 2014 Asunción - Paraguay
Taller OSM - FLISOL 2014 Asunción - ParaguayTaller OSM - FLISOL 2014 Asunción - Paraguay
Taller OSM - FLISOL 2014 Asunción - Paraguay
 
Gutenberg sin miedo
Gutenberg sin miedoGutenberg sin miedo
Gutenberg sin miedo
 
El universo JavaScript en Drupal 7
El universo JavaScript en Drupal 7El universo JavaScript en Drupal 7
El universo JavaScript en Drupal 7
 

Similar a Gwt intro adwe_murcia

Conociendo Griffon a Fondo
Conociendo Griffon a FondoConociendo Griffon a Fondo
Conociendo Griffon a Fondo
Andres Almiray
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
Julio Alfaro
 

Similar a Gwt intro adwe_murcia (20)

Comenzando con GWT
Comenzando con GWTComenzando con GWT
Comenzando con GWT
 
Aprendiendo GWT
Aprendiendo GWTAprendiendo GWT
Aprendiendo GWT
 
GWT: Why GWT, GQuery, and RequestFactory
GWT: Why GWT, GQuery, and RequestFactoryGWT: Why GWT, GQuery, and RequestFactory
GWT: Why GWT, GQuery, and RequestFactory
 
Servidores de mapas en alta disponibilidad
Servidores de mapas en alta disponibilidadServidores de mapas en alta disponibilidad
Servidores de mapas en alta disponibilidad
 
Servidor de mapas en HA con Jboss, Geoserver y PostGIS.
Servidor de mapas en HA con Jboss, Geoserver y PostGIS.Servidor de mapas en HA con Jboss, Geoserver y PostGIS.
Servidor de mapas en HA con Jboss, Geoserver y PostGIS.
 
Grails y EC2 - De cero a multinacional
Grails y EC2 - De cero a multinacionalGrails y EC2 - De cero a multinacional
Grails y EC2 - De cero a multinacional
 
GWT - EL ESCRITORIO EN LA WEB
GWT - EL ESCRITORIO EN LA WEBGWT - EL ESCRITORIO EN LA WEB
GWT - EL ESCRITORIO EN LA WEB
 
Desarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones webDesarrollo modermo de aplicaciones web
Desarrollo modermo de aplicaciones web
 
SpringIO 2012 Madrid-Escalabilidad con Grails
SpringIO 2012 Madrid-Escalabilidad con GrailsSpringIO 2012 Madrid-Escalabilidad con Grails
SpringIO 2012 Madrid-Escalabilidad con Grails
 
Gwt IV -mvp
Gwt IV -mvpGwt IV -mvp
Gwt IV -mvp
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Conociendo Griffon a Fondo
Conociendo Griffon a FondoConociendo Griffon a Fondo
Conociendo Griffon a Fondo
 
Netbeans Osum
Netbeans OsumNetbeans Osum
Netbeans Osum
 
Desarrollo de aplicaciones web con Google Web Toolkit
Desarrollo de aplicaciones web con Google Web ToolkitDesarrollo de aplicaciones web con Google Web Toolkit
Desarrollo de aplicaciones web con Google Web Toolkit
 
Introducción a GraalVM Native para aplicaciones JVM
Introducción a GraalVM Native para aplicaciones JVMIntroducción a GraalVM Native para aplicaciones JVM
Introducción a GraalVM Native para aplicaciones JVM
 
Desarrollo en 4G(Groovy, Grails, Git, GoogleAppEngine)
Desarrollo en 4G(Groovy, Grails, Git, GoogleAppEngine)Desarrollo en 4G(Groovy, Grails, Git, GoogleAppEngine)
Desarrollo en 4G(Groovy, Grails, Git, GoogleAppEngine)
 
Desarrollo multiplataforma de apps con GWT y PhoneGap
Desarrollo multiplataforma de apps con GWT y PhoneGapDesarrollo multiplataforma de apps con GWT y PhoneGap
Desarrollo multiplataforma de apps con GWT y PhoneGap
 
Charla 1er betabeers Córdoba
Charla 1er betabeers CórdobaCharla 1er betabeers Córdoba
Charla 1er betabeers Córdoba
 
Presentacion cw2012
Presentacion cw2012Presentacion cw2012
Presentacion cw2012
 
Desarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías webDesarrollos de aplicaciones móviles con tecnologías web
Desarrollos de aplicaciones móviles con tecnologías web
 

Más de ADWE Team

Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
ADWE Team
 
Ponencia seo para el èxito con google 2011 copia
Ponencia seo para el èxito con google 2011   copiaPonencia seo para el èxito con google 2011   copia
Ponencia seo para el èxito con google 2011 copia
ADWE Team
 
Presentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwePresentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwe
ADWE Team
 
Rompiendo moldes
Rompiendo moldesRompiendo moldes
Rompiendo moldes
ADWE Team
 
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
ADWE Team
 
El momento del diseño, con Carlos Úbeda, de DNXGroup
 El momento del diseño, con Carlos Úbeda, de DNXGroup El momento del diseño, con Carlos Úbeda, de DNXGroup
El momento del diseño, con Carlos Úbeda, de DNXGroup
ADWE Team
 
Presentacion seo analisis
Presentacion seo analisisPresentacion seo analisis
Presentacion seo analisis
ADWE Team
 
Presentación de ACTO Framework parte I
Presentación de ACTO Framework parte IPresentación de ACTO Framework parte I
Presentación de ACTO Framework parte I
ADWE Team
 
Presentación de ACTO Framework parte II
Presentación de ACTO Framework parte IIPresentación de ACTO Framework parte II
Presentación de ACTO Framework parte II
ADWE Team
 

Más de ADWE Team (20)

Frameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móvilesFrameworks para el desarrollo de juegos para dispositivo móviles
Frameworks para el desarrollo de juegos para dispositivo móviles
 
HTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive WebHTML5 + CSS3 + Wordpress = Responsive Web
HTML5 + CSS3 + Wordpress = Responsive Web
 
HTML5 dia de internet 2012
HTML5 dia de internet 2012HTML5 dia de internet 2012
HTML5 dia de internet 2012
 
Significado y usos de RSS
Significado y usos de RSSSignificado y usos de RSS
Significado y usos de RSS
 
Responsive web y Wordpress
Responsive web y WordpressResponsive web y Wordpress
Responsive web y Wordpress
 
Git git hub
Git git hubGit git hub
Git git hub
 
Introduccion html5
Introduccion html5Introduccion html5
Introduccion html5
 
Ponencia seo para el èxito con google 2011 copia
Ponencia seo para el èxito con google 2011   copiaPonencia seo para el èxito con google 2011   copia
Ponencia seo para el èxito con google 2011 copia
 
Diseñar para dispositivos móviles
Diseñar para dispositivos móvilesDiseñar para dispositivos móviles
Diseñar para dispositivos móviles
 
Potenciando tu web con APIs de Miquel Camps para ADWE Madrid
Potenciando tu web con APIs de Miquel Camps para ADWE MadridPotenciando tu web con APIs de Miquel Camps para ADWE Madrid
Potenciando tu web con APIs de Miquel Camps para ADWE Madrid
 
Presentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwePresentacion de Fran Moreno para adwe
Presentacion de Fran Moreno para adwe
 
Rompiendo moldes
Rompiendo moldesRompiendo moldes
Rompiendo moldes
 
5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa5 tips de diseñadores a maquetadores... y viceversa
5 tips de diseñadores a maquetadores... y viceversa
 
Presentación Framework CodeIgniter
Presentación Framework CodeIgniter Presentación Framework CodeIgniter
Presentación Framework CodeIgniter
 
Presentación Extreme Programming
Presentación Extreme ProgrammingPresentación Extreme Programming
Presentación Extreme Programming
 
El momento del diseño, con Carlos Úbeda, de DNXGroup
 El momento del diseño, con Carlos Úbeda, de DNXGroup El momento del diseño, con Carlos Úbeda, de DNXGroup
El momento del diseño, con Carlos Úbeda, de DNXGroup
 
Presentacion seo analisis
Presentacion seo analisisPresentacion seo analisis
Presentacion seo analisis
 
Presentación de ACTO Framework parte I
Presentación de ACTO Framework parte IPresentación de ACTO Framework parte I
Presentación de ACTO Framework parte I
 
Presentación de ACTO Framework parte II
Presentación de ACTO Framework parte IIPresentación de ACTO Framework parte II
Presentación de ACTO Framework parte II
 
SEO ADWE Murcia
SEO ADWE MurciaSEO ADWE Murcia
SEO ADWE Murcia
 

Último

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Último (10)

Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
Guia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos BasicosGuia Basica para bachillerato de Circuitos Basicos
Guia Basica para bachillerato de Circuitos Basicos
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 

Gwt intro adwe_murcia

  • 1. Introducción a GWT “Google Web Toolkit” ADWE Murcia, 6 de Julio 2011 Miguel García, @mglpia miguel.garcia.lopez@gmail.com lunes 25 de julio de 11
  • 2. Previo • AJAX: Asynchronous JS and XML XmlHttpRequest • “Sitio Web” vs. “Aplicación Web” • SPI: Single Page Interface • “Centrado en el Servidor” vs “el Cliente” • Serialización en JSON, XML • JavaScript muy optimizado hoy en día lunes 25 de julio de 11
  • 3. Qué es GWT • Nota: GWT != GAE (Google App Engine) • Toolkit desarrollo clientes Web - RIA • Centrado en el navegador: CPU, RAM, pide por esa boca • Desarrollo en Java Lenguaje muy extendido • Abstrae de diferencias navegadores • Detalles a continuación... lunes 25 de julio de 11
  • 4. Plugin para Eclipse • Creación de proyectos GWT • Integración debugger, “Run as...” • Editores para ficheros usados por GWT • Integración tests unitarios • Otros: Maven plugin, NetBeans, IntelliJ lunes 25 de julio de 11
  • 5. Compilador GWT • “Compila” código Java > JavaScript + HTML • Una versión distinta por navegador/engine • No uso de binarios (.jar): código fuente • Clases del JRE/JDK “blacklisted” ¡(Re-)Escritas en JS! • Posibilidad de llamar métodos “nativos” JS • OBFUSCATED, PRETTY, DETAILED lunes 25 de julio de 11
  • 6. Interfaz Usuario • Extensa librería de widgets Composite • Diseño/layout vía: • “A pelo”, programáticamente panel.setLayout(...) • UIBinder XML-based, componentes/handlers inyectados @UiField, ... • GWT Designer Diseño gráfico drag-and-drop • HTML + GWT (= HTML + JS) • “Wrappers” librerías componentes JS ExtJS,YUI... • Soporte para internacionalización lunes 25 de julio de 11 • “CSS-skinning”
  • 7. Comunicación con Servidor Antes que nada... IMHO no es lo mejor para data-centric apps (Vía http://www.zkoss.org/) lunes 25 de julio de 11
  • 8. Comunicación con Servidor • Con un servidor Java: GWT-RPC • Librería peticiones HTTP • Librerías manejo JSON y XML • API/Naturaleza asíncrona onSuccess() onError() • Múltiples opciones 3ªs partes resty-gwt, ... lunes 25 de julio de 11
  • 9. Ejecución y Depuración • Depuración: “en Java” + Plugin navegador Hosted Mode • Herramientas examen Web Firebug + PRETTY/DETAILED • GWT Logging Framework • Código servidor: lo que queramos Mundo Java, o PHP, o ... lunes 25 de julio de 11
  • 10. Otros • APIs de Google GWT-izadas Maps, Charts, ... • Soporte al historial navegador • No Eclipse-exclusivo Otros IDEs, command-line, Maven • Documentación de alta calidad, detalles, tutoriales • Patrones de arquitectura: MVC, MVP, ... • Reutilización código JavaScript • Speed Tracer Google Chrome Plugin lunes 25 de julio de 11
  • 11. “Caso de Éxito” • Aplicación gestión equipos de vídeo móviles • Servidor Java EE (Glassfish 3.1 OSE, EJB’s + REST) • BDD PostgreSQL 9.0 • Aplicación de escritorio Swing(NetBeans Platform) • Cliente(s) web: ubicuidad, ligero, móvil/tablets • resty-gwt , gwt-google-apis cliente REST Google Maps • atmosphere[-gwt] para “comet” (“server push”) lunes 25 de julio de 11
  • 12. Demo • Primera toma de contacto desarrollo GWT... lunes 25 de julio de 11
  • 13. Enlaces de Interés • http://code.google.com/p/murgtug-mediaplayer/ • http://code.google.com/webtoolkit • http://code.google.com/p/gwt-rest/ • http://java.net/projects/gwt4nb/pages/Home • http://mojo.codehaus.org/gwt-maven-plugin/ • http://code.google.com/p/gwtchismes/ • http://code.google.com/p/gwt-google-apis/ • http://www.youtube.com/watch?v=PDuhR18-EdM • http://www.youtube.com/watch?v=aW--Wlf9EFs lunes 25 de julio de 11