Decimodan
October 21, 2020

PWAS más rápidas con PRPL

Estructurar y sobretodo entregar nuestras aplicaciones y PWA’s de la forma más rápida y eficiente posible es una de las partes fundamentales para lograr que los usuarios tengan una experiencia positiva.

Por tanto PRPL viene para atacar este problema, pero… ¿Qué es PRPL?

El patrón PRPL

Primero que nada PRPL es un patrón para estructurar y entregar aplicaciones web y Progressive Web Apps, enfocado en dos cosas:

En otras palabras, darle al usuario la aplicación lo más rápido posible y que cuando la utilice pueda interactuar con ella muy rápidamente. Mencionar que esto se lleva perfectamente de la mano con el concepto de Critical Rendering Path.

Las iniciales corresponden a lo siguiente:

El patrón PRPL fue presentado por primera vez en 2016 por el equipo de Polymer, pero es claramente aplicable a otros stacks. (como muchos de los conceptos que nos trajeron que hoy son el pan de cada día en VueJS por ejemplo)

El servidor y el Service Worker trabajan juntos para almacenar previamente los recursos de las rutas inactivas. Cuando el usuario cambia de ruta, la aplicación carga de forma diferida los recursos necesarios que aún no se han almacenado en caché y crea las vistas necesarias.

¿Por qué usar PRPL?

PWA’s creada con PRPL en mente, tratan de demostrar confiabilidad, rapidez y no perder la atención del usuario. Pero más de eso, PRPL ayuda en:

Esta forma de pensar se vuelve útil porque las aplicaciones típicas de hoy son mucho más pesadas de lo necesario. Para mejorar esa experiencia, debemos comenzar por hacer que las aplicaciones sean más livianas en general. Esto implica comprender y considerar cuidadosamente el peso de todo lo que incluimos, tanto nuestro propio código como nuestras dependencias.

Pero esto es lo mínimo. También solemos servir nuestras aplicaciones de forma ineficiente, en pocas palabras, ofrecemos un bundle todo en uno que contiene todos los recursos de nuestra aplicación. Este paquete debe recibirse y procesarse en el cliente antes de que el usuario pueda hacer algo.

De ahora en adelante, necesitamos estructurar y servir nuestras aplicaciones de manera que:

¿Qué tecnologías necesita PRPL para funcionar?

PRPL es un patrón conceptual que puede ser implementado de varias maneras, pero una de las más sencillas es con una combinación de los siguientes elementos:

¿Qué se necesita para implementar el patrón PRPL?

Una gran parte de PRPL está cambiando la mentalidad de empaquetado de **JS ** (aquí entra muy bien el concepto de micro-frontends) y entregando recursos lo más cercano posible a la granularidad en la que están creados (al menos en términos de módulos funcionalmente independientes). A todo esto…

¿Como lograr la granularidad?

¿Qué estructura de aplicación utiliza PRPL?

PRPL fomenta una arquitectura de aplicación de una sola página (SPA) con la siguiente estructura:

Lazy-Load

Lazy-Load

La aplicación debe importar dinámicamente estos componentes usando lazy-load según sea necesario. Por ejemplo, cuando el usuario cambia a una nueva ruta, importa los fragmentos asociados con esta ruta. Esto puede iniciar una nueva solicitud al servidor o simplemente cargar el recurso desde la caché.

Conclusiones

Más allá de apuntar a los objetivos y estándares fundamentales de las PWA, PRPL se esfuerza por optimizar para:

Por tanto, PRPL es un patrón que se ha utilizado a gran escala desde su introducción en 2016 y sigue siendo un enfoque completamente valioso que vale la pena considerar para tu aplicación.

Más información que puedes consultar:

Nota final: Este artículo es una traducción de este increíble artículo.

Contáctame

O simplemente mándame un saludo 🙈