- Perch\u00e9 disaccoppiare il frontend?<\/a><\/li>
- Micro-lc: l\u2019orchestratore di micro frontend open-source<\/a><\/li>
- I benefici di un orchestratore come micro-lc<\/a><\/li><\/ol><\/div><\/div><\/p>[vc_row type=”in_container” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_spacing=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_shadow=”none” column_border_radius=”none” column_link_target=”_self” column_position=”default” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]I micro frontend nascono dall\u2019esigenza di semplificare lo sviluppo frontend, in cui la gestione di un applicativo monolitico rischierebbe di diventare complessa.
\nUn\u2019applicazione monolitica di grandi dimensioni \u00e8 infatti difficile da gestire sotto diversi aspetti<\/strong>: la codebase cresce e diventa difficile da mantenere ed evolvere; la fase di build diventa lunga e complessa; l\u2019applicazione deve essere rilasciata e scalata nella sua interezza; e cos\u00ec via.
\nPer questo motivo, molto spesso la soluzione \u00e8 scomporre l\u2019applicazione in una serie di componenti pi\u00f9 piccoli<\/strong>, che possono essere sviluppati, rilasciati e scalati indipendentemente, semplificando la gestione da parte del team. Questo lavoro pu\u00f2 essere svolto nella parte di backend ricorrendo ai microservizi e nella parte di frontend grazie ai micro frontend<\/strong>.<\/p>\nPerch\u00e9 disaccoppiare il frontend?<\/h2>\n
I micro frontend sono dunque un pattern architetturale che applica la logica di disaccoppiamento propria dei microservizi alla parte di frontend.<\/p>\n
Tra i tanti benefici troviamo:<\/p>\n
- \n
- Maggiore scalabilit\u00e0<\/strong>, perch\u00e9 le singole parti possono scalare in maniera indipendente;<\/li>\n
- Rapidit\u00e0 e agilit\u00e0 di sviluppo<\/strong>: i team lavorano e rilasciano in modo indipendente le proprie porzioni di codice;<\/li>\n
- Indipendenza nello sviluppo<\/strong>, che si traduce nella possibilit\u00e0 non soltanto di sviluppare parti diverse in contemporanea, ma anche di aggiungere, rimuovere o riscrivere parti del frontend senza che questo ne intacchi la stabilit\u00e0 o il funzionamento;<\/li>\n
- Riduzione del time-to-market<\/strong> di nuovi servizi digitali;<\/li>\n
- Codebase pi\u00f9 piccola<\/strong> e quindi gestibile;<\/li>\n
- Possibilit\u00e0 di utilizzare framework diversi<\/strong> all\u2019interno dello stesso applicativo.<\/li>\n<\/ul>\n
Micro-lc: l\u2019orchestratore di micro frontend open-source<\/h2>\n
Dall\u2019esperienza di sviluppo con i micro frontend<\/a>, Mia-Platform ha realizzato un orchestratore che permette di rendere ancora pi\u00f9 semplice l\u2019utilizzo di questo pattern architetturale e la gestione dei singoli frontend: micro-lc<\/strong> \u00e8 un applicativo che svolge la funzione di orchestratore di micro frontend<\/strong> e che \u00e8 stato rilasciato in modalit\u00e0 open-source<\/a>.<\/p>\n
Micro-lc si compone di due parti, backend e frontend, e ne permette l\u2019estensione tramite plugin:<\/p>\n
- \n
- La <\/span>parte frontend<\/strong> \u00e8 costituita da un container, che racchiude le funzionalit\u00e0 cross-applicativo utilizzate per configurare i frontend collegati: gli elementi di base del layout (top bar e menu sidebar, sidebar collassabile e interno alla top bar); i colori dell\u2019applicativo; il logo e la Favicon; il titolo della finestra; le impostazioni di darkmode\/lightmode; i dati utente; gli analitici Google; la gestione dei Plugin.
\nI frontend sono realizzati con Qiankun, che si occupa di fornire delle funzioni da usare per montare o smontare i micro frontend in un applicativo contenitore. La scelta di utilizzare Qiankun \u00e8 stata determinante perch\u00e9 permette che i frontend condividano lo stesso DOM<\/strong>, semplificando cos\u00ec la loro comunicazione (che pu\u00f2 essere realizzata tramite l\u2019utilizzo di eventi o l\u2019implementazione di funzioni personalizzate da iniettare nella window);<\/span><\/span><\/li>\n- La parte di backend<\/strong>\u00a0consente di gestire le configurazioni generali, quelle che definiscono gli elementi del frontend e l\u2019autenticazione degli utenti.<\/span><\/li>\n<\/ul>\n
Tra i plugin messi a disposizione da Mia-Platform<\/a> troviamo element-composer, che permette di comporre la UI della pagina in modo dinamico per realizzare micro frontend orizzontali.<\/p>\n
I benefici di un orchestratore come micro-lc<\/h2>\n
L\u2019utilizzo di un orchestratore di micro frontend permette di migliorare l\u2019esperienza di sviluppo a micro frontend<\/strong>: semplifica l\u2019orchestrazione e astrae il linguaggio utilizzato.<\/p>\n
Tra i vantaggi specifici di micro-lc troviamo il fatto che \u00e8 integrato nella fase di runtime<\/em><\/strong>, semplificando anche le operazioni di rilascio. A differenza dell\u2019integrazione a buildtime<\/em>, infatti, non richiede di rilasciare tutti gli elementi dell\u2019applicativo a ogni modifica, ma permette di rilasciare la singola configurazione e di visualizzare le modifiche semplicemente ricaricando la pagina.<\/p>\n
I vantaggi di velocit\u00e0, agilit\u00e0 e flessibilit\u00e0<\/strong> offerti dall\u2019orchestratore open-source di Mia-Platform non riguardano soltanto la creazione di nuove applicazioni frontend<\/a>, ma anche alla migrazione di un frontend monolite<\/a> verso un\u2019architettura a micro frontend.<\/p>\n
Micro-lc \u00e8 inoltre estremamente configurabile<\/strong> e permette di modificare il layout inserendo gli asset grafici del brand, offrendo cos\u00ec un\u2019esperienza di utilizzo personalizzata.<\/p>\n
Se vuoi approfondire l\u2019approccio architetturale a micro frontend e un caso reale di applicazione guarda la registrazione dell\u2019evento Headless & API Date<\/a> e segui l\u2019intervento di Edoardo Pessina, Full Stack Developer Specialist su \u201cMicro frontend: come orchestrare componenti riutilizzabili in applicativi frontend organici con il framework micro-lc<\/strong>\u201d.<\/p>\n
- La parte di backend<\/strong>\u00a0consente di gestire le configurazioni generali, quelle che definiscono gli elementi del frontend e l\u2019autenticazione degli utenti.<\/span><\/li>\n<\/ul>\n
- Rapidit\u00e0 e agilit\u00e0 di sviluppo<\/strong>: i team lavorano e rilasciano in modo indipendente le proprie porzioni di codice;<\/li>\n
- Micro-lc: l\u2019orchestratore di micro frontend open-source<\/a><\/li>
![\"\"](\"https:\/\/www.intesys.it\/journal\/wp-content\/uploads\/sites\/13\/2021\/10\/HAPI-2021_rec-banner-600x300.png\")
<\/a><\/p>\n