Download as PDF, PPTX
![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](https://image.slidesharecdn.com/micro-frontends-web-component-approch-con-vuejs-slide-codemotion-211109111018/75/Micro-frontends-Web-component-approach-con-VUEJS-22-2048.jpg)
Uploaded byAndrea Campaci
Micro frontends Web component approach con VUEJS
The document outlines a workshop by Andrea Campaci on micro frontends using web components with Vue.js. It discusses the architecture of micro frontends, highlighting the benefits of independent team functionality, resilience, performance, and scalability, as well as practical implementation through web components and Vue CLI. The workshop includes hands-on practice and a Q&A session, emphasizing the creation and interaction of widgets within a micro frontend structure.
Micro frontends Web component approach con VUEJS
- 1. Micro Frontends Web componentapproach con VUEJS ANDREA CAMPACI | IT ARCHITECT WORKSHOP
- 2. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 2 🙏
- 3. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI Andrea Campaci IT Architect @ Banca Mediolanum S.p.A. //andreacampaci.it info@andreacampaci.it 3
- 4. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 4 Contenuti del workshop Architettura 01 Web components 02 Facciamo pratica 04 Q&A 05 Vue CLI 03
- 5. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 5 Repository di riferimento $ git checkout workshop $ npm run bootstrap Enjoy!! andreacampaci/micro-fe-vue2-wc
- 6. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 01 Architettura 6
- 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
- 15. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 02 Web components 15
- 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
- 17. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 17 02 Web components Librerie e framework
- 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
- 20. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 20 Supporto Browsers 02 Web components ✓ ✓ ✓ ✓ ✓ ✘
- 21. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 03 Vue CLI 21
- 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
- 26. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 04 Facciamo pratica 26
- 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.
- 28. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI 28 Q&A
- 29. MICRO FRONTENDS WORKSHOP| ANDREA CAMPACI Thank " 29 info@andreacampaci.it