Las transparencias de mi charla en el primer Betabeers Córdoba, sobre desarrollo multiplataforma de apps móviles, usando Google Web Toolkit (GWT) y Phonegap (Apache Cordova)

1. DESARROLLO
MULTIPLATAFORMA DE APPS
CON GWT Y PHONEGAP
Betabeers Córdoba
27/9/2012
GWT

2. MI TIMELINE
1996 2001 2002 2005 2006 2007 2010 2012

3. EL MOMENTO QUE LO CAMBIÓ TODO
Julio 07 Noviembre 07

4. LA TECNOLOGÍA MÁS PENETRANTE DE LA HISTORIA

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. 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. PERO EL DESARROLLO PARA MÓVILES ES COMPLICADO

8. APPS NATIVAS VS. MOBILE WEB VS. HÍBRIDAS

9. FRAMEWORKS HÍBRIDOS
Mono Touch

10. PHONEGAP
Phonegap (Core APIs
HTML5 + CSS3 + JS Target platforms
+ Plugins)

11. CÓMO ES EN IOS?

12. CÓMO ES EN ANDROID?

13. PHONEGAP CORE API

14. EJEMPLO

15. PHONEGAP PLUGINS
46
57

16. EJEMPLO

17. DEBUGGING?
iOS: iWebInspector

18. DEBUGGING?
Android, iOS: Weinre
debug.phonegap.com

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

21. EL PROBLEMA CON JAVASCRIPT...

22. WTFJS.COM

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. GWT EN MODO DE DESARROLLO

25. EJEMPLO

26. WIDGETS

27. Y SI HAY DISEÑADORES? UIBINDER

28. “DEFERRED BINDING”

29. GWT.XML

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. CSS COMPILADO
Constantes:
Condiciones (perfecto para emular L&F según la plataforma):
Recursos:
Sprites:

32. SERVIDOR: GWT-RPC

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. JSNI (JAVASCRIPT NATIVE INTERFACE)

35. M-GWT

36. GWT-PHONEGAP

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. 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. 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. GWT + PHONEGAP
Java
Phonegap (Core APIs
HTML5 + CSS3 + JS Target platforms
+ Plugins)

41. DUDAS / PREGUNTAS?

42. GRACIAS!
luis@serendipio.com
http://es.linkedin.com/in/lumunoz
@munozluis