Si tomamos como referencia las aplicaciones más usadas tanto en equipos de escritorio como en móviles tal vez se nos vengan a la mente nombres como Slack o Spotify. Estas aplicaciones existen en muchos sistemas operativos y lucen exactamente igual. Puedes instalar Slack en Windows, Mac, Linux, iOS y Android sin ningún problema, y verás que apenas existen diferencias estéticas ni de funcionalidad entre las diferentes plataformas. Esto es debido a que en realidad se trata de una sóla aplicación para todas las plataformas.
Una aplicación, muchas plataformas.
Pero… ¿Cómo es eso posible? Atrás quedaron los años en que una misma aplicación debía ser escrita en diferentes lenguajes de programación y compilada para diferentes plataformas. No es magia, es HTML y Javascript. En esencia estas aplicaciones son webs avanzadas encapsuladas en un ejecutable nativo que hace las veces de servidor web y que da acceso a ciertos recursos de hardware. Bienvenido a las aplicaciones híbridas.
Aplicaciones híbridas.
Hace unos años, tras los grandes avances de HTML en su versión 5, CSS y Javascript, los desarrolladores se dieron cuenta que era posible implementar sus aplicaciones en formato web. Algunos otros con aplicaciones web avanzadas vieron que podían coger su aplicación on-line y llevarla al escritorio de los usuarios como si de una aplicación nativa se tratara, ya fuera descargándola directamente o publicándola en sus correspondientes tiendas digitales. Tal fue el caso de Protonmail, por ejemplo.
Pero… ¿Qué es una aplicación híbrida? Pues en esencia una aplicación híbrida es una web encapsulada en un ejecutable compatible con tu plataforma. A su vez, este ejecutable es capaz de comunicarse con la aplicación web para por ejemplo, dar acceso a la cámara de tu dispositivo. De esta manera se consigue que aplicaciones web puedan acceder al hardware y se “hagan pasar” por aplicaciones de escritorio.
Un paso más. Progressive Web App.
PWA no es un concepto nuevo, pero es ahora cuando está en pleno auge. Un paso más allá de las aplicaciones híbridas son las PWA, en esencia webs online que son descargadas íntegramente en tu dispositivo y encapsuladas por el navegador para poder ejecutarse de manera nativa tal y como lo haría una aplicación híbrida, pero sin el engorro de tener que instalar un ejecutable nuevo o pasar por la tienda de turno para descargarla. Visitas una web, haces un click y… Voilá! Tu nueva aplicación está instalada en tu escritorio.
¿Cómo hemos llegado a este punto? Hace unos años al intentar descargarte una web no había manera de hacerla funcionar, pero la forma de desarrollar webs y aplicaciones ha cambiado radicalmente. Antes el frontend, la parte que está delante del usuario y ofrece la usabilidad, era generada en el servidor y enviada al navegador. Estoy hablando de las típicas web PHP de toda la vida. Ahora el frontend puede estar totalmente separado del backend, la parte que maneja los datos en un servidor, y generado de manera local gracias a Javascript.
Ventajas de una PWA.
Escribir tu aplicación como una PWA tiene muchas ventajas, tales como:
- Es multi-plataforma. Una sóla aplicación va a poder instalarte en todos los dispositivos. Esto te va ahorrar un montón de tiempo de desarrollo y mantenimiento. Eso lo puedes traducir directamente a dinero. Mucho dinero.
- Es homogénea. Tu aplicación se comportará de igual manera en las diferentes plataformas.
- Facilidad de instalación. Un click y ya la tienes.
- Actualizaciones instantáneas y desatendidas. El despliegue de actualizaciones es en el mismo momento y además no requiere de ninguna acción por parte del usuario.
- No es necesario publicar tu App en las stores. Si alguna vez has publicado una App en la App Store sabrás de lo que te hablo. Publicar tu app en las stores significa que debes cumplir una serie de requisitos y que dependes de ellos para publicar tu última actualización. Si hay algo que no les gusta adiós, por no hablar de los tiempos de actualización en el caso de la App Store de Apple. Este problema desaparece con las PWAs. Ganas independencia, y pierdes fricción.
El mero hecho de encapsular una aplicación web requiere que su cápsula sea un completo navegador web. Además Javascript es en sí un lenguaje de programación interpretado, lo que añade otra capa más de proceso a nuestro entramado. Principalmente por estas cuestiones, las PWA también tienen varias desventajas que no hay que olvidar:
- Peor rendimiento. Afortunadamente los motores Javascript actuales son muy eficientes, pero nunca llegarán a tener el rendimiento de la plataforma nativa. A pesar de eso, la potencia del hardware actual hace que esta desventaja sea prácticamente imperceptible.
- Requieren (mucha) más memoria RAM. Por los mismos motivos, estamos ejecutando todo un navegador web. Esto puede hacer que una aplicación muy sencilla consuma mucha memoria RAM. Tener abiertas dos o tres PWAs en dispositivos modestos puede traer problemas.
- Ocupan mucho más espacio. Una PWA es, en esencia, un servidor web + un navegador web + el código de tu aplicación. Tu aplicación es lo de menos. Por tonta que sea, una PWA puede ocupar 10 veces más que su homóloga nativa.
- No todos los navegadores lo soportan. No todos los navegadores soportan correctamente PWAs. No obstante es algo en lo que están trabajando a destajo y en un futuro no muy lejano este problema habrá desaparecido. Los principales navegadores lo hacen sin problemas.
¿Cómo se hace una PWA?
Como hemos dicho, una PWA es esencialmente una web, así que puedes usar tu framework Javascript favorito, por ejemplo: ReactJS, Angular, VueJS, etc. y luego encapsularla. Algunos frameworks como Ionic facilitan mucho la tarea.
Conclusión
Esta claro que pese a sus inconvenientes, sus ventajas hacen decantar la balanza a escribir tu próximas aplicación en formato PWA. Multitud de grandes aplicaciones ya están dando el salto a PWA para ser más independientes y en general este movimiento es una buena jugada para ganar independencia y acortar los tiempos. Una vez el soporte PWA en los navegadores esté extendido y sea eficiente, las PWAs serán una realidad.
Enlaces interesantes:
