iClubs
Published in

iClubs

Photo by La-Rel Easter on Unsplash

O que são Micro-frontends?

Vou te dar um exemplo para você entender melhor

Vamos supor que estamos criando uma aplicação de Ecommerce, e nela temos alguns recursos como: Gestão de usuário, Exibição do produto, Produtos relacionados e Checkout.

Agora vamos transformar essa aplicação em micro-frontend

Agora vamos ver principais ideias por trás dos micro-frontends

Um serviço agnóstico
Cada time é capaz de definir sua stack de forma independente trazendo a possibilidade de escolher a melhor tecnologia para resolver o problema em questão.

O DOM é a API

Cada equipe constrói seus componentes usando tecnologia web de sua escolha e envolvendo isso em um elemento personalizado. As especificações do DOM deste elemento em particular (tag-name, eventos e atributos) atua como um contrato ou API pública para outras equipes. A vantagem é que eles podem usar o componente e suas funcionalidades sem ter que conhecer a implementação. Eles apenas precisam ser capazes de interagir com o DOM.

E quais empresas utilizam Micro-frontend?

Grandes empresas utilizam essa arquitetura em seus projetos, empresas como: Netflix, Microsoft, Spotify, Zalando, SAP, Starbucks, Skyscanner, DAZN entre outras.

Mas e ai, como faz para implementar?

Os micro-frontends podem ser implementados de diferentes maneiras. Como iframe, Edge Side Includes ou até mesmo através de um framework como o OpenComponents.

Conclusão

A utilização dessa arquitetura em grandes empresas nos enviam um sinal de que os micro-frontends estão prontos para serem utilizados, existe uma série de conteúdos falando sobre o assunto, vou deixar alguns links aqui.

Referências e outros conteúdos:

Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe ai nos comentários 💬

Mas antes de ir, se gostou, deixe uns claps aqui no post 👏 isso me ajuda e me motiva muito!

--

--

A plataforma de loyalty para você transformar clientes em fãs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vinnicius Gomes

Senior Software Engineer who love to write about Frontend, JavaScript and Web development. See more about me — vinniciusgomes.dev