Download to read offline
Uploaded byAndrea Campaci
MICRO-FRONTEND - WEB COMPONENT APPROACH
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.
![[WSO2Con USA 2018] Adaptive and Iterative Integration for Microservices and C...](https://cdn.slidesharecdn.com/ss_thumbnails/adaptiveanditerativeintegrationformicroservicesandcloudnativearchitectures-kasun-180717041448-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[APIdays INTERFACE 2021] Now that we have K8s, can we stop re-inventing API p...](https://cdn.slidesharecdn.com/ss_thumbnails/apidaysk8platform-210708083659-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[WSO2 Integration Summit San Francisco 2019] Cloud-native Integration for the...](https://cdn.slidesharecdn.com/ss_thumbnails/wso2integrationsummitsanfrancisco2019cloudnativeintegrationfortheenterprise-191014092934-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
MICRO-FRONTEND - WEB COMPONENT APPROACH
- 1. Micro Frontend Web componentapproach con VUE Power by Andrea Campaci
- 2.
- 3.
- 4. Andrea Campaci Chi sono? ITTechnical Architect //andreacampaci.it info@andreacampaci.it
- 5.
- 6.
- 7. Architettura logica Architettura COMPOSITION LAYER BUSINESSLAYER 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
- 9.
- 10. Comunicazione Architettura Shell Micro App AMicro App C Micro App B Event data binding data binding Event 1. Carica 2. Impagina 3. Orchestra
- 11. Web component conVueJs
- 12.
- 13.
- 14. Struttura web component Micro-appcon VueJs Documento HTML Shadow DOM Micro App Custom element Event Data binding
- 15.
- 16.
- 17. Proprietà reattive Micro-app conVueJs • 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 Glieventi emessi con “emit” dal componente principale Vue vengono inviati come CustomEvent al custom element passando lo shadow- dom.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.