Herramientas de usuario
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:arquitectura
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:arquitectura [2024/06/21 15:45] 192.168.177.98 |
— (actual) | ||
|---|---|---|---|
| Línea 1: | Línea 1: | ||
| - | ====== 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 | ||
| - | ** | ||
| - | |||
| - | |||
| - | |- src/ | ||
| - | |- app/ | ||
| - | |- layout/ | ||
| - | |- api/ | ||
| - | |- config/ | ||
| - | |- service/ | ||
| - | |- shared/ | ||
| - | |- api/ | ||
| - | |- components/ | ||
| - | |- service/ | ||
| - | |- directives/ | ||
| - | |- models/ | ||
| - | |- onecomponents/ | ||
| - | |- footer/ | ||
| - | |- nav-bar/ | ||
| - | |- app-component.css | ||
| - | |- app-component.html | ||
| - | |- app-component.ts | ||
| - | |- app-config.ts | ||
| - | |- app-routes.ts | ||
| - | |- assets/ | ||
| - | |- environments/ | ||
| - | |- environment.dev.ts | ||
| - | |- environment.prod.ts | ||
| - | |- environment.qa.ts | ||
| - | |- environment.ts | ||
| - | |- favicon.ico | ||
| - | |- index.html | ||
| - | |- main.ts | ||
| - | |- styles.scss | ||
| - | |- test.ts | ||
| - | |||
| - | |||
| - | |||
| - | |||
| - | {{: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 formularios | ||
| - | ** | ||
| - | {{:ada:howto:sicoferp:factory:new-migracion-sicoferp:front:imagen5.png?700|}} | ||
| - | **Ejemplo tablas | ||
| - | ** | ||
ada/howto/sicoferp/factory/new-migracion-sicoferp/front/arquitectura.1718984740.txt.gz · Última modificación: 2024/06/21 15:45 por 192.168.177.98
Herramientas de la página
