Microservizi e micro frontend: analogie e piccole verità nascoste 🧩

Tempo fa mi sono ritrovato a riflettere (forse troppo, ma capita) sulle sorprendenti analogie tra l’architettura frontend di una SPA costruita con custom elements e il mondo, a volte mitologico, dei microservizi backend. Sì, lo so: sembra la classica storia di “tutto è un file”, ma lasciatemi giocare con la metafora.

Microservizi, ma con stile 🧬

I custom elements, se progettati con una logica davvero isolata, sono i microservizi del frontend. O meglio, i micro frontend. Ogni elemento vive la sua vita, ignaro (o quasi) del caos che lo circonda. Ma attenzione: la pagina web è un albero genealogico di elementi, e capita spesso che più istanze dello stesso “servizio” lavorino per domini diversi della stessa app. Un po’ come quei cugini che non si parlano ma si ritrovano sempre ai pranzi di famiglia.

Networking: il DNS che non ti aspetti 🌐

E qui arriva il colpo di scena: i CSS selectors sono il DNS del frontend. Permettono di trovare un elemento senza sapere dove abita davvero in memoria, proprio come un dominio che nasconde l’IP. Quando ottieni un DOM node, hai finalmente l’indirizzo e la porta del tuo servizio. E, grazie alla struttura ad albero, ogni elemento può essere sia un servizio che una porta d’accesso, a seconda di quanto è dipendente dal suo “genitore”.

Comunicazione diretta: RPC, ma con più stile ☎️

I custom elements possono esporre metodi pubblici, vere e proprie API sincrone per altri elementi. Sembra quasi di fare RPC, ma senza la noia delle interfacce IDL. Certo, la tentazione di abusarne è forte, ma ricordate: ogni chiamata diretta è un debito tecnico che vi aspetta al varco.

Event driven: il pub/sub del DOM 📣

Il vero superpotere del DOM? Gli eventi. Listener sparsi ovunque, comunicazione asincrona e disaccoppiata. I container (e soprattutto window e document) diventano broker di messaggi, mentre gli eventi sono i nostri canali. Ogni elemento può urlare nel vuoto, sperando che qualcuno ascolti. Un po’ come in una riunione su Zoom.

Variabili d’ambiente: la configurazione che non ti aspetti ⚙️

Gli attributi dei custom elements sono le environment variables del frontend. Configurano, influenzano, a volte confondono. Ma senza di loro, nessun servizio sarebbe davvero “parametrico”.

Test: tra realtà e finzione 🧪

I test frontend, spesso, sono più simili a integration test che a veri unit test. Il browser è il nostro test-container, le WebAPI i servizi esterni da mockare (o da accettare così come sono, con rassegnazione). E come nel backend, la tentazione di “mockare tutto” è forte, ma la realtà ci ricorda che il mondo reale è sempre più strano di qualsiasi simulazione.

Ecco, arrivati fin qui, forse ti starai chiedendo: “Ma allora, il frontend è davvero solo un backend travestito?” La verità è che ogni analogia è imperfetta, ma ci aiuta a vedere i problemi da prospettive nuove (e a riderci sopra, che non guasta mai). In fondo, il bello del nostro mestiere è proprio questo: trovare somiglianze dove nessuno le vede e improvvisare soluzioni con un pizzico di filosofia.

Garbage collection: il netturbino invisibile 🧹

Così come nei microservizi esistono processi che si occupano di “ripulire” risorse non più utilizzate, anche nel DOM il garbage collector lavora silenziosamente per evitare che la memoria venga saturata da elementi dimenticati. Un po’ come il netturbino che passa di notte: se fa bene il suo lavoro, nessuno se ne accorge… finché non smette di farlo.

Versionamento: la crisi d’identità degli elementi 🪪

Nei microservizi, ogni servizio ha una sua versione, con tanto di backward compatibility (o almeno, ci si prova). Nel frontend, i custom elements evolvono, cambiano API, e a volte convivono più versioni nella stessa pagina. È come avere cugini con lo stesso nome ma età diverse: la confusione è garantita.

Health check: il “come stai?” del DOM 🩺

I microservizi espongono endpoint di health check per dire “sono vivo!”. Nel frontend, spesso si usano heartbeat, polling o semplici property per verificare che un elemento sia ancora reattivo. Perché anche un custom element, ogni tanto, ha bisogno di sentirsi chiedere come sta.

Dependency injection: la spesa a domicilio 🛒

Nel backend, la dependency injection è la regina della disaccoppiamento. Nel frontend, passare riferimenti o configurazioni tra elementi è un po’ come ricevere la spesa a domicilio: se tutto va bene, hai quello che ti serve; se qualcosa manca, la colpa è sempre del supermercato (o del parent element).

In conclusione, che tu scriva in Go, TypeScript o con la forza del pensiero, ricordati: ogni architettura è una metafora, e ogni metafora è un modo elegante per non ammettere che stiamo tutti improvvisando. Ma almeno, facciamolo con stile. 😉

E tu, quale analogia hai trovato oggi nel tuo codice?