Você sabe o que são micro frontends? É comum no desenvolvimento web construirmos aplicações com um único frontend, no qual está toda a lógica de cliente da aplicação.

Contudo, conforme um aplicativo cresce, gerenciar essa aplicação começa a se tornar um desafio, com mais pessoas trabalhando, novas funcionalidades e cada vez mais problemas.

Mas não se desespere! Existe um conceito que pode nos ajudar, e muito, a organizar o desenvolvimento de aplicativos web de forma simples. São os micro frontends. Entenda mais a seguir!

O que são micro frontends

No backend da aplicação, nós temos o conceito de micro serviços, módulos separados responsáveis por realizar o processamento de informações variadas. Por exemplo, podemos ter um módulo apenas para o estoque, outro para financeiro, e por aí vai.

Esse é um conceito muito utilizado e difundido no backend, então, por que não trazer essa modularidade para o front? É aqui que entram os micro frontends.

Com a aplicação desse conceito, cada página pode se comportar como uma aplicação completa e independente, mesmo dentro de um aplicativo geral. Com isso, temos muito mais facilidade de desenvolvimento em times autônomos e corremos menos riscos de problemas de conflito, gerando mais produtividade e aplicações mais robustas e confiáveis.

Como funciona a sua aplicação

O uso dos micro frontends é variado e existem várias maneiras de aplicar esse conceito, dependendo também se a aplicação será iniciada do zero ou se será feito uma adaptação. Confira algumas formas de uso!

Single SPA

O Single SPA é um framework JS que permite que sejam desenvolvidos vários modelos de micro frontends usando as mais variadas tecnologias de desenvolvimento web. Por exemplo, você pode desenvolver uma Single SPA com React ou Angular.

Multiple SPA

O Multiple SPA é a criação de uma série de Single SPA, que será administrada pelo backend, compartilhando funcionalidades comuns e de navegação, sendo que sempre que o usuário navega entre páginas, um novo SPA é carregado.

Cada um deles é independente do outro, sem nenhum tipo de ligação direta, podendo trocar informações, mas sem um vínculo direto.

Web Components

Os Web Components já são velhos conhecidos dos desenvolvedores web e nos permitem criar componentes reutilizáveis, sendo possível importá-los dentro de aplicativos web. Dessa forma, podemos criar micro frontends com Web Components e utilizá-los dentro de páginas conforme necessário como widgets.

Por exemplo, um botão de checkout ou pagamento pode ser baseado em Web Components, tendo um desenvolvimento independente e apenas sendo importado para qualquer página onde se faça necessário.

Esse modelo de utilização é suportado em navegadores baseados em WebKit, sendo que os mais famosos são Firefox, Chrome e Opera.

Iframes

Por fim, uma outra maneira de aplicar esse conceito é o uso dos Iframes, códigos HTML independentes que permitem a renderização de elementos dentro de páginas distintas.

Um exemplo famoso é o uso para importação de vídeos do Youtube, porém, eles também podem ser utilizados com o conceito de micro frontends, para trazer qualquer tipo de mídia para a página.

Podemos incorporar mídias distintas na aplicação sem que elas façam parte do layout original da página.

O conceito de micro frontends permite que o desenvolvimento seja realizado por vários times independentes de forma coesa e autônoma, melhorando também o deploy da aplicação.

Ficou com dúvidas? Conhece alguma outra forma de aplicação? Deixe um comentário neste post!