Il frontend è una parte fondamentale dello sviluppo di siti web. Il ruolo dello sviluppatore front end è, ad oggi, una figura sempre più ricercata e diffusa, grazie all’ampio mercato che il web development garantisce.
Molte web app, addirittura, concentrano le loro energie prevalentemente sul front end development, dando meno peso al lato back-end.
Ma le web app cambiano nel tempo, così come le tecniche e i framework di sviluppo. Ciò richiede supporto per consentire la coesistenza di diversi framework front end (ad esempio, moduli più vecchi costruiti in JQuery o AngularJS 1.x, combinati con moduli più recenti costruiti in React o Vue).
Ma facciamo un passetto indietro, e partiamo dal significato di front end.
Front end significato:
Il front end è la parte di un applicativo, di un servizio o di una piattaforma che gestisce l’interazione con l’utente, è spesso un aspetto cruciale nel mondo dello sviluppo web.
Per intenderci, è possibile definire come front-end l’ambiente grafico di una piattaforma e/o un software.
Questo aspetto del software viene progettato ed implementata in modo tale da assicurare un’esperienza utente ottimale. Quindi, un front end web developer può operare anche come UX/UI Designer, ovvero colui che solitamente disegna le UI (User Interface) che l’utente utilizza durante le normali operazioni con un applicativo.
Ora che abbiamo rispolverato le basi, passiamo ad affrontare la vera tematica di questo articolo: l’architettura a micro front-end.
Perchè utilizzare l’architettura micro front-end
Avere un approccio monolitico per sviluppare e manutenere un’app front-end di grandi dimensioni diventa ingombrante. Deve esserci un modo per suddividerlo in moduli più piccoli che possano agire in modo indipendente.
Esempio:
- myapp.com/ – pagina di destinazione creata con linguaggio HTML statico.
- myapp.com/settings – vecchio modulo delle impostazioni integrato in AngularJS 1.x.
- myapp.com/dashboard – nuovo modulo dashboard integrato in React.
Per rendere possibile una gestione più specifica, ma indipendente, all’interno di un sito web di grandi dimensioni, si ricorre all’architettura micro front-end. Una raccolta di moduli separati, “mini-app”, costruiti in vari framework, memorizzati in diversi repository di codice. Un sistema di distribuzione che raggruppa insieme tutti i moduli da diversi repository e li distribuisce su un server, ogni volta che un modulo viene aggiornato.
Cos’è il micro front end per definizione?
Il termine Micro Frontend è apparso per la prima volta in ThoughtWorks Technology Radar alla fine del 2016. Estende i concetti di microservizi al mondo frontend. La tendenza attuale è quella di creare un’applicazione browser potente e ricca di funzionalità, ovvero un’app a pagina singola, che si basa su un’architettura di microservizi. Questo è ciò che chiamiamo monolite frontend.
L’idea alla base dell’architettura micro front-end è quella di pensare a un sito web o a un’app web come una composizione di funzionalità di proprietà di team indipendenti. Ogni team ha un’area distinta di attività o missione di cui si preoccupa e in cui è specializzato. Un team è interfunzionale e sviluppa le sue funzionalità end-to-end, dal database all’interfaccia utente.
Aziende come Spotify, Klarna, Zalando, Upwork, Allegro e HelloFresh utilizzano l’approccio micro frontend per creare le loro app web. Chi ne giova non è il solo frontend developer, ma l’intero team di sviluppo che può concentrarsi indipendentemente su micro-aree della web app stessa.
Per approcciarsi a questa pratica il front end developer (o aspirante tale) deve avere un minimo di dimestichezza con la progettazione e realizzazione di applicazioni web. La migliore soluzione implementabile è il “meta framework” Single-SPA per combinare più framework sulla stessa pagina senza aggiornare la pagina.
Un approccio alternativo può essere l’isolamento di micro-app in IFrame utilizzando librerie e API Window.postMessage per coordinarsi. Gli IFrame condividono le API esposte dalla finestra principale.
Ci sono molti modi in cui è possibile implementare questa tecnica, non ce n’è uno migliore o peggiore, dipende dalle proprie conoscenze ed esigenze. Si tratta di un approccio estremamente potente, che può andare a migliorare in maniera sostanziale l’aspetto e le performance di un’applicazione web, senza dover scomodare anche lo sviluppo back-end (che anche in minima parte sarà presente).
E tu la conoscevi?
