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:
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.
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:
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.
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.
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.
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:
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.
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:
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: