Ya no tenemos que darte más razones para convertir tu páginas web en Aplicaciones Web Progresivas (o Progressive Web Apps). JavaScript, CSS y HTML es todo lo que necesitas para conseguir tu PWA sin perder capacidad de rendimiento en comparación con las aplicaciones nativas.
Aunque hay muchos tutoriales de «Introducción a aplicaciones web progresivas» en la web, desde APM queremos ir algo más allá y ofrecerte algunas sugerencias de herramientas y librerías JavaScript que puedes utilizar para empezar a desarrollar PWAs a un ritmo más rápido y con una complejidad mínima.
Hay una serie de funciones básicas que diferencian una Aplicacione Web Progresiva de un sitio web tradicional. Las aplicaciones web progresivas deben ser capaces de hacer lo siguiente:
- Funcionan con la mayoría de navegadores y dispositivos (móviles y de escritorio) con una base de código progresiva.
- Se adaptan a todas las pantallas gracias a un diseño receptivo.
- Aprovechan los Service Workers para habilitar la conectividad offline (se requiere HTTPS).
- Proporcionan una experiencia similar a la de una aplicación que aprovecha las herramientas de re-engagement, así como las notificaciones push.
- Aprovechan el manifiesto de aplicación web para describir los recursos utilizados.
5 herramientas para crear aplicaciones web progresivas
Un buen punto de partida si eres nuevo en esto de las aplicaciones web progresivas es la guía de Google para crear tu primera aplicación web progresiva. El objetivo de este artículo, sin embargo, es asumir que ya has experimentado o creado una aplicación web progresiva y estás buscando herramientas que te permitan crear aplicaciones de forma más rápida.
React
El primer paso para construir una aplicación web progresiva es elegir un marco de trabajo. Aunque existen muchos frameworks, resaltamos React por dos razones:
- Está gestionado y respaldado por Facebook, que utiliza el marco de trabajo en su página, demostrando que el framework se somete a pruebas rigurosas teniendo 1.180 millones de usuarios al día.
- React es la base de React Native, que te permite portar fácilmente aplicaciones creadas con React a aplicaciones nativas.
El atractivo de ReactJS es su enfoque de desarrollo centrado en componentes. Cada componente está construido usando JavaScript, pudiendo reutilizarlo fácilmente.
La interfaz de usuario consta de varios componentes. Estos componentes pueden renderizarse en el navegador usando Node.js, y dentro de las aplicaciones, usando React Native. De esta manera, se resuelven los problemas de la gestión de aplicaciones que necesitan ser utilizadas en diferentes sistemas operativos, navegadores y dispositivos.
Utilizando una plantilla de Polymer
Puedes reducir significativamente el tiempo necesario para configurar una aplicación web progresiva utilizando Polymer como plantilla. Este proyecto de código abierto de Google se actualiza con frecuencia para mantenerlo sincronizado con los proyectos de código abierto que aprovecha la plantilla.
Las plantillas Polymer utilizan el patrón PRPL para optimizar la implementación de la aplicación a los dispositivos.
Necesitas usar un servidor HTTP2 para entregar recursos bajo demanda. Además, el servidor hace un almacenado previo de los recursos que proporcionan los service workers. Desde el punto de vista del diseño, la plantilla de Polymer se aplica con material design.
Webpack
Aunque Polymer está muy bien para empezar, hay momentos en los tendrás que desarrollar aplicaciones personalizadas. Para ello tira de Webpack, ya que funciona como un paquete de módulos para aplicaciones JavaScript.
Webpack hace que la creación de diagramas de dependencia sea mucho más sencillo. Estos gráficos eliminan la necesidad de dependencias gestionadas, lo que significa que ya no es necesario enlazar con todos esos archivos JS en la parte inferior de una página web HTML. La migración a los módulos CommonJS o ES6 reduce drásticamente el número de llamadas hacia y desde un servidor, lo que resulta en una aplicación más rápida.
Con Webpack, las mágenes, CSS, fuentes, etc., se pueden ser ejecutados a través de JavaScript como objetos, mejorando la velocidad de carga.
Webpack no es perfecto. La curva de aprendizaje es un poco complicada y el código de documentación no es muy bueno. Pero Webpack es esencial para los sitios web progresivos, complejos y orientados al front-end.
Knockout
A veces ni siquiera se necesita un marco de trabajo versátil como React para crear una app web progresiva. Con Knockout podrás crear aplicaciones progresivas muy ligeras.
Knockout se sirve de JavaScript para gestionar los enlaces Model-View-ViewModel (MVVM). Éstos son las principales ventajas de Knockout:
- La biblioteca se puede colocar fácilmente en sitios web existentes sin necesidad de una reescritura exhaustiva.
- La biblioteca es pequeña (pesa solo 13KB).
- Aunque es pequeña, sigue ofreciendo una gran cantidad de funciones.
Sin duda, Knockout es un gran marco de trabajo para proyectos más pequeños, donde la rapidez de ejecución es primordial. Podría servirte para desarrollar pruebas de concepto durante sprint de diseño.
Hay dos razones por las que utilizar Knockout para proyectos rápidos en lugar de React. Primero, porque al usar Knockout se puede tirar de HTML, lo que facilita el aprendizaje, y no requiere JSX. La segunda razón es la creación de plantillas. Las plantillas facilitan la creación de aplicaciones complejas, ya que minimizan la duplicación de elementos DOM.
Comprueba tu código con Lighthouse
Para terminar con nuestras herramientas de aplicaciones web progresivas, lo hacemos con el servicio de monitorización del rendimiento de PWA de Google, Lighthouse, que se instala como un plugin para Chrome.
Simplemente vete a la página en la que quieras realizar pruebas y haz clic en el botón Lighthouse de la barra de herramientas de Chrome una vez que hayas instalado el plugin. El informe que recibirás te dará muchos detalles sobre la misma. La primera sección, «Progressive Web App», te muestra los siguientes datos:
- Ver si aplicación puede cargarse offline o con malas conexiones
- Ver si el rendimiento de la carga de página es rápido
- El sitio se mejora progresivamente
- Comprobar si la conexión de red es segura
- El usuario puede añadir la app a la pantalla de inicio
- La aplicación web instalada se iniciará con una pantalla de bienvenida personalizada
- La barra de direcciones coincide con los colores de la marca
- El diseño es mobile friendly
Cada una de estas seccciones te mostrará tecnologías específicas que puedes añadir o modificar para mejorar el rendimiento de tu aplicación web progresiva.
Recuerda que en APM contamos con un servicio para crear tus aplicaciones. Simplemente cubre nuestro pequeño cuestionario contándonos un poco sobre tu proyecto y te contactaremos:
