Módulo 4: Tecnologías web avanzadas

4.2.2 Introducción a la arquitectura de esqueleto de aplicación

Un esqueleto de aplicación (app shell) hace referencia a los elementos mínimos de HTML, CSS y JavaScript necesarios para ejecutar una interfaz de usuario. El shell de aplicación debería:

  • Cargar rápido
  • Almacenarse en caché
  • Mostrar contenido de forma dinámica

La arquitectura de esqueleto de la aplicación separa la infraestructura fundamental de la aplicación y la interfaz de usuario de los datos. Toda la IU y la infraestructura se almacenan en caché y de forma local mediante el uso de un service worker para que, en las siguientes cargas, la Progressive Web App solo tenga que recuperar los datos necesarios en lugar de cargarlo todo.

Un esqueleto de aplicación es fundamental para conseguir un rendimiento fiable. Es como el paquete de código que publicas en una tienda de aplicaciones cuando creas una aplicación nativa. Por lo tanto, representa la carga necesaria para arrancar, pero no todo lo que necesitas. El shell conserva la interfaz de usuario local y extrae contenido de manera dinámica a través de una API.

¿Para qué sirve la arquitectura de esqueleto de aplicación?

Si utilizas la arquitectura shell de la aplicación, puedes centrarte en la velocidad y conseguir que tu Progressive Web App tenga propiedades similares a las de las aplicaciones nativas, como carga instantánea y actualizaciones periódicas, y todo sin necesidad de una tienda de aplicaciones.

Diseño del esqueleto de la aplicación

El primer paso consiste en dividir el diseño en sus componentes principales.

Hazte las siguientes preguntas:

  • ¿Qué debe aparecer en pantalla inmediatamente?
  • ¿Qué otros componentes de la IU son fundamentales para la aplicación?
  • ¿Qué recursos de apoyo se necesitan para el shell de la aplicación? (por ejemplo, imágenes, JavaScript, estilos, etc).

Ejemplo

Imagina que vas a crear una aplicación de previsión meteorológica como una Progressive Web App. Los componentes fundamentales serían:

  • Encabezado con un título y botones de agregar/actualizar
  • Contenedor para tarjetas de previsión
  • Una plantilla de tarjeta de previsión
  • Un cuadro de diálogo para agregar nuevas ciudades
  • Un indicador de carga

 

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?