Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DESARROLLOMULTIPLATAFORMA DE APPS CON GWT Y PHONEGAP       Betabeers Córdoba           27/9/2012                          ...
MI TIMELINE1996   2001   2002   2005   2006   2007   2010   2012
EL MOMENTO QUE LO CAMBIÓ TODOJulio 07           Noviembre 07
LA TECNOLOGÍA MÁS PENETRANTE DE LA HISTORIA
TODAVÍA NO SE CONOCEN LAS IMPLICACIONES                                               We#do#not#currently#directly#generat...
SÓLO MÓVIL       “Lo que menos me importa       es la página web, lo más       importante para mí es el       entorno móvil”
PERO EL DESARROLLO PARA MÓVILES ES COMPLICADO
APPS NATIVAS VS. MOBILE WEB VS. HÍBRIDAS
FRAMEWORKS HÍBRIDOS                      Mono Touch
PHONEGAP                    Phonegap (Core APIsHTML5 + CSS3 + JS                         Target platforms                 ...
CÓMO ES EN IOS?
CÓMO ES EN ANDROID?
PHONEGAP CORE API
EJEMPLO
PHONEGAP PLUGINS            4657
EJEMPLO
DEBUGGING?iOS: iWebInspector
DEBUGGING?Android, iOS: Weinredebug.phonegap.com
QUÉ UTILIZAR PARA LA UI?• HTML5     + CSS3 + JS• AJAX    100%• No   olvidarse del servidor• Ni   de la “performance” y lim...
ALGUNAS ALTERNATIVAS
EL PROBLEMA CON JAVASCRIPT...
WTFJS.COM
GWT• Introducido   por Google en 2006• Compila   Java a Javascript• Soporta   todos los principales navegadores* • También...
GWT EN MODO DE DESARROLLO
EJEMPLO
WIDGETS
Y SI HAY DISEÑADORES? UIBINDER
“DEFERRED BINDING”
GWT.XML
INTERNACIONALIZACIÓN (I18N)•   Construido sobre “Deferred    binding”    •   Se genera una permutación        adicional po...
CSS COMPILADOConstantes:Condiciones (perfecto para emular L&F según la plataforma): Recursos:  Sprites:
SERVIDOR: GWT-RPC
PROBLEMAS CON GWT-RPC• GWT-RPC “marca” los objetos serializables con un hash MD5• Siel servidor detecta una discrepancia a...
JSNI (JAVASCRIPT NATIVE INTERFACE)
M-GWT
GWT-PHONEGAP
LO QUE IMPORTA: LA COMPILACIÓN• Al  final, tenemos que compilar la versión de producción y GWT es perfecto:  • Elimina    c...
COSAS QUE ME HE DEJADO•   Google plugin for Eclipse    •   GWT Designer•   Integración GWT - Google app engine•   Speed tr...
PROBLEMAS CON GWT•   Curva de aprendizaje compleja•   No soporta todo el JRE•   Algunas características pueden ser contrap...
GWT + PHONEGAP                                          Java                    Phonegap (Core APIsHTML5 + CSS3 + JS      ...
DUDAS / PREGUNTAS?
GRACIAS!       luis@serendipio.comhttp://es.linkedin.com/in/lumunoz             @munozluis
Upcoming SlideShare
Loading in …5
×

Desarrollo multiplataforma de apps con GWT y PhoneGap

1,715 views

Published on

Transparencias de la charla de Luis Muñoz @munozluis en el primer Betabeers Córdoba, sobre desarrollo multiplataforma de apps móviles, usando Google Web Toolkit (GWT) y Phonegap (Apache Cordova)

  • Be the first to comment

  • Be the first to like this

Desarrollo multiplataforma de apps con GWT y PhoneGap

  1. 1. DESARROLLOMULTIPLATAFORMA DE APPS CON GWT Y PHONEGAP Betabeers Córdoba 27/9/2012 GWT
  2. 2. MI TIMELINE1996 2001 2002 2005 2006 2007 2010 2012
  3. 3. EL MOMENTO QUE LO CAMBIÓ TODOJulio 07 Noviembre 07
  4. 4. LA TECNOLOGÍA MÁS PENETRANTE DE LA HISTORIA
  5. 5. TODAVÍA NO SE CONOCEN LAS IMPLICACIONES We#do#not#currently#directly#generate#any# meaningful# revenue# from# the# use# of# F a c e b o o k# m o b i l e# p r o d u c t s ," [ … ] ." Accordingly," if" users# continue# to# increasingly# access# Facebook# mobile# products# as# a# substitute# for# access# through# personal# computers," […]" our" revenue" and" financial" results" may" be" negatively"affected.< The" decrease" in" the" average" cost? per?click" paid" by" our" advertisers" was" driven" by" various" factors.. [ i n c l u d i n g ]" t h e# c h a n g e s# i n# platform#mix#due#to#traffic#growth# in# mobile# devices," where" the" average" cost?per?click" is" typically" l o we r" c o m p a r e d" t o" d e s k t o p" computers"and"tablets.<
  6. 6. SÓLO MÓVIL “Lo que menos me importa es la página web, lo más importante para mí es el entorno móvil”
  7. 7. PERO EL DESARROLLO PARA MÓVILES ES COMPLICADO
  8. 8. APPS NATIVAS VS. MOBILE WEB VS. HÍBRIDAS
  9. 9. FRAMEWORKS HÍBRIDOS Mono Touch
  10. 10. PHONEGAP Phonegap (Core APIsHTML5 + CSS3 + JS Target platforms + Plugins)
  11. 11. CÓMO ES EN IOS?
  12. 12. CÓMO ES EN ANDROID?
  13. 13. PHONEGAP CORE API
  14. 14. EJEMPLO
  15. 15. PHONEGAP PLUGINS 4657
  16. 16. EJEMPLO
  17. 17. DEBUGGING?iOS: iWebInspector
  18. 18. DEBUGGING?Android, iOS: Weinredebug.phonegap.com
  19. 19. QUÉ UTILIZAR PARA LA UI?• HTML5 + CSS3 + JS• AJAX 100%• No olvidarse del servidor• Ni de la “performance” y limitaciones en el móvil• Simular el Look & Feel de la plataforma• Open Source con amplia comunidad• Otrascaracterísticas: facilitar la depuración, el testeo, incrementar la productividad, etc.
  20. 20. ALGUNAS ALTERNATIVAS
  21. 21. EL PROBLEMA CON JAVASCRIPT...
  22. 22. WTFJS.COM
  23. 23. GWT• Introducido por Google en 2006• Compila Java a Javascript• Soporta todos los principales navegadores* • También los móviles (Webkit)• Usado en producción por Google en numerosos proyectos • Google Adwords, Android Play, Google Groups...• Rencientemente Google ha liberado la dirección del proyecto*
  24. 24. GWT EN MODO DE DESARROLLO
  25. 25. EJEMPLO
  26. 26. WIDGETS
  27. 27. Y SI HAY DISEÑADORES? UIBINDER
  28. 28. “DEFERRED BINDING”
  29. 29. GWT.XML
  30. 30. INTERNACIONALIZACIÓN (I18N)• Construido sobre “Deferred binding” • Se genera una permutación adicional por idioma • Muy potente: plurales, mensajes por defecto, RTL...• Incrementa el tamaño de la compilación
  31. 31. CSS COMPILADOConstantes:Condiciones (perfecto para emular L&F según la plataforma): Recursos: Sprites:
  32. 32. SERVIDOR: GWT-RPC
  33. 33. PROBLEMAS CON GWT-RPC• GWT-RPC “marca” los objetos serializables con un hash MD5• Siel servidor detecta una discrepancia al deserializar lanza una excepción • Consecuencia: No soporta clientes con versiones antiguas
  34. 34. JSNI (JAVASCRIPT NATIVE INTERFACE)
  35. 35. M-GWT
  36. 36. GWT-PHONEGAP
  37. 37. LO QUE IMPORTA: LA COMPILACIÓN• Al final, tenemos que compilar la versión de producción y GWT es perfecto: • Elimina código muerto y css no utilizado • Optimiza, ofusca y comprime el JS • Optimiza el css (image inlining) • Consolida los ficheros (JS/CSS/HTML) • Mecanismo de caché • Análisis del resultado de la compilación (SOYC)
  38. 38. COSAS QUE ME HE DEJADO• Google plugin for Eclipse • GWT Designer• Integración GWT - Google app engine• Speed tracer• Mayor integración Javascript - JSON: Javascript Overlay Types• Seguridad: Anti XSS• Request factory • Libreria de comunicaciones basada en JSON con versión Android• Librerías específicas JUnit• Code splitting• MVP Framework• GWT superavanzado • GWT super dev mode • Elemental - “to the metal” HTML5 bindings
  39. 39. PROBLEMAS CON GWT• Curva de aprendizaje compleja• No soporta todo el JRE• Algunas características pueden ser contraproducentes en desarrollo móvil • Deferred binding + I18N • GWT-RPC• Desde que salió, se duda del soporte que Google le presta • Roadmap oscuro • Peor desde que se anunció Dart • Quizás el problema es que Java ha dejado de ser “cool”• Mantenimiento del modo de desarrollo• Mantenimiento de las apis de Google, HTML5
  40. 40. GWT + PHONEGAP Java Phonegap (Core APIsHTML5 + CSS3 + JS Target platforms + Plugins)
  41. 41. DUDAS / PREGUNTAS?
  42. 42. GRACIAS! luis@serendipio.comhttp://es.linkedin.com/in/lumunoz @munozluis

×