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!

Uma empresa brasileira, madura, apaixonada por tecnologia, formada por profissionais com grande destaque no mercado e parceira dos nossos clientes e colaboradores.

Recently Posts

Ao longo dos anos, o McDonald’s passou por uma transformação digital significativa para aprimorar a experiência do cliente, fortalecer..
Ao adotar uma arquitetura de microserviços, um dos grandes dilemas que os desenvolvedores enfrentam é como compartilhar funcionalidades comuns..
Introdução Nos últimos anos, o desenvolvimento ágil tem ganhado tração em organizações de todos os tamanhos, e com ele..
Desde os primórdios do paradigma da Orientação Objeto, algumas práticas de design jamais caem em desuso, pelo contrário, devemos..

Pronto para começar?

Há mais de uma década, criamos soluções inovadoras através de métodos ágeis, nos adaptando as necessidades de nossos clientes de forma dinâmica e escalável. Entre em contato conosco para saber mais!

Scroll to Top
× Entre em contato conosco!