El patrón PRPL en Angular

May 02, 2019

En la actualidad contamos con tecnologías WEB enriquecidas y que están evolucionando constantemente ( Como Service Workers por ejemplo ) los cuales han permitido que podamos hacer Apps sofisticadas para los dispositivos móviles y extender esa característica hasta llegar a las Progressive Web Apps ( WebApps que se sienten como Apps descargadas desde las tiendas ).

El principal problema con esto es que el desarrollo Web Móvil es muy lento por que las mayorias de las técnicas aplicadas son pensadas en Web de Escritorio y es por esto que Google ha diseñado el patrón de arquitectura PRPL. Este patrón aún se encuentra en experimentación.

La sigla PRPL viene por:

  • PUSH (Empujar) recursos críticos para la ruta URL inicial usando y http/2.
  • RENDER (Interpretar) la ruta inicial.
  • PRE-CACHE (Almacenamiento Previo en Cache) de los recursos restantes.
  • LAZY LOAD (Carga Perezosa) del resto de los recursos sobre pedido.

El objetivo principal de este patrón es:

  • Mínimo tiempo de interacción.
  • Máxima eficiencia de almacenamiento en caché.
  • Facilidad de desarrollo e implementación.

Estructura de nuestra APP.

Para aplicar este patrón a una SPA (Single Page-App) deberemos tener en cuenta lo siguiente:

  • El principal entrypoint
  • El App-Shell
  • El resto de los fragmentos de nuestra App cargados con Lazy Loading.

En el diagrama las líneas punteadas representan recursos cargados a medida que se necesitan por el shell. Las líneas sólidas dependencias estáticas cargadas con o