Microfrontends para iniciantes

Microfrontends para iniciantes

Entendendo como a arquitetura evoluiu do Monolito aos microfrontends

Estou em uma empresa cujo alguns projetos estão sendo migrados para microfrontens e isso me motivou a estudar sobre o assunto e entender quando surgiram e qual a motivação de utiliza-los nos projetos.

Arquitetura Monolítica

- Que atire a primeira pedra quem nunca passou raiva tentando codar no famoso "legado".

A estrutura de um projeto legado é complexa e muitas vezes inflexível, a base de código é tão grande que impacta na manutenibilidade, essa arquitetura é conhecida como monolítica na qual toda a base de código está contida em um só lugar.

Monolito.png

Com a popularização do AJAX esse modelo de arquitetura começou a mudar e novas tecnologias foram sendo agregadas.

Front & Back

O bombardeio de novas tecnologias refletiu na mudança da arquitetura, a separação do front e do back o que possibilitou o reuso e diminuiu o acoplamento. O front-end começou a crescer e ter times dedicados, e vários projetos usufruíam de um mesmo backend, porém como nem sempre as pessoas trabalhavam juntas no mesmo time a solução foi o desenvolvimento de uma API que conversava com todos os projetos.

FrontEBack.png

A separação acarretou um crescimento e muitas responsabilidades no backend. Visto que adicionar mais pessoas ao time não era uma solução para escalar, então surgiu o conceito de micros serviços.

Micro serviços

Os micro serviços são uma variação da Arquitetura Orientada a Serviços (SOA - Service Oriented Architecture) de forma resumida é uma arquitetura de software de baixo acoplamento, onde as funcionalidades implementadas nas aplicações devem ser disponibilizadas na forma de serviços, é baseada nos princípios da computação distribuída, que utiliza o paradigma request/reply para estabelecer a comunicação entre as aplicações e os serviços.

O backend começou a ser dividido em micro serviços, eles refletiam em funcionalidades do negócio como : atendimento ao cliente, produto, pagamentos e etc.

Microservicos.png

Enquanto isso o front permanecia em um único repositório mesmo existindo times diferentes, e isso exigia uma logística dos desenvolvedores frontends para se comunicar em relação as novas tecnologias , atualizações e migrações, gerando varias versões do projeto o que dificultava a manutenibilidade.

A partir disso pensaram o porquê não utilizar micro serviços no front, e então originou-se os MICROFRONTENDS.

Micro frontends

Ideias centrais por trás de Micro Frontends

Liberdade: As equipes devem ser independentes das outras, tendo a liberdade de escolher qual a melhor tecnologia que agregará na aplicação que desenvolvem.

Independência: Criar aplicações independentes mesmo que varias equipes trabalhem no mesmo projeto.

Estabelecer Prefixos de equipes: Acordar convenções de nomenclatura onde o isolamento ainda não é possível. Nomes de CSS, Eventos, Local Storage e Cookies para evitar colisão e esclarecer propriedades.

Dê preferência aos recursos nativos do navegador em vez de APIs personalizadas: Se necessário for, criar uma API que mantenha de forma simples.

Resiliência: A aplicação deve ser consistente, mesmo se o JavaScript falhar ou ainda não estiver executando. Utilize a renderização universal e aprimoramentos progressivos para melhorar a performance.

Microfrontends.png

Mesmo parecendo uma ótima solução para vários problemas, os microfrontends tem algumas desvantagens, se o time não for bem estruturado e não seguir um style guide a tendência é que cada layout ficará diferente, processos associados a segurança podem ficar mais complexos, com múltiplos serviços vem a necessidade de compor regras de negócio, erros e logs acabam sendo distribuídos em vários lugares.

Conclusão

Espero que eu tenha ajudado você leitor de alguma forma a entender como tudo isso surgiu e que são necessários estudos para avaliar se as técnicas e estratégias de microfrontends se aplicam a necessidade do seu projeto.

E nunca se esqueça que: com grandes poderes vem grandes responsabilidades.

1_0I-RxEy9YIiWilMNRFUYMg.gif