Artigos Alura Língua

Você sabe o que são MONOLITHIC FRONTEND e MICRO FRONTEND?

Michel Rosas
Michel Rosas19 de Setembro
Você sabe o que são MONOLITHIC FRONTEND e MICRO FRONTEND?

Hello, there! Você já ouviu falar em monolithic frontend e micro frontend? Essas duas abordagens aparecem bastante quando falamos sobre arquitetura de aplicações web, especialmente em projetos maiores.

Mas embora os dois estejam relacionados à maneira como o frontend é estruturado, existe uma diferença importante entre eles.

Quer entender melhor essa diferença? Check it out below!

Você sabe o que são MONOLITHIC FRONTEND e MICRO FRONTEND?

MONOLITHIC FRONTEND

Um "monolithic frontend" é um tipo de frontend em que toda a interface e suas funcionalidades fazem parte de uma única aplicação. Mesmo que o projeto tenha diferentes páginas, componentes ou funcionalidades, tudo é desenvolvido, testado e publicado como parte de um mesmo projeto.

Vamos imaginar, por exemplo, um e-commerce. Ele pode ter uma página inicial, catálogo de produtos, carrinho, checkout e área do usuário. Em uma arquitetura monolithic, todas essas partes fazem parte do mesmo frontend.

Isso até pode ser bastante simples de desenvolver e manter quando a aplicação ainda não é muito grande, mas conforme o projeto cresce, o código pode ficar mais complexo e uma alteração em uma parte da aplicação pode exigir um novo processo de build and deploy de todo o frontend.

MICRO FRONTEND

Já micro frontend (lembrando que a pronúncia correta, em inglês, é "MÁI-crou") é uma abordagem em que o frontend é dividido em partes menores e mais independentes, geralmente organizadas de acordo com diferentes funcionalidades ou áreas do negócio.

Voltando ao exemplo do e-commerce, podemos ter um micro frontend responsável pelo catálogo de produtos, outro pelo carrinho, outro pelo checkout e outro pela área do usuário. Cada parte pode ser desenvolvida, testada e até mesmo publicada de forma independente.

Ou seja, em vez de termos uma única aplicação enorme, como em um monolithic frontend, nós dividimos o sistema em partes menores que podem ter maior independência. Isso pode ser muito útil em aplicações grandes, principalmente quando diferentes equipes trabalham em diferentes áreas do produto.

Mas, por outro lado, micro frontends também adicionam complexidade, porque é necessário pensar como essas partes vão se comunicar, para compartilhar informações de maneira fluida e manter uma experiência consistente para o usuário.

Very easy, isn't it? Now let's take a look at some examples:

  • It's a monolithic frontend, we need to deploy the entire frontend even if we change just one feature. (Este é um frontend monolítico, nós precisamos fazer o deploy do frontend inteiro mesmo que alteremos apenas uma funcionalidade.)
  • The checkout team can deploy its micro frontend independently. (A equipe de checkout pode fazer o deploy do seu micro frontend de forma independente.)
  • The application started small, but the monolithic frontend has become difficult to manage. (A aplicação começou pequena, mas o frontend monolítico ficou difícil de gerenciar.)
  • We need to define how the micro frontends will communicate with each other. (Precisamos definir como os micro frontends vão se comunicar uns com os outros.)
  • All teams work on the same monolithic frontend codebase. (Todas as equipes trabalham na mesma base de código do frontend monolítico.)
  • Each team is responsible for a different micro frontend. (Cada equipe é responsável por um micro frontend diferente.)

Have you ever worked with a monolithic frontend? And with a micro frontend? (Você já trabalhou com um frontend monolítico? E com um micro frontend?)

Continue estudando com a gente no nosso artigo "Entrevista de emprego em inglês para UX DESIGNERS". See you!