Olá Web Developers! Vamos entender o que é Micro Front-End. Já tivemos aqui no blog posts relacionados a Microsserviços e Micro-Frameworks, que eu recomendo a leitura para servir de base para o entendimento deste post.
Micro vs Monolítico
Quando dizemos que um sistema é monolítico, estamos nos referindo a monólitos (mono = um, lito = pedra). Uma referência a, por exemplo, montanhas que são formadas por uma única pedra, como é o caso do morro do Pão de Açúcar.
Nesse sentido estamos indicando que o sistema é grande e inflexível, pois normalmente se baseia em uma única estrutura, framework e padrão. Não estou dizendo que isso é ruim.
Já quando falamos em micro, estamos nos referindo a pequenas peças que se unem para formar algo maior, como blocos de montar.
Curso AngularJS - Criação de interfaces web
Conhecer o cursoO que é Micro Front-End?
O mais comum hoje em dia é construir uma aplicação inteira com uma única biblioteca ou framework (normalmente React, Angular ou Vue). Em contraste com essa ideia, imagine uma aplicação que na verdade é feita de pequenas aplicações independentes que se integram.
Nesse sentido, poderíamos ter até mesmo uma mesma tela feita por frameworks diferentes. Um pedaço pode ter sido feito com Angular e outro com Vue. Loucura? Bagunça? Talvez não.
A ideia de Micro Front-Ends é exatamente permitir que cada pedaço da aplicação seja independente. Isso realmente não faz sentido nenhum para aplicações de pequeno e médio porte. Entretanto, aplicações de grande porte normalmente necessitam de algumas estratégias diferentes para que possam continuar crescendo sem afetar sua qualidade.
(No exemplo acima, a tela de exibição do produto é feita em Angular, a parte relacionada à compra é feita em React e a lista de produtos relacionados é em Vue)
Portanto, pense em projetos em que há pelo menos dois times diferentes trabalhando no Front-End de uma mesma aplicação. Um time pode ter um problema em que uma ferramenta X seria perfeita, mas que poderia dificultar as atividades do outro time, que prefere usar a ferramenta Y.
Se cada pedaço da aplicação for independente, cada time pode escolher suas tecnologias, métodos de trabalho, horários de reunião, casos de teste, momento para deploy, etc. Assim, cada um conseguirá ter um melhor aproveitamento. Se uma equipe precisa atualizar a sua parte, a outra não precisa ser envolvida e nem terá seu trabalho influenciado.
Além disso, e se algum módulo da aplicação tiver uma ferramenta obsoleta e precisa ser atualizada ou até mesmo trocada? Em uma aplicação comum teríamos que arrumar o código inteiro, o que é totalmente inviável para aplicações grandes. Você já deve ter ouvido o famoso “deixa assim ou refaz do zero”. Entretanto, se cada módulo da aplicação é independente, você pode mudar cada pedaço da aplicação aos poucos, sem influenciar no todo.
Curso React - Despertando o Poder dos Hooks
Conhecer o cursoComo os Micro Front-Ends se comunicam?
Ainda que a ideia é deixar cada pedaço da aplicação independente, as partes necessitam conversar e compartilhar certos dados. Um ótimo exemplo é ter um módulo de login e outro de compra de produtos. É necessário saber quem é o usuário logado para poder finalizar uma compra.
A fim de possibilitar a comunicação entre os pequenos pedaços da aplicação, podemos utilizar coisas como o próprio LocalStorage, por exemplo. Ou então criar eventos para possibilitar a comunicação.
Há ferramentas que ajudam a permitir essa integração. Uma delas é o https://single-spa.js.org/.
Também é importante deixar claro que ainda é importante que as equipes sigam certas regras e padrões. Do contrário, o sistema seria estranho, com botões diferentes em cada tela, animações em diferentes estilos, etc.
Aplicações monolíticas são coisas do passado? Devo mudar meu jeito de trabalhar e usar micro front-ends?
Jamais! Cada aplicação sempre deve ser estudada e planejada de acordo com as necessidades e problemas a serem resolvidos. Haverá casos em que micro front-ends apenas darão mais trabalho e dores de cabeça ao invés de melhorias. Por isso sempre é importante conhecer várias ferramentas e maneiras diferentes de trabalhar, pois só assim você saberá o que fazer e usar em cada momento.
Resumindo, os micro front-ends dão uma maior flexibilidade para aplicações de grande porte que possuem vários times. Mas não vão trazer vantagens para pequenos projetos em que há poucas pessoas envolvidas.
