miércoles, 31 de diciembre de 2014

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.

lunes, 22 de diciembre de 2014

Contenido de DevExpress Round Panel en Razor

Si ya han usado el Round Panel de Developer Express para MVC, habrán notado lo tedioso que es poner el contenido de este, ya que según el ejemplo que brindan en la documentación oficial, debe establecerse mediante una cadena de caracteres:

@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";

       settings.SetContent(@"<h4>Lorem Ipsum</h4>
<p><span class="inicio">Lorem ipsum</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>");
    }).GetHtml()

Esto deja de lado las facilidades que brinda Razor como motor de vista, que permite integrar el código HTML con C# de forma fácil y legible. Además, se vuelve más complicado a medida necesitamos añadir más componentes, o controles más complejos dentro de él. Sin embargo, existe una solución práctica para esta situación: el uso de helpers.

La sintaxis @helper permite crear métodos de ayuda re-usables dentro de las vistas, los cuales permiten encapsular código fuente y HTML utilizando la sintaxis de Razor.

Mediante la sintaxis @helper, podemos colocar el contenido del panel dentro de una función helper separada;
@helper ContenidoPanel() {
    <h4>Lorem Ipsum</h4>
    <p><span class="inicio">Lorem ipsum</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
}
Y luego renderizarlo dentro del panel, siempre en la misma vista, así:
@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";
       settings.SetContent(ContenidoPanel().ToHtmlString());
    }).GetHtml()
O así:
@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";
       settings.SetContent(() => ContenidoPanel().WriteTo(ViewContext.Writer));
    }).GetHtml()

Esto facilita la legibilidad del código, y además permite definir un contenido mucho más complejo, utilizando todas las facilidades que Razor puede brindar.

martes, 9 de diciembre de 2014

Aplicaciones híbridas para móviles

Hace poco más de un año empecé a desarrollar aplicaciones móviles, y por mi experiencia previa con sitios web, opté por el desarrollo de aplicaciones HTML híbridas en lugar de nativas, para hacer el desarrollo más rápido. Pero veamos...

¿Qué son las aplicaciones híbridas?

Las aplicaciones móviles comúnmente conocidas como híbridas son aplicaciones desarrolladas utilizando tecnologías web del lado del cliente (HTML, Javascript, CSS), pero que se instalan en los dispositivos móviles, y pueden acceder a las funcionalidades de hardware de este a través de APIs provistas por frameworks especiales (como Phonegap/Cordova, Sencha).
Estas aplicaciones usualmente se muestran en un componente visor de web provisto nativamente por el sistema operativo del móvil, los cuales proveen las funcionalidades de un navegador web relativamente moderno (soporte para HTML5 y CSS3).

¿Cuáles son sus ventajas?

La principal ventaja de las aplicaciones híbridas es que se basa en tecnologías web ampliamente conocidas, las cuales existen desde hace largo tiempo y han crecido y mejorado a lo largo de su desarrollo. Esto proporciona una sola interfaz de programación para multiples plataformas, a través del uso de frameworks especiales como Phonegap/Cordova, que porporcionan la infraestructura necesaria para crear de forma automática las respectivas aplicaciones nativas que encapsulan el contenido web, además de proveer APIs que estandarizan y simplifican el acceso a las funcionalidades del dispositivo.
El uso  de tecnologías web también ahorra la curva de aprendizaje de los desarrolladores que ya poseen conocimiento en el área, lo que puede facilitar y agilizar el desarrollo de aplicaciones móviles. También permite reducir el costo de contratar personal especializado en el área móvil para cada sistema operativo móvil del mercado (iOS, Android, Windows 8, Tizen, etc.), ya que cada plataforma hace uso de distintas herramientas y lenguajes de programación.
Adicionalmente, y como apreciación personal, el desarrollo de interfaces de usuario es más fácil, personalizable y escalable con el uso de HTML5 y CSS3, que son tecnologías especializadas para la presentación de la información. Y la disponibilidad de media queries en CSS facilitan el diseño responsivo, que permite adaptar la vista a la gran variedad de pantallas y resoluciones de dispositivos que existen en el mercado.

¿Existen desventajas?

Hasta acá todo parecía felicidad, ¿verdad? Lo cierto es que como en toda tecnología, existen desventajas que hay que tomar en cuenta. La principal desventaja que presentan las aplicaciones híbridas es la capa extra de virtualización que existe: la aplicación en realidad está corriendo sobre una aplicación nativa, en última instancia. Esto se traduce en una disminución en el desempeño de la aplicación, en contraparte de las aplicaciones nativas, lo cual se hace más notorio a medida disminuyen las características del hardware.
Sumado a esto está el hecho de que se depende del componente visor de web disponible en la versión del sistema operativo, lo cual puede disminuir aún más el desempeño, y disminuir el soporte de componentes HTML5 e instrucciones CSS. Además, hay que recordar que los desarrolladores del visor web no tenían como objetivo inicial perfeccionarlo para la ejecución de aplicaciones híbridas.
También, a pesar de que los frameworks especiales como Phonegap/Cordova, Sencha Touch y otros cuentan con una extensa API y plugins para el acceso al hardware (cámara, GPS, bluetooth, etc.) y funciones especiales del sistema operativo (acceso a archivos, identificación, almacenamiento, etc.), aún hay partes para los cuáles no existe un soporte completo (como servicios de fondo asíncronos entre otros).
Finalmente, hay que tomar en cuenta también el aspecto de la seguridad. En agosto de este año (2014) se emitió un comunicado por parte de Apache Cordova informando de vulnerabilidades en su framework, que obligaron al lanzamiento de una nueva versión menor de este para solucionar estas debilidades. Con esto no quiero decir que las aplicaciones híbridas sean inseguras, ni que las nativas sean seguras, ya que en realidad toda pieza de software puede presentar vulnerabilidades, mientras hayan humanos que las hagan y ataquen. Simplemente es que al existir una capa de abstracción más entre las aplicaciones, se abre la posibilidad a más puntos de ataque que hay que defender.

¿Ser o no ser?

Vamos a la pregunta del millón: ¿desarrollo una aplicación nativa o híbrida?. Creo que hay muchas respuestas posibles y válidas para esta pregunta, pero al menos personalmente, estos son los aspectos que tomo en cuenta para decidir si desarrollar una aplicación híbrida o no:
  • ¿Es una aplicación intensamente gráfica? Si lo es demasiado, es mejor utilizar la tecnología que presente un mejor desempeño, y en este caso, al menos hasta el momento, la mejor alternativa es una aplicación nativa. Pero si es una aplicación no tan gráfica, como por ejemplo una app informativa, o incluso hasta un juego ligero en 2D, entonces una aplicación híbrida puede ser una buena opción.
  • ¿El sistema operativo y hardware objetivo es viejo o reciente? A medida es más nuevo, se brinda un mayor soporte a las tecnologías web y aplicaciones híbridas. Si es más viejo, habría que evaluar si soporta o no las características que tengamos en mente para nuestra aplicación.
  • ¿Puedo acceder a todas las funcionalidades que necesito? Tomando como base que una aplicación nativa puede acceder al 100% de funcionalidad disponible, habría que investigar y evaluar si el framework que utilizaré para mi aplicación posee las funciones que requiero, o aunque no las posea, es posible desarrollarlas y añadirlas (y por supuesto cuento con el tiempo para hacerlo).
  • ¿Tengo poco tiempo y solo conozco tecnologías web/nativas? Creo que es el punto de menor relevancia de los mencionados, pero lo suficientemente importante para tener en consideración. ¿Por qué? Porque tanto el desarrollo de aplicaciones nativas como el uso de frameworks para aplicaciones híbridas posee su curva de aprendizaje. Además, el desarrollo de aplicaciones híbridas requiere siempre cierto conocimiento de las herramientas nativas subyacentes, principalmente para la preparación del entorno de desarrollo (SDKs, dispositivos de prueba, depuración, etc.). Y por qué no, esta prodría ser una buena oportunidad de aprender una tecnología y alternativa de desarrollo que no conocía, ya sea nativa (si viene del entorno web) o híbrida (si ya posee experiencia en el desarrollo nativo).
Con la tecnología de Blogger.