Personalizzazione dell'interfaccia utente basata sull'architettura di front-end micro
La piattaforma di base dell'interfaccia utente di Sterling Store Engagement è un'applicazione front-end singola e monolitica, realizzata con i framework Angular e Bootstrap. Negli ultimi anni, con l'aggiunta di nuove funzionalità in ogni release, il codebase dell'applicazione è diventato complesso. Per superare la sfida dell'aggiornamento continuo della versione di Angular nel cloud, Sterling Store Engagement supporta l'architettura micro-frontend. L'architettura micro - frontend divide l'applicazione monolitica in moduli più piccoli e logici chiamati micro - front - end, e allo stesso tempo mantiene l'esperienza utente simile all'utilizzo di una singola applicazione.
Sterling Store Engagement supporta diverse funzionalità che si estendono alle operazioni di gestione del magazzino e dell'inventario. Ogni funzione è modellata come un modulo funzione angolare che contiene più percorsi o viste. L'obiettivo è quello di suddividere ogni modulo di funzionalità in singole applicazioni angolari, che vengono orchestrate insieme utilizzando Single-Spa.
Ogni singola applicazione angolare abilitata per la spa viene fornita con il proprio package.json e controlla le proprie dipendenze, consentendo a un'applicazione di essere aggiornata in modo indipendente e di aiutarti a completare gli aggiornamenti cloud. Ogni singola applicazione angolare abilitata alla spa utilizza una serie comune di componenti e servizi tramite librerie di widget condivise. Le applicazioni condividono anche lo stato tramite l'archiviazione della sessione o il contesto.
Nella nuova architettura basata su micro front-end, Sterling Store Engagement è composto da più pacchetti di applicazioni angolari e utilizza un'applicazione JS vanilla, nota anche come store-root-app, che sfrutta single-spa come router o orchestratore. L'applicazione store-root-app carica un'applicazione angolare specifica in base al percorso e quindi avere un repo Git per ogni pacchetto di applicazioni è un peso. Per questo motivo è stato scelto il metodo mono-repo, utilizzando gli spazi di lavoro Lerna e Yarn per gestire il codice sorgente di tutti i pacchetti applicativi e delle librerie dipendenti in un unico repository Git.
Lerna cerca di semplificare la gestione dei collegamenti a npm per i progetti multi-pacchetto che sono ospitati in un singolo repository, noto anche come monorepository. Analizza i pacchetti e crea automaticamente i collegamenti npm necessari. Gestisce anche l'esecuzione di attività su più pacchetti e semplifica la gestione delle versioni e la pubblicazione. L' area di lavoro Yarn consente di impostare più pacchetti. Quando si esegue il comando yarn
install , tutti i pacchetto vengono installati in un singolo passaggio. Lerna delega la gestione delle dipendenze a Yarn.
Il seguente diagramma illustra l'architettura dell'interfaccia utente micro - frontend:
