¿Qué es una Aplicación Web Progresiva o PWA?

por Josue

En el mundo la informática y las tecnologías, es recomendable estar al tanto de las novedades que salen al mercado. Este mundo avanza de forma muy acelerada y en ocasiones nos cuesta seguirle el paso: nuevas tecnologías, herramientas, nuevos frameworks. En los últimos años se está escuchando mucho sobre la aplicación web progresiva o progressive web apps (PWA, siglas en inglés). ¿Pero en realidad de qué trata esta tecnología? Hoy, en LovTechnology, vamos a responder esta pregunta y mucho más sobre este tema, así que si le interesa el tema quédese con nosotros.

¿Qué es una Aplicación Web Progresiva o PWA?

El concepto de aplicación web progresiva (PWA, o Progressive Web App) se acuñó en el año 2015, por el diseñador Francés Berriman y el ingeniero de Google Chrome Alex Russell. Y no son más que un avance natural de las aplicaciones web, desapareciendo de esta forma la barrera entre las webs y las aplicaciones móviles, las cuales puede realizar tareas que por lo general solo las aplicaciones de forma nativa podrían llevar a cabo , como las notificaciones, el operatividad sin conexión a Internet, entre otros.

Lista de las Mejores Aplicación Web Progresiva o PWA

Aunque en Internet existen muchos tutoriales para la creación de PWA, hoy te vamos a mostrar algunas sugerencias de frameworks, bibliotecas JavaScript y herramientas que pueden utilizar para comenzar a implementarla.

Framework Angular(Aplicación Web Progresiva o PWA)

Angular framework creado por Google y se puede crear PWA o Progressive Web App — Angular framework creado por Google

Angular es un framework JavaScript creado por Google y las aplicaciones se desarrolla en Typescript, y tiene el fin de facilitar desarrollar aplicaciones de una sola página de una forma más sencilla y óptima.

Hay que tener en cuenta que no todas las versiones de este framework son adecuadas para la creación de PWA, es partir de la versión 5, el que se puede crear aplicaciones de tipo PWA.

Aunque, este framework presenta una variedad de ventajas, también tiene un conjunto de desventajas tales como que tiene una curva de aprendizaje muy grande, y tiene más de una vía para realizar dichas las PWA. Además se necesita grandes conocimientos de TypeScript y es demasiado complejo para muchos desarrolladores, pero es perfecto para el desarrollo de aplicaciones complejas y SPA.

Biblioteca React.js(Aplicación Web Progresiva o PWA)

React.js no es más que es una biblioteca Javascript de código abierto, tiene la misión de favorecer el desarrollo de aplicaciones de una sola página y diseñada para crear interfaces de usuario. Jordan Walke, un ingeniero de software en Facebook lo desarrolló, y su lanzamiento fue el 29 de mayo de 2013. Esta biblioteca es muy popular entre los desarrolladores y es uno de los competidores del framework Angular.

La gran diferencia entre React.js y Angular es que Angular es un framework y React.js es una librería JavaScript que solo se encarga de la vista. Al ser React.js una librería tiene que involucrar el resto de herramientas para crear una aplicación (routing, http, etc.), logrando así una gran flexibilidad.

Una de las tantas ventajas que tiene React.js es la gran comunidad de desarrolladores con el apoyo de forma continua de Facebook.

Framework Vue.js(Aplicación Web Progresiva o PWA)

Vue.js no es más que es un framework de JavaScript de código abierto para desarrollar interfaces de usuario y aplicaciones de una sola página, Evan You lo desarrolló en el año 2013, y su lanzamiento de forma oficial en mes de febrero del 2014. Este framework lo utiliza grandes empresas como Alibaba y Laravel, y se puede usar para diferentes proyectos, no solamente para crear aplicaciones web progresivas.

Este framework presenta grandes ventajas tales como su curva de aprendizaje es baja, documentación de forma detallada, su adaptabilidad, excelente integración, muchas más. Además para crear PWA tiene un paquete dedicado a la misma, la cual permite a los desarrolladores a simplificar el trabajo.

Framework Ionic(Aplicación Web Progresiva o PWA)

Ionic es un SDK de código abierto para el desarrollo de aplicaciones móviles híbridas, y se basa en Angular y Apache Cordova. Además, en las últimas versiones de Ionic se puede desarrollar con otros frameworks, por ejemplo, Vue.js y React.js.

Entre sus principales ventajas de este framework, se encuentran:

Su curva de aprendizaje es baja.
En relación con las aplicaciones nativas tanto para iOS como para Android, permite desarrollar una aplicación de forma más rápida.
Permite desarrollar aplicaciones con la misma base de código para diferentes sistemas operativos.
Cómo utiliza JavaScript y Angular, tiene una comunidad muy amplia.
Permite realizar una verificación de manera rápida de los componentes y módulos.
Es una excelente opción para el desarrollo de aplicaciones móviles como PWA, ya que utiliza WebView, opción que permite que las aplicaciones instaladas puedan mostrar contenido web dentro de la propia app.

Pero también tiene sus desventajas tales como, el rendimiento de las aplicaciones desarrolladas en Ionic, puede ser ligeramente menor que en aplicaciones desarrolladas de forma nativa, y se va reduciendo cuando los dispositivos mejoran.

Herramientas para la creación de Aplicación Web Progresiva o PWA

Ya se ha visto hasta el momento que los desarrolladores pueden crear las PWA trabajando con frameworks y bibliotecas, anteriormente mencionados. Pero, con el objetivo de agilizar el tiempo y crear PWA de forma más ágil, se puede usar una de las siguiente herramientas, el cual se debe seleccionar según a sus necesidades.

Magento PWA Studio

Esta herramienta es un conjunto de herramientas que posibilita a los desarrolladores desarrollar aplicaciones web progresivas o PWA complejas sobre las tiendas de Magento 2.

Webpack

Webpack no es más que un sistema de bundling para transpillar, compilar y desplegar una aplicación web. De cierta manera se puede considerar un Browserify avanzado ya que tiene muchas opciones de configuración.

Tiene muchas ventajas como:

Permite eliminar recursos que no se utilizan.
Tiene un absoluto control sobre cómo procesas los recursos.
Es rápido.
Te permite realizar despliegues rápidos.

Pero el uso de Webpack tiene sus incovenientes:

La documentación es mala.
Algunas sintaxis son algo confusas.
Cuando se utiliza en proyectos grandes, realizar la configuración es muy complejo.
Si en algún momento falla es muy difícil saber que lo que está sucediendo, porque no proporciona mucha información.

Lighthouse

Al desarrollar un PWA, se quiere saber su rendimiento, SEO y otros elementos muy importantes. Con este fin, se encuentra la herramienta Lighthouse, desarrollada por Google. Esta herramienta se ejecuta desde Chrome DevTools o automatizarse mediante las línea de comandos. Otra manera de utilizarla es instalarla y ejecutarla desde el navegador Chrome.

Lighthouse genera un reporte con algunos resultados como la accesibilidad, mejores practicas, rendimiento y PWA del sitio.

¿Qué es una Aplicación Web Progresiva o PWA?

Lista de las Mejores Aplicación Web Progresiva o PWA

Framework Angular(Aplicación Web Progresiva o PWA)

Biblioteca React.js(Aplicación Web Progresiva o PWA)

Framework Vue.js(Aplicación Web Progresiva o PWA)

Framework Ionic(Aplicación Web Progresiva o PWA)

Herramientas para la creación de Aplicación Web Progresiva o PWA

Magento PWA Studio

Webpack

Lighthouse

Artículos relacionadas que te podrían resultar interesantes: