Microfrontends com web Components e WebPack : Uma abordagem de implementação agnóstica em relação ao framework

Abstract

A arquitetura de software se propõe a tomar decisões focadas em um objetivo. Sistemas podem implementar microfrontends, uma arquitetura que tem como um dos seus objetivos permitir que times diferentes desenvolvam aplicações de forma paralela. Times que desejam utilizar tecnologias diferentes enfrentam o problema da incompatibilidade e da integração dos diferentes componentes. Além do mais, existem diferentes abordagens deimplementar esta arquitetura, e não há um padrão definido acerca de qual usar, o queagrega mais complexidade. Este trabalho define uma abordagem combinada utilizando Web Components e WebPack Module Federation, que tem como principal objetivo seragnóstica em relação ao framework. Para isso, foi realizada uma pesquisa exploratória aplicada, com o intuito de definir essa abordagem de implementação, como também, explorar a abordagem em uma situação com os três principais frameworks de frontend: React, Angular e Vue.js. Visto que isolar as folhas de estilo CSS é um problema conhecidona comunidade, também foi explorado a funcionalidade de shadow DOM dos Web Com ponents. Por fim, foi possível concluir que a abordagem combinada definida é funcional e pode ser utilizada em aplicações que utilizam a API nativa do DOM ou frameworks que fazem uso da mesma.