This content originally appeared on DEV Community and was authored by Federico
Gestione moderna dei frontend con micro frontend, shell e Leaflet
Introduzione
La complessità crescente delle applicazioni web moderne ha portato alla necessità di architetture più modulari, scalabili e manutenibili. In questo contesto, i micro frontend rappresentano un'evoluzione naturale, ispirata ai microservizi, per suddividere un'applicazione frontend in moduli indipendenti e autonomi. In questo articolo esploreremo come strutturare un'applicazione frontend moderna utilizzando una shell, più micro frontend (MFE), e tecnologie come Angular, NgRx, e Leaflet per la gestione di mappe interattive e dati geografici.
Cos'è un micro frontend?
Un micro frontend è un'unità indipendente di un'applicazione frontend che può essere sviluppata, testata e distribuita separatamente. Ogni MFE può essere costruito con il proprio stack tecnologico (anche se spesso si mantiene omogeneità) e integrato in una shell che funge da contenitore principale.
Vantaggi:
- Indipendenza dei team
- Deploy indipendenti
- Scalabilità modulare
- Manutenibilità migliorata
Architettura: Shell + MFE
Shell
La shell è l'applicazione principale che ospita i micro frontend. In Angular, può essere costruita con Module Federation, Single-SPA, o soluzioni custom.
Responsabilità della shell:
- Routing e orchestrazione
- Layout condiviso
- Stato globale (NgRx)
- Autenticazione centralizzata
Micro Frontend (MFE)
Ogni MFE è un'app Angular (o altro framework) indipendente, con routing, stato e logica propri. E anche propri file json per la gestione delle lingue
Esempi in un'app geografica:
-
mfe-map: mappa interattiva con Leaflet -
mfe-filters: filtri geografici e tematici -
mfe-details: dettagli di un punto selezionato -
mfe-analytics: dashboard con grafici e dati aggregati
Stato condiviso con NgRx
Per sincronizzare i dati tra shell e MFE:
- Usa store modulari
- Comunica tramite RxJS Subjects, Custom Events, o Shared Services
- Applica il facade pattern per semplificare l'accesso allo stato ## Integrazione di Leaflet nei MFE
Esempio: mfe-map
ts
const map = L.map('map').setView([45.4642, 9.19], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
This content originally appeared on DEV Community and was authored by Federico
Federico | Sciencx (2025-10-24T20:43:58+00:00) Gestione moderna dei frontend con micro frontend, shell e Leaflet. Retrieved from https://www.scien.cx/2025/10/24/gestione-moderna-dei-frontend-con-micro-frontend-shell-e-leaflet-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.