Wiki

Has cargado una revisión vieja del documento! Si la guardas crearás una versión nueva con estos datos.

====== Arquitectura Front ======

**//ARQUITECTURA CLIENTE-SERVIDOR DISTRIBUIDO CERTIFICADO PARA MICROFRONTENDS//
**

{{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:imagen1.png?600|}}

**Acercad de:
**

1. **Estructura del Proyecto Angular**:

- En la raíz del proyecto, tendrás la configuración de Angular CLI y otros archivos de configuración necesarios.

- La carpeta `src` contendrá todos los archivos fuente de tu aplicación Angular.

2. **Módulos de Funcionalidad**:

- Organiza tu aplicación en módulos de Angular que representen las principales funcionalidades o características de la aplicación. Cada módulo puede corresponder a un microfrontend potencial en el futuro.

- Utiliza el enrutador de Angular para gestionar la navegación entre los diferentes módulos y componentes, sin embargo en la aplicación se implemente SPA para la navegación por pestaña levantando un componente cada vez que se requiera.

3. **Componentes Reutilizables**:

- Crea componentes reutilizables que puedan ser compartidos entre los diferentes módulos de la aplicación. Estos componentes pueden incluir elementos de interfaz de usuario comunes, como barras de navegación, barras laterales, formularios, etc.

- Estos componentes son en su mayoría independientes y desacoplados, lo que facilitará su reutilización en diferentes partes de la aplicación y su posible migración a microfrontends en el futuro.

4. **Servicios para la Comunicación con el Servidor**:

- Implementa servicios en Angular para la comunicación con el servidor y la gestión de datos. Estos servicios pueden encapsular las llamadas a APIs proporcionadas por los microservicios en el backend.

- Si decides introducir un BFF en el futuro, puedes adaptar estos servicios para comunicarse con el BFF en lugar de acceder directamente a los microservicios.

5. **Capa de Presentación y Lógica de Negocio**:

- Utiliza los componentes de Angular para implementar la interfaz de usuario y la lógica de presentación de tu aplicación.

- Mantén la lógica de negocio separada de los componentes de presentación, siguiendo los principios de separación de preocupaciones (SoC). Esto facilitará la escalabilidad y la evolución de tu aplicación.

{{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:imagen2.png?600|}}

**ARQUETIPO MFSICOF
**

{{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:imagen3.png?400|}}

**Ejemplo de flujo entre api-componentes
**

{{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:imagen4.png?700|}}
**Ejemplo menú
**
{{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:imagen5.png?700|}}
**Ejemplo tablas
**

**TECNOLOGIAS
**

* ANGULAR
  * IONIC
  * Typescript
  * Prime NG
  * Boopstrap
  * CSS3
  * HTML
  * Rest
  * JWT

**VENTAJAS DE ARQUITECTURA CLIENTE-SERVIDOR DISTRIBUIDO CERTIFICADO PARA MICROFRONTENDS**

* ESCALABLE: Permite escalar el desarrollo de manera eficiente.
  * Flexible: Permite utilizar diferente frameworks y nuevas tecnologías. 
  * Despliegue independientes: Cada microfront se puede desplegar sin afectar
  * los otros microfront, una app caída no afecta a la otra.
  * Ideal para microservicios.
  * Ideal para trabajar con externos.

**CALIDAD**

* ISO/IEC 25010:2011; Funcional, Eficiente, Compatible, Usable, Confiable, Seguro, Mantenible y Portable

* ISO/IEC 5055:2021; Seguro, Confiable, Eficiente y Mantenible.

* Principio Solid; Robusto, Flexible, Mantenible, Extensible. (Responsabilidad Única, Abierto/Cerrado, Substitución de objetos, Interfaces segregadas, Inversión de dependencias)

* Clean code; Leer, entender, modificar y mantener

* POO; Modularidad, Reutilización, Mantenibilidad, Flexibilidad (Encapsulación, Abstracción, Herencia, Polimorfismo)

[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]

Resumen de la edición

Wiki

Herramientas de usuario

Herramientas del sitio

Herramientas de la página