Recomendaciones para el desarrollo de aplicaciones móviles híbridas

Existe la concepción de que las aplicaciones híbridas elaboradas con HTML son notablemente más lentas que las aplicaciones nativas. Es cierto que debido a las capas extra de abstracción, y al soporte limitado a HTML 5, existe cierto costo de desempeño en las aplicaciones híbridas. Sin embargo, muchas veces este costo se hace notable debido a debilidades en el diseño de la aplicación, aspectos sin afinar o depurar en su estructura, y carencia de optimizaciones que en conjunto podrían mejorar notablemente la experiencia del usuario, y hacer que la brecha con una aplicación nativa se vuelva casi invisible.

A continuación listo algunas recomendaciones que ayudarán a optimizar el desempeño de una app híbrida:

• Uso de imágenes PNG y JPG. Cuando se usan imágenes e la web, surge la pregunta: ¿qué formato de imagen debo usar? En términos generales, es recomendable utilizar imágenes PNG para logos e íconos, cuando estos sean de múltiples colores y compuestos principalmente de figuras geométricas y texto, ya que este tipo de imagen permite mostrar estos detalles con una excelente calidad, y además permite el uso de transparencias. Por otra parte, se recomienda el uso de imágenes JPG para fotografias, dibujos u otro tipo de imágenes que muestren una amplia gama de tonos y colores, ya que esta clase de gráficos no requieren bordes lisos ni definidos, y además este formato permite mostrar las tonalidades con un tamaño de archivo pequeño. Pueden utilizarse otros formatos, pero estos dos son los que presentan la mejor combinación de calidad y tamaño de archivo, y además son soportados por HTML desde versiones previas.
• Optimización de imágenes. Antes de utilizar imágenes, es necesario comprimirlas, y además reducirlas al tamaño (ancho X alto) mínimo posible, pero sin sacrificar demasiado la calidad. Si la aplicación está destinada a dispoitivos de múltiples tamaños, puede ser conveniente tener las imágenes en múltiples tamaños, y mostrarlas dependiendo de la pantalla del dispositivo. Está de más decir que usualmente los dispositivos más grandes (tablets) poseen mejor hardware que los de tamaño menor (smartphones), y pueden mostrar imágenes de mayor tamaño con un menor costo en el desempeño. Adicional a esto, cuando son íconos pequeños, se recomienda el uso de sprites, que básicamente son archivos de imágenes que contienen múltiples imágenes dentro de sí, y que son "recortadas" y mostradas mediante CSS.
• Usar fuentes en lugar de imágenes para los íconos, si el diseño de estos se basa principalmente en figuras geométricas, y son de un solo color. Ello debido a que las fuentes son básicamente imágenes vectoriales, y los visores web pueden dibujarlos sin mayor inconveniente. Además, al ser vectoriales, pueden ajustarse a cualquier tamaño, y verse siempre de la misma forma, a diferencia de las imágenes que se pueden ver demasiado afiladas o borrosas si se reducen o aumentan de tamaño. En este sentido incluso son preferibles a los sprites. Existen varias fuentes que porporcionan una generosa cantidad de íconos cuyas figuras se basan en acciones comunes, como Font Awesome y Ionicons. Pero si estas colecciones no contienen todos los íconos que usted desea, o usted posee íconos propios para añadir a su aplicación, existen técnicas para convertirlos a imágenes vectoriales, y posteriormente a fuentes que pueden ser añadidas a la aplicación híbrida o incluso su propio sitio web. Adicionalmente, son ua alternativa al uso de imágenes vectoriales SVG, las cuales noe son soportadas en las plataformas más antiguas.
• Efectos CSS. Para animaciones, efectos y ajustes en el despliegue de elementos en la aplicación, se recomienda el uso de transiciones, transformaciones y otras propiedades CSS, ya que son más rápidas y fáciles de implementar que mediante Javascript, y usualmente presentan un mejor desempeño. Sin embargo el soporte de las distintas transiciones está supeditado a la versión del sistema operativo del dispositivo móvil, por lo que es necesario verificar esto.
• Reducir elementos DOM. Al maquetar una aplicación HTML, se recomienda utilizar la menor cantidad de elementos posible, y eliminar los nodos del DOM que ya no se usen. Cada elemento dentro del DOM ocupa memoria, y requiere recursos para su dibujado, incluso aunque no sea visible, por lo que al disminuir la cantidad de estos, ahorramos recursos.
• Seleccionar cuidadosamente el framework a utilizar. Existen distintos frameworks para el desarrollo de aplicaciones híbridas HTML, que proporcionan funcionalidades por defecto, lo cual permite agilizar el desarrollo, tales como JQuery Mobile, Sencha Touch, App Framework, PhoneJS, Onsen UI, Ionic Framework, etc. Sin embargo, es necesario tener en cuenta el costo que estos pueden causar en el desempeño, así como el soporte que poseen para los distintos sistemas operativos. Además es necesario sopesar la curva de aprendizaje, ya que un framework mal usado puede llevar a fugas de memoria, uso excesivo de recursos y reducción en general del desempeño de las aplicaciones.
• Verificar el soporte de tecnologías HTML, CSS y Javascript, para las plataformas objetivo. Esto es necesario para no minar la experiencia del usuario, al poseer funcionalidades que solamente son visibles en ciertas plataformas, pero que presentan fallas o incluso no existen en otras. Unas excelentes herramienta en línea para verificar esto es caniuse.com y W3 Schools, ya que poseen un listado bastante completo de elementos HTML, CSS y Javascript, así como los navegadores/plataformas que los soportan.

Al prestar un poco de atención en estos distintos puntos de optimización, se pueden crear aplicaciones híbridas con una experiencia para el usuario igual o incluso mejor al de aplicaciones nativas.

¿Qué otros aspectos cree usted que pueden tomarse en cuenta para mejorar el desempeño de las aplicaciones híbridas? Compártalos en la sección de comentarios.