Micro frontends na Comunidade de Desenvolvimento

No final de março, foi realizado o primeiro encontro da Comunidade de Práticas de Desenvolvimento da SoftDesign. Na ocasião, foi discutido o propósito da Comunidade: compartilhar, de forma profunda, estudos e novidades sobre ferramentas, frameworks e técnicas relacionadas ao desenvolvimento de software.

Seguindo tal premissa, neste primeiro encontro Ernani Ely falou sobre micro frontends, arquitetura extremamente nova e ainda em ascensão que o desenvolvedor está implementando em seu atual projeto de trabalho.

Micro frontends X Microsserviços

Para entender melhor essa arquitetura, podemos fazer uma analogia a outra já conhecida: os microsserviços. Ambos têm praticamente a mesma motivação, vantagens e maneira de funcionamento. Nos micro frontends, cada página ou mesmo fragmento de página é uma aplicação completa desenvolvida de maneira isolada, que é inserida em um determinado local para compor algo maior.

Antigamente, haviam as chamadas aplicações monolíticas, nas quais o backend e frontend formavam a mesma aplicação. Com o passar do tempo, houve uma separação entre backend e frontend, e enquanto o backend evoluiu e passou a adotar microsserviços, o frontend continuou sendo uma aplicação inteira.

Agora, chegou a vez do frontend se adequar às mais recentes práticas de desenvolvimento com a arquitetura de micro frontends. O principal motivo dessa adequação é atender a forma de organização de times verticais, onde cada equipe deve ser autônoma para construir seu produto do início ao fim, com a mínima dependência de outros times.

Quais os reais ganhos da arquitetura de micro frontends?

– Agnóstica à tecnologia: cada time pode desenvolver com a tecnologia que mais domina ou que melhor atende sua área de negócio;

– Desenvolvimento desacoplado: já que cada time tem sua própria tecnologia, repositório, etc., conflitos de código e merges são reduzidos drasticamente;

– Entregas desacopladas: seu time terminou a feature nova? Faça o deploy sem ter que esperar por ninguém. Interdependências também são reduzidas;

– Problema desacoplado: se uma parte da sua aplicação frontend parar de funcionar, todos os outros micro frontends continuarão funcionando; sua aplicação não será mais monolítica.

Técnicas e ferramentas

Dentre as principais técnicas para executar tal arquitetura estão a Single SPA (Single Page Applications), Multiple SPA, Web Components, e iframes. Sim, iframes já existem a um bom tempo, e aqueles sites/sistemas antigos cheios de iframes são micro frontends.

Já entre as ferramentas que ajudam no desenvolvimento de micro frontends encontramos Storybook, Monorepo, Lerna, Teste de Snapshot e Pacotes de NPM. Mas vale lembrar que a arquitetura não é recomendada para pequenos projetos, pois o aparato para sustentá-la é grande e exige um bom esforço inicial.

A Comunidade de Práticas de Desenvolvimento realizará encontros recorrentes no modelo de chapters e guilds. O objetivo é obter, dessa forma, uma maior sinergia dentro do time de desenvolvimento.