Implementa una SPA cuando necesites una experiencia de usuario altamente interactiva y fluida, con actualizaciones dinámicas y navegación ágil.
Específicamente se recomienda para el frontal de aplicaciones web:
- Complejas con rica interacción del usuario.
- Que demandan alto rendimiento y adaptabilidad a diversos dispositivos.
- Con manipulación intensiva de datos en tiempo real.
Cómo adaptarla a tu caso concreto
Preparación del entorno de desarrollo
Se recomienda para la fase de desarrollo en local utilizar las siguientes herramientas:
- Node.js (v16 o superior): Disponible en la web oficial de node.
Angular CLI (v17.3.10): Puede descargarse e instalarse usando el siguiente comando:
npm install -g @angular/cli@17.3.10- Git: Disponible en https://git-scm.com/
- Navegador compatible: Usar el navegador de preferencia para pruebas y depuración.
Si no existe un espacio de trabajo para el proyecto es necesario solicitar su creación en el Repositorio Corporativo. Dentro del espacio de trabajo del proyecto, crearás el repositorio que alojará tu código basado en la solución web SPA.
Comprueba que todo funciona:
- Inicia el proyecto:
- Ejecuta el arquetipo correspondiente al activo ada-fwk-webapps
- Configura el entorno:
- Verifica las versiones de Node.js/Angular (revisa la documentación del arquetipo de ada-fwk-webapps).
- Instala dependencias de npm.
- Verifica la instalación:
- Levanta el servidor con el comando npm.
- Comprueba que funciona en la dirección http://localhost:4200.
Adaptación
Al iniciar el diseño de una solución web SPA, recomendamos usar Standalone Components para mayor simplicidad y reutilización, NGRX para gestión de estado, Arquitectura Hexagonal para mantenibilidad, y pruebas unitarias con Karma y Jasmine para calidad del código. Además, sugerimos integrar Web Components del sistema de diseño oficial de la Junta de Andalucía reaprovechando recursos y manteniendo la consistencia visual.
A continuación listamos los pasos necesarios (las referencias a secciones son a las contenidas en el README del proyecto que encontrarás en el repositorio):
- Entiende la arquitectura:
- Sección "5.1.2. Capas de la Arquitectura Hexagonal".
- Aplica estilos:
- Utiliza Bootstrap Junta Andalucía (repositorio).
- Gestiona el estado:
- Sección "5.1.4. Gestión del Estado con NGRX".
- Integra componentes externos:
- Usa Web Components desde Storybook/Lint.
- Desarrolla la aplicación:
- Crea componentes/servicios con Standalone Components.
- Implementa la lógica de negocio.
- Realiza pruebas:
- Pruebas unitarias con las herramientas Karma/Jasmine.
Despliegue
Si tienes un nuevo desarrollo y quieres que despliegue en la plataforma Pre-Cloud, solicítalo a través de "Incorporación al proceso de transición DevSecOps".
Durante el Proceso de Transición recibirás información sobre los entornos disponibles.
En cualquier otro caso, ponte en contacto con el servicio de explotación correspondiente para que te informen de los procedimientos de alta de sistemas y entornos.