Personalización de la interfaz de usuario basada en arquitectura frontal micro
La plataforma de interfaz de usuario básica de Sterling Store Engagement es una aplicación front-end única y monolítica creada con el framework Angular y Bootstrap. En los últimos años, con la adición de nuevas características en cada versión, la base de código de la aplicación se ha vuelto compleja. Para superar el reto de las actualizaciones de versiones de Angular en la nube, Sterling Store Engagement es compatible con la arquitectura de microfrontales. La arquitectura micro-frontal divide la aplicación monolítica en módulos más pequeños y lógicos llamados micro-front-ends, y al mismo tiempo mantiene la experiencia del usuario similar al uso de una sola aplicación.
Sterling Store Engagement es compatible con múltiples funciones que abarcan las operaciones de surtido en tienda y gestión de inventario. Cada característica se modela como un módulo de característica angular que contiene varias rutas o vistas. El objetivo es dividir cada módulo de características en aplicaciones angulares individuales, que se orquestan juntas mediante el uso de Single-Spa.
Cada aplicación angular habilitada para un solo spa viene con su propio package.json y controla sus propias dependencias, lo que permite que una aplicación se actualice de forma independiente y le ayude a completar las actualizaciones de la nube. Cada aplicación angular habilitada para un solo spa utiliza un conjunto común de componentes y servicios a través de bibliotecas de widgets compartidas. Las aplicaciones también comparten el estado a través del almacenamiento o contexto de sesión.
En la nueva arquitectura basada en micro front-end, Sterling Store Engagement se compone de múltiples paquetes de aplicaciones angulares y utiliza una aplicación vanilla JS que también se conoce como store-root-app, que aprovecha single-spa como router u orquestador. La aplicación store-root-app carga una aplicación angular específica basada en la ruta, y por lo tanto, tener un repo Git para cada paquete de aplicación es una carga. Por lo tanto, se eligió el método mono-repositorio utilizando los espacios de trabajo Lerna y Yarn para administrar el código fuente de todos los paquetes de aplicaciones y las bibliotecas dependientes en un único repositorio Git.
Lerna intenta facilitar la gestión de enlaces npm para proyectos multipaquete alojados en un único repositorio también conocido como monorepo. Analiza los paquetes y crea automáticamente los enlaces npm necesarios. También maneja la ejecución de tareas en varios paquetes y facilita el dolor del mantenimiento de versiones y la publicación. El espacio de trabajo de Yarn le permite configurar varios paquetes. Cuando ejecuta el mandato yarn
install , todos los paquetes se instalan en una sola pasada. Lerna delega la gestión de dependencias a Yarn.
El diagrama siguiente ilustra la arquitectura de interfaz de usuario de microinterfaz:
