Capítulo 1 - Una nueva forma de ofrecer experiencias de usuario en la Web

Hola de nuevo. Tengo esto un poco abandonado, pero estoy de vuelta :). Empieza una nueva serie en El Abismo. Dejamos por unos meses VueJS para adentrarnos en lo que se conoce como Progressive Web Apps.

Como siempre, mejor que no nos pongamos un número determinado de posts a esta serie y nos centremos en dedicar el tiempo necesario a cada concepto que encontremos en esta nueva filosofía de desarrollar aplicaciones Web.

Desde el principio de esta serie, podrás encontrar el posts en su manual de Gitbook correspondiente: 'Desarrolla Progressive Web Apps', por si te es más cómodo leer la serie de esta forma. Sin más preámbulo, empecemos.

¿Qué es?

Progressive Web App es un concepto creado por la gente de Google.

Para que una aplicación Web pueda ser considerada como Progressive Web App, tiene que cumplir tres requisitos indispensables. Tiene que ser:

• Rápida: todas las acciones que se lleven a cabo por el usuario se tienen que realizar en unos tiempos considerables y que la experiencia fluya para conseguir no aburrir al usuario con esperas.

• Confiable: Que las operaciones que nuestro usuario haga sean seguras y que tenga sensación de que lo son. Cada vez compramos y vendemos más por Internet, es necesario que tanto usuario como negocio sientan que las transacciones que llevamos acabo se hacen de una manera segura.

• Atractiva: Que el sistema ayude a que el usuario se encuentre cómodo y en todo momento sepa donde está, que el uso de una aplicación a otra no suponga una curva de aprendizaje tan grande que haga que podamos perderle por el camino. Parece que estos tres requisitos no son nada nuevo. Muchos de los requisitos que la gente de negocio pone a sus productos ya intentan cumplir con estas tres máximas.

Entonces ¿Qué diferencia una aplicación Web normal de una Progressive Web App?

La diferencia está en cómo llegamos a conseguir estos objetivos. Google ha creado un término muy 'marketiniano' que al final no es más que una lista de requisitos que tenemos que cumplir para crear mejores experiencias y conseguir que nuestros usuarios usen más nuestra aplicación.

La diferencia se encuentra también en que hasta ahora, cumplir con estos requisitos en dispositivos móviles por medio de tecnología Web, se hacia algo complicado. ¿Por qué? Por estas razones:

• Las aplicaciones Web móviles tienen fama de ser lentas. No es fama en realidad, es un hecho. Todos los 'benchmark' que comparan aplicaciones móviles web con aplicaciones nativas, acaban dejando en muy mala posición a los estándares, la API del DOM y el propio JavaScript interpretado hacen bastante daño a este rendimiento.

• Las aplicaciones Web cada vez son más fiables, pero es cierto que el que yo pueda acceder a ella desde cualquier lugar de Internet hace que pierda esa seguridad que si puedo encontrar en un Store de Android o Apple, por tanto, la manera en que usamos la red nos ha dado problemas de seguridad que Google intenta solventar con estas nuevas técnicas.

• Además, las aplicaciones Web móviles tienen mala fama de ser poco atractivas. La Web no nació para ser consumida desde dispositivos móviles y aunque ya existen muchas técnicas para que las interfaces se comporten mejor en dispositivos móviles, todavía existe mucha distancia en cuanto a usabilidad respecto a las nativas: Notificaciones, accesos directos, acciones gestuales, son cosas que la Web estaba por resolver y que Google está haciendo un empujón por mejorar.

Entonces... si nos encontramos con este panorama ¿Cómo Google nos ayuda?

Google nos ayuda a conseguir estos objetivos de muchas maneras diferentes:

• Por ejemplo, se han encargado de desarrollar librerías específicas para que implementar ciertas funcionalidades sea más sencillo. Google cuenta con frameworks CSS Responsive que dan un 'look & feel' parecido al que tienen las aplicaciones nativas de Android.

• Se han encargado de crear guías de estilo o documentación que nos permita llegar a conseguir todas las funcionalidades de su checklist. Uno de estos checklist lo podemos encontrar aquí.

• Están implementando en su navegador aquellas funcionalidades del estándar que hasta ahora estaban suponiendo un deterioro de rendimiento y calidad. Dos ejemplos muy claros son la posibilidad de usar Web Workers o Notificaciones desde un navegador Web como Chrome.

• Han mejorado sus herramientas de desarrollo para que nos den pistas y métricas sobre cómo estamos haciéndolo y cómo podremos mejorarlo. En un apartado posterior explicaremos un poco más de esto.

Así que, como vemos, Google está muy interesado en que estas funcionalidades estén implementadas en nuestros sistemas para que la experiencia de Android sea todavía mejor. El cómo lo hagamos, dependerá de nosotros, pero contamos con herramientas para lograrlo.

¿Cómo hago mi aplicación web progresiva?

Lo primero que tenemos que tener en cuenta es qué funcionalidades tenemos que incluir en nuestra aplicación para conseguirlo. Si nos guiamos por el checklist de Google, para que una aplicación sea considerada PWA, tiene que cumplir como mínimo con esto:

• Sitio accesible por HTTPS.
• Las pantallas son responsive en tablet y móvil.
• Todas las URLS que tienen nuestra aplicación pueden ser cargadas de manera offline.
• Se puede añadir al menú de inicio.
• La primera carga es rápida hasta con 3G.
• La aplicación funciona en todos los navegadores.
• La transición entre pantallas no es bloqueante y fluye.
• Cada pantalla tiene una URL.

No creo que haga falta explicar ahora cada uno de los requisitos porque parecen bastante explicativos, pero...

¿Cómo conseguiremos añadir nuestra Web al menú de inicio? ¿Cómo toda la aplicación podrá ser accesible de manera offline? ¿Cómo haremos para que nuestra aplicación sea rápida incluso con 3G?

Estas son las preguntas que espero resolver en esta serie. Este primer post nos muestra el qué y el por qué. El restos nos enseñarán el cómo.

¿Cuento con alguna herramienta en la que apoyarme?

Hay muchas herramientas en las que nos apoyaremos para saber si estamos consiguiendo que nuestra aplicación sea considerada como una PWA.

Lighthouse

La mejor herramienta que han creado para mejorar nuestra aplicación es sin duda Lighthouse. Esta herramienta nos permite analizar nuestra código y nos enumera aquellos puntos en los que nuestra aplicación no está cumpliendo con los conceptos de PWA.

Lo que hace es analizar uno a uno los puntos clave de la ckecklist y darnos una serie de consejos para que podamos mejorar.

Me gusta porque te muestra una serie de diagramas del estado en el que se encuentra. En muchos casos no querremos que nuestra aplicación cumpla con el 100% de los requisitos, pero si que cumpla con lo que nosotros entendemos como critico para nuestro negocio.

La herramienta puede ser usada como un plugin de Chrome o con comandos de la CLI de NPM. El primer método es muy útil para analizar aplicaciones que ya están en producción o de las que no tenemos acceso al código y la segunda puede venir muy bien para incluirla en procesos de integración continua o testing automático (si la app no llega a unas métricas mínimas, no se desplegará o se integrará, por ejemplo).

Chrome Developer Tools

Esta es la herramienta de toda la vida. Tan usable y útil como siempre, pero vitaminada. Además de contar con emuladores para poder ver si nuestra aplicación es rápida y atractiva en móviles, podremos comprobar y gestionar la metainformación de nuestra aplicación (Esto es el manifest, hablaremos en el siguiente post de ello).

PageSpeep Insights

PageSpeed es una aplicación que nos permite obtener métricas a nivel de rendimiento. Nuestras aplicaciones tienen que ser rápidas. Por tanto medir cómo son las transacciones, animaciones, ejecuciones largas de JavaScript son alguno de los puntos claves de esta herramienta.

Conclusión

Una cosa que me gusta de este nuevo concepto es que nada es bloqueante o crítico. El término Progressive viene heredado de lo que se conoce en desarrollo Web como 'Enhancement Progressive' o Mejora Progresiva. Es decir, nuestro sistema siempre tiene que cumplir con una serie de funcionalidades mínimas que sean usables y funcionales en cualquier tipo de dispositivo y navegador.

Si un dispositivo tiene ventajas técnicas y podemos aprovecharnos de ellas para crear mejores aplicaciones, hagámoslo. Eso sí, dando un soporte mínimo a navegadores y dispositivos antiguos para que cualquier tipo de usuario pueda usar nuestra aplicación y sin que la inclusión de una funcionalidad suponga el bloqueo de otra.

Es importante tomarse el término Progressive Web App como esto. Si un dispositivo va a permitir ciertas funcionalidades, intentemos desarrollarlas. Que su implementación nos va a suponer más costo del beneficio que nos va a generar... pues quizá no sea el momento de abarcarla y seguir nuestro trabajo por otra parte.

Hagamos el trabajo del checklist como algo opcional que nos pueda ayudar, pero no como algo bloqueante que nos deje sin un número de usuarios que pueden ser importantes para nosotros.

Nos leemos :)