Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.
Interattività incrociata mediante eventi
In alcuni scenari, potrebbe essere necessario interagire tra loro più microfrontend per reagire ai cambiamenti di stato o alle azioni degli utenti. Ad esempio, più micro-frontend sulla pagina possono includere menu comprimibili. Quando l'utente sceglie un pulsante, viene visualizzato un menu. Il menu è nascosto quando l'utente fa clic in un altro punto, incluso un altro menu che viene visualizzato all'interno di un microfrontend diverso.
Tecnicamente, una libreria di stato condivisa come Redux può essere utilizzata da più micro-frontend e coordinata da una shell. Tuttavia, ciò crea un accoppiamento significativo tra le applicazioni, con conseguente codice più difficile da testare e potrebbe rallentare le prestazioni durante il rendering.
Un approccio comune ed efficace consiste nello sviluppo di un bus di eventi distribuito come libreria, orchestrato dalla shell dell'applicazione e utilizzato da più microfrontend. In questo modo, ogni microfrontend pubblica e ascolta eventi particolari in modo asincrono, basando il proprio comportamento solo sul proprio stato interno. Quindi, più team possono gestire una pagina wiki condivisa che descrive gli eventi e documenta i comportamenti concordati dai progettisti dell'esperienza utente.
In un'implementazione dell'esempio event-bus, un componente dropdown utilizza il bus condiviso per pubblicare un evento chiamato drop-down-open-menu con un payload di. {"id": "homepage-aboutus-button"} Il componente aggiunge un listener all'evento per garantire che, se viene generato un drop-down-open-menu evento per un nuovo ID, il componente a discesa venga renderizzato in modo da nascondere la sua sezione comprimibile. In questo modo, il micro-frontend può reagire alle modifiche in modo asincrono con un aumento delle prestazioni e un migliore incapsulamento, facilitando la progettazione e il test dei comportamenti da parte di più team.
Consigliamo di utilizzare uno standard APIs implementato nativamente dai browser moderni per migliorare la semplicità e la manutenibilità. Il riferimento agli eventi MDN
