MICRO-FRONTEND - WEB COMPONENT APPROACH
0 likes129 views
The document discusses a micro frontend web component approach using Vue, presented by Andrea Campaci. It covers architectural concepts such as logical architecture, composition layers, and the pros and cons of using this method, emphasizing reduced complexity and parallel development, while also noting potential conflicts and lack of literature on the topic. Additionally, it details how to implement properties and events in Vue micro-apps, including the conversion of property formats and reactivity.
MICRO-FRONTEND - WEB COMPONENT APPROACH
- 1. Micro Frontend Web component approach con VUE Power by Andrea Campaci
- 2. !
- 3. 🙏
- 4. Andrea Campaci Chi sono? IT Technical Architect //andreacampaci.it info@andreacampaci.it
- 6. Architettura
- 7. Architettura logica Architettura COMPOSITION LAYER BUSINESS LAYER HUMBLE OBJECT LAYER Portal Widget UI Component
- 8. Pro & contro Architettura 😍 Minore complessità 😍 Parallelizzazione dello sviluppo 😍 Isolamento 😍 Deploy separato 😍 Riduzione costi manutenzione 😡 Conflitto tra script 😡 Poco know how e letteratura
- 10. Comunicazione Architettura Shell Micro App A Micro App C Micro App B Event data binding data binding Event 1. Carica 2. Impagina 3. Orchestra
- 11. Web component con VueJs
- 13. Package script Micro-app con VueJs
- 14. Struttura web component Micro-app con VueJs Documento HTML Shadow DOM Micro App Custom element Event Data binding
- 16. Proprietà reattive Micro-app con VueJs
- 17. Proprietà reattive Micro-app con VueJs • Tutte le proprietà sul componente principale (es. App.vue) vengono esportati sul custom element come sue proprietà. • Le proprietà sono reattive al cambiamento di stato. • Le proprietà vengono convertite da CamelCase a kebab-case. Esempio: hasValue => has-value • Le proprietà dichiarate come Boolean vengono convertite da stringhe a valori booleani automaticamente. Esempio: “” | “true” => true “false” => false • Le proprietà dichiarate come Number vengono convertite da stringhe a numeri automaticamente.
- 18. Eventi Micro-app con VueJs Gli eventi emessi con “emit” dal componente principale Vue vengono inviati come CustomEvent al custom element passando lo shadow- dom.
- 19. Shell
- 21. Module lazy loading Portal shell
- 22. 🤩 demo time
- 23. 🤔 dubbi?
- 24. Thank '