CONTATTACI

Blog

Front-end developer con un iPad in una maon e un pennino molto grande nell'altra, che sorride

Architettura a micro front-end: cos’è e perchè utilizzarla

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 frameworkSingle-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?

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.