BLOG

10 consejos para conseguir un Look&Feel nativo en tu app PhoneGap

Hay una especie de guerra continua que tenemos todos a la hora de intentar conseguir que la aplicación que estamos desarrollando, mediante tecnología híbrida, tenga un aspecto nativo. Pero esto no queda en este punto… dado que podemos conseguir que se parezcan mucho diseñando elementos con imágenes y css, pero, ¿y a la hora de conseguir una aplicación rápida y que realmente ofrezca una experiencia de usuario igual que la nativa?

Quizás este es el punto donde más “pecan” las aplicaciones híbridas, y en el que debemos poner más cariño a la hora de desarrollar nuestra aplicación.

Quiero comentaros 10 puntos críticos que me encuentro a lo largo del desarrollo de aplicaciones con PhoneGap, y que intento solucionar con varios trucos que quiero compartir con todos vosotros:

1.- Los frameworks no siempre son necesarios.

Actualmente hay un boom increíble de frameworks que salen al mercado y que intenta hacerse con un nombre en éste. La mayoría de los que tienen más renombre intentan abarcar muchas funcionalidades para poder llegar al mayor número de usuarios posible.

Un claro ejemplo es JQMobile o Ionic. En el caso del primero, se puede decir que es uno de los pioneros en este sector, es uno de los más criticados (me incluyo), por su falta de fluidez, sobre todo en dispositivos Android. Como sabéis, JQMobile tiene muchas herramientas incorporadas que nos pueden hacer la vida más fácil, pero que también pueden hacer que nuestra app sea lenta y pesada. En el caso de Ionic, ocurre lo mismo. Este framework cada vez tiene más herramientas con las que puedes personalizar tu app, pero sinceramente… ¿Todas las vas a utilizar en tu app?

Soy partidario de ir creando un propio framework, que tenga la posibilidad de ser fragmentado en funciones. Con ésto conseguiremos una herramienta que no tiene que estar incorporada al completo en nuestra app, sino que vamos añadiendo módulos independientes según nos haga falta. Por ejemplo un módulo de estilos que te permita tener elementos genéricos inputs tipo text, select, range, etc… Otro módulo que te permita renderizar las vistas, e incluso guardarlas en caché para luego no tener que volver a leerlas (de este punto hablaremos luego)…

En definitiva lo primero que os aconsejo es que os sentéis 1h antes de elegir un framework y pensar si realmente os hace falta.

2.- Hacer tests en dispositivos físicos.

En muchos de los hilos que hay en el foro de la comunidad, se habla sobre problemas que nos encontramos en la fase final del desarrollo. Estos problemas surgen a la hora de empezar a realizar tests en dispositivos reales.

Esto es un error muy común, y uno de los peores que podéis cometer. Os aconsejo tener siempre a mano, al menos un dispositivo con el sistema operativo para el que estáis desarrollando. Ahhh y cuidado con tener el dispositivo mejor del mercado para hacer el test…, otro error! debes hacer el test en el peor que pienses que puede tener el usuario al que va dirigida tu app.

3.- Uso de las transiciones 3D.

Está claro que una acción conlleva una reacción, ¿no? Bien, en este consejo os quiero hacer llegar la idea de que las animaciones en una app no están prohibidas. Y mucho menos tienen que ser pesadas para ésta, o hacer que tu app sea la más lenta del mercado, todo lo contrario!

Cuando un usuario pulsa un botón, espera que la app le responda de alguna forma, que tenga un reacción frente a esa acción. Si por ejemplo, la reacción debe ser que una ventana aparezca desde la zona inferior del móvil, debemos tener en cuenta utilizar transiciones CSS.

1.  -webkit-transform: translate3d(0px,0px,0px);

Estas transiciones trabajan con la aceleración por hardware, lo que conlleva que consigamos una mayor fluidez en nuestras animaciones.

4.- Mostrar y ocultar elementos cuando sea posible.

Seguro que a más de uno/a se le ha venido a la mente las propiedades de CSS 1.  display:none o 1.  visibility:hidden.

La práctica de ocultar, mostrar, crear y destruir objetos en el DOM es muy costosa y conlleva una disminución del rendimiento de nuestra app. Me gustaría que revisarais este punto con el inspector de Chrome, el cual nos permite contemplar las maravillas que ocurre por detrás de nuestra app, y qué puntos y acciones consumen más o menos.

A la hora de ocultar o mostrar elementos, yo opto, en la mayoría de los casos, por mostrarlos o sacarlos de cámara (pantalla). Lo aconsejable es que, si un elemento es posible que se utilice varias veces en tu app, no lo estés creando y destruyendo, sino que lo pongas en pantalla o lo desplaces fuera de ésta.

Para aplicar este consejo podéis utilizar la propiedad transform de la que hemos hablado antes, colocando el elemento a -100% en su eje “x” o su eje “y”.

5.- Nunca dejar una vista al desnudo.

Tal y como os he comentado anteriormente, el usuario al hacer una acción espera una reacción. Si el usuario, dentro de la app, pulsa en una sección diferente a la que se encuentre, la app debe crear la nueva vista que debe mostrar. En muchos de los casos, las vistas que creamos contienen datos que realmente no están alojados dentro del storage de la aplicación móvil. Esto conlleva realizar consultas externas a servidores, los cuales alojan los datos de nuestra app, y mostrar éstos en la vista previamente creada.

En este consejo quiero destacar dos malas prácticas que ocurren mucho:

La primera es crear la vista y esperar a recibir los datos desde el servidor, llenada de este contenido y luego hacerla aparecer. Esto puede conllevar desde milisegundos a segundos, por lo que aparece el efecto congelación. Este efecto desconcierta al usuario de la app y le hace parecer que la app es lenta y poco solida.

La segunda es crear la vista y mostrarla, pero mostrarla vacía mientras llegan los datos del servidor y son mostrados. En este caso ocurre lo mismo, el usuario puede pensar que la app se ha quedado congelada o que simplemente esa sección no tiene datos de interés para él.

Realmente no sé cuál de las dos es peor… pero lo que está claro es que las dos son malas prácticas.

Una solución muy común y fácil de implementar en estos casos es la de añadir un elemento en pantalla que transmita al usuario final la sensación de que la app está trabajando para mostrarle el contenido.
La solución que yo aplico es la de mostrar la vista en pantalla, añadirle un icono representativo que dé efecto loading; pido al servidor los datos necesarios, y luego pinto estos datos. De esta forma el usuario sabe que la app está consultando datos, y esperará un tiempo prudencial antes de desesperarse ;)

6.- Velocidad en el scroll.

El scroll… este elemento que tantos problemas nos ha dado en versiones anteriores de Android :(

Por hacer algo de memoria, si recordáis no hace mucho teníamos en las manos versiones de Android tales como la 2.3 o 2.6, que incluso aún siguen en el mercado y nos podemos encontrar algunos. El webview de estos dispositivos no permitía trabajar con la propiedad overflow de CSS. Para los que no la conozcáis, esta propiedad permite crear capas con scroll nativo propio y, de esta forma, poder tener contenido “infinito” dentro de una capa sin necesidad de mover todo el body de nuestro documento.

A raíz de este problema, aparece una idea: la de crear dos capas, una que hace la función de máscara (con ancho y algo adaptable), y la interna, que hace la función de contenedora de todo el contenido. Lo que queremos conseguir es desplazar la capa interna dentro de la máscara haciendo efecto de scroll. Todo esto se consigue modificando su posición según el desplazamiento del dedo sobre la pantalla, cambiando la posición “x” o “y” mediante la propiedad de CSS transform.

En este caso solemos utilizar un framework llamado iScroll (ahora ya en su versión 5). Este framework trae otras herramientas muy interesantes a parte de ésta, como el zoom, galería de imáges, etc… Pero actualmente debemos plantearnos la idea de si realmente nos hacen falta a la hora de construir el scroll de nuestra vista.

Creo que debemos seguir la línea que ha elegido Ionic, que utilizaba esta forma de crear scrolls, pero que en su última versión ha cambiado para utilizar el scroll nativo mediante la propiedad overflow, y la verdad es que el incremento del rendimiento es notable.

Para conseguir un efecto scroll nativo, podéis añadirle esta línea de CSS a vuestra capa:

1.  -webkit-overflow-scrolling: touch;

7.- Utiliza elementos SVG y Fuentes.

El uso de iconos dentro de nuestra aplicación para representar una sección o una acción es de lo más normal.

En este consejo me gustaría comentaros la idea de dejar de utilizar, en la medida de lo posible, imágenes transparente en formato PNG o GIF, para comenzar YA a utilizar fuentes o svg que contengan los elementos necesarios (iconos).

Actualmente el svg no es reconocido por todos los navegadores del mercado, por lo que un camino a tomar es incorporar fuentes a nuestro proyecto que contengan iconos en vez de letras y de esta manera poder usarlos. Un ventaja muy interesante e importante es que los podemos utilizar igual que las tipografías de fuentes, o sea, que por mucho que los escalemos, no pierden calidad e incluso podemos darle el color que necesitemos mediante la propiedad “color” de CSS.

Unas de las webs que más utilizo para crear paquetes de fuentes es la siguiente:
http://www.flaticon.com/

También podéis utilizar los de ionic que son gratuitos:
http://ionicons.com/

8.- Elimina el delay al hacer touch.

A la hora de hacer touch en elementos del DOM que contengan una acción “onclick”, podemos detectar que la acción asignada tarda unos milisegundos en realizarse. Esta demora es de aproximadamente unos 300ms, tiempo que no es muy fácil de detectar y más si consideramos que las personas nos acostumbramos a los tiempos de demora de nuestros dispositivos móviles. Para eliminar este efecto vamos a utilizar un plugin llamado Fast Click.

En este tutorial donde podéis ver como añadimos la librería: http://www.phonegapspain.com/tutorial/fast-click-como-acelerar-la-navegacion/

9.- Deshabilita el efecto highlighting.

Este es el efecto que ocurre de iluminación o resalte a la hora de hace touch en botones o enlaces dentro de nuestra app. Este efecto es muy molesto y para nada (como norma general) queda bien en nuestro diseño.

Añadiendo esta línea de CSS conseguiremos eliminar este efecto:

1.  -webkit-tap-highlight-color: rgba(0,0,0,0);

10.- Comprime tus archivos JS y CSS.

He querido dejar este consejo para lo último con la idea de que abráis el último proyecto en el que estéis trabajando y comprimáis los CSS y JS antes de enviarle una versión release al cliente :)

Parece que no vamos a conseguir mucho con la compresión de estos archivos, pero no es así. Os vuelvo a recordar la herramienta inspector de Chrome, y os invito a que reviséis el tiempo de carga que conlleva un archivo CSS de 1000 líneas, sin comprimir y luego haced la prueba una vez comprimido. Lo mismo luego con el archivo JS de otras 1000 líneas de código.

Esto no es imprescindible para el buen funcionamiento de nuestra app, pero si es un punto muy recomendable y que, como norma general, no aplicamos.

Si utilizáis Brackets.io como editor de código, podéis buscar en su repositorio de plugins algunos que hay para comprimir CSS y JS.

Espero que os haya gustado el artículo, y que pongáis en práctica algunos de estos consejos :)

Si tenéis más consejos, podéis enviarlos a: contacto@phonegapspain.com, ¡para que podamos hacer otro artículo con más!

¡Saludos!

@JoseJ_PR

9 Respuestas.

  1. Webserveis Webserveis dice:

    Muy interesante el articulo, no uso mucho la herramienta de inspeccionar para ver los tiempos de carga, a partir de ahora intentare comprimir los css y js.

    Lo que también uso en mis apps es en la pantalla de splascreen manual, cargar todos los recursos gráficos así se quedan en la cache de phonegap.

    y si la aplicación es muy grande eh notado más fluidez en separar la vista en archivos html, es más lenta en cargar de vista a vista pero si tienes muchas vistas etc… con dispositivos de poca memoria ram, es lo más optimo.

  2. javierflti dice:

    Muchas gracias, un artículo interesante como siempre.

  3. cosmosvega cosmosvega dice:

    Muy buen artículo,

    Enhorabuena!

  4. hugocano dice:

    Excelentes Tips muchas gracias por la publicación.

  5. [...] 2º “10 consejos para conseguir un Look&Feel nativo en tu app PhoneGap”. [...]

  6. Hola Pepe!, Muchas gracias por tus consejos, Soy nuevo haciendo app hibridas y esta comunidad ha sido de gran ayuda.

  7. Gracias a todos por los comentarios :) Me alegra que ayude!

Deja tu comentario

Debes estarlogueado para comentar.

RT @addyosmani: So cool that @FirefoxDevTools shows inactive CSS and how to fix it. https://t.co/58GXmCPYCk06:17 AM Jan 22nd