Man mano che le applicazioni evolvono e crescono ci si accorge che stiamo creando dei veri e propri monoliti frontend. Per questo motivo, come nel mondo backed, anche nel frontend si è ideato qualcosa di molto simile ai micro-servizi, è nato quindi il pattern denominato micro frontends.
Ci sono diversi approcci al pattern, uno dei più interessanti è quello basato sull'utilizzo dei web component. Nel workshop partiremo dalle basi del pattern, vedremo come impostare il nostro progetto, come far comunicare, testare, assemblare i nostri pezzi in un'unica applicazione funzionante utilizzando Vuejs.
7. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI
Application
7
01 Architettura
The Monolith
Frontend
Backend
Frontend
Aggregation Layer
Microservice
Microservice
Microservice
Front & Back Microservices
8. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI
Micro Frontends
Overview
L’idea del pattern nasce dalla
necessità di far realizzare a team
indipendenti funzionalità business
e2e.
Team PRJ Z
Es. product list, create, edit,
delete
Team PRJ Y
Es. user login and
registration
Team PRJ X
Es. cart fn, add & remove
item, buy wizard
Frontend
Backend
Database
8
01 Architettura
9. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 9
01 Architettura
Driver
Principali
Resilienza Performance Scalabilità Unlock
• Utilizzo di più framework.
• Ideale per chi vuole migrare
la propria architettura verso
un altro framework,
prevenendo l’obsolescenza
del software.
• Team con know how
tecnologici differenti
possono collaborare alla
produzione di componenti
software per un unico
progetto.
• Parallelizzazione delle
attività di sviluppo.
• Ogni micro app viene
sviluppata, testata,
rilasciata separatamente.
• Ogni micro applicazione FE
ha un bundle estremamente
piccolo, ottimizzabile
ulteriormente utilizzando il
code splitting.
• Alcuni file vendor possono
essere esternalizzati per poi
essere condivisi
univocamente.
• Seguendo il principio CCP
(Common Closure
Principle), ogni componente
software è auto-
consistente e responsabile
di un solo dominio.
• Ogni micro applicazione
gestisce il proprio error
handling senza bloccare le
altre in pagina.
10. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI
SUB-DOMAIN HTML FRAGMENTS
WEB COMPONENT IFRAME
• Standard HTML
• Reattività
• Isolamento CSS
• Necessita di polyfill in IE11
• Forte isolamento
• Poca comunicazione
• Performance
• CORS issues
• Scomposizione
• Nessuno standard presente
• CSS presente in pagina
10
01 Architettura
Differenti
approcci
• Nessuna comunicazione
• Forte isolamento
11. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI
PRESENTATION
LAYER
PORTAL
11
01 Architettura
Architettura
logica
AGGREGATION
LAYER
WIDGET
BFF
WIDGET
WIDGET
BUSINESS
LAYER WIDGET
MICROSERVICES
DATA
LAYER
DATA
12. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 12
01 Architettura
Principi
di
responsabilità
Portale (Shell)
• Carica
• Orchestra
• Compone
• Naviga
• Autentica
Widget
• Business
• Business
• Business
PRESENTATION
LAYER
PORTAL WIDGET
WIDGET
13. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 13
01 Architettura
Componenti
a
fattor
comune
PRESENTATION
LAYER
UI Library Framework Event Broker
Nav Utils
Http Service Handler Error
PORTAL WIDGET
WIDGET
14. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 14
01 Architettura
Comunicazione
tra
widget
Widget A Widget B Portal
Event Bus
subscribe
dispatch(data)
data
custom event (data)
data
Broker
16. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI
Cosa sono?
Componenti create con diverse
librerie/framework, le cui
funzionalità sono incapsulate
rispetto al codice presente in
pagina e possono essere
riutilizzate in differenti applicazioni
web.
16
02 Web components
18. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 18
Principali
proprietà Custom
elements
ESM (Moduli) Shadow DOM CSS Scope
Il CSS viene isolato
dall’esterno in modo che
l’applicazione resti consistente
indipendente dal contesto.
Un aspetto importante dei
Web Component è
l'incapsulamento: essere in
grado di mantenere la
struttura, lo stile e il
comportamento separato da
altro codice nella pagina.
I moduli JS sono la base della
tecnologia web component.
Questa funzionalità introdotta
da JS permette di importare ed
esportare codice JS in moduli
rendendo riutilizzabile il codice
in altre applicazioni.
I Custom Elements
permettono di creare elementi
HTML (Tags) nativi che
possono implementare da una
singola funzionalità ad un
intera applicazione.
Lo scopo di tali elementi è
essere riutilizzabili.
02 Web components
19. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 19
Struttura
logica
02 Web components
Documento HTML
Custom Element
Shadow DOM
APP
22. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 22
03 Vue CLI
Creazione
del
componente
$ vue-cli-service build --target wc
$ vue create [widget-name]
La creazione di un nuovo
progetto avviene tramite CLI
con il seguente comando:
Una volta che l’applicazione
è completata, accodare al
comando di build l’attributo
“target” dal valore Web
Component
23. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 23
03 Vue CLI
Proprietà
in
input
L’injection di dati
dall’esterno avvengono
tramite data-binding;
Sfruttando quindi le
proprietà del componente
principale Vue (App.vue)
possiamo definire quali sono
i dati che possiamo passare
in input al nostro Web
Component.
24. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 24
03 Vue CLI
Dispatch
di
eventi
Allo stesso modo delle
proprietà, ogni evento
lanciato dal componente
principale (App.vue) viene
automaticamente
trasformato in un Custom
Event. L’evento pubblicato
potrà essere ascoltato sul
Custom Element.
this.$emit(“event-name”, data)
25. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI 25
03 Vue CLI
Caricamento
da
una
Shell
Static Lazy
Documento HTML Documento HTML
app1.js app2.js
SHELL
app1.js
app2.js
Widget 1
app1.js
Widget 1
SHELL
27. MICRO FRONTENDS WORKSHOP |
ANDREA CAMPACI
DOC HTML
DOC HTML
DOC HTML DOC HTML
DOC HTML
DOC HTML
DOC HTML
DOC HTML
27
04 Facciamo pratica
DOC HTML
SHELL
Home tab
Todo List
tab
WIDGET 1 WIDGET 2
WIDGET
LIST
WIDGET
FORM
DOC HTML
Struttura
del progetto
Creeremo un applicazione nella
quale saranno presenti due tab
“Home” e “Todo list”. Entrambe le
pagine ospiteranno due widget
diversi tra loro caricati in maniera
Lazy.