Ir para o conteúdo
Invillia Insights | For Infinite Learners
PT-BR | ENG
  • início
  • invillia
  • artigos
  • cases
  • e-books
  • notícias
  • webinars

Tech na veia_ Agilizando o desenvolvimento de apps modernas com microfrontends

Tech na veia_ Agilizando o desenvolvimento de apps modernas com microfrontends

Na Invillia, toda quarta-feira, ao meio dia, paramos uma hora para nos nutrir com as dicas, how-tos, boas práticas e tendências selecionadas por nossos especialistas em Product, Agile, Back e Front, Mobile, Quality, Security e Data. Uma troca de experiência vital para quem adora o novo. E essencial para que a inovação nunca pare. Se tecnologia está no sangue. A gente faz questão de deixá-la circulando cada vez mais_

NA VEIA_ Estendendo a ideia de microservices para o desenvolvimento frontend_

5 minutos de leitura

Deixamos aqui os principais aprendizados da edição apresentada por Luís Oliveira, especialista em desenvolvimento frontend na Invillia no ecossistema React, sobre o valor acrescentado de quebrar uma aplicação monolítica em pequenos pedaços mais focados em cada área de domínio.

O Conceito

O termo microfrontends apareceu pela primeira vez em ThoughtWorks Technology Radar. Estendendo os conceitos de microservices ao mundo do frontend. A ideia por trás dos microfrontends é pensar em um aplicativo como uma composição de features pertencentes a equipes independentes. Cada equipe tem uma área de negócio ou missão distinta com a qual se preocupa e se especializa. Uma equipe é multifuncional e desenvolve seus recursos de ponta a ponta, do banco de dados à interface do usuário.

Frontends monolíticos:

Frontends Monolíticos

Um pouco de história

Quando o desenvolvimento web começou, era muito mais difícil e complexo. Não existia back ou front, era uma aplicação totalmente acoplada, totalmente junta, totalmente monolítica. Tornando difícil e custoso manter quando escalava. E conforme o tempo foi passando, teve a grande revolução chamada AngularJS, que já trouxe um desacoplamento do front com o back, mas mesmo assim houve um crescimento exponencial do backend, conforme a aplicação ia crescendo chegava uma hora em que se tornava um monstro enorme. E isso originou os microserviços, que é separar o back em pequenas partes de uma forma totalmente escalável. Tivemos a quebra de aplicações backend, mas o frontend ainda continuava como monolítico.

Porque veio a ideia do microfrontend? Por que é necessário quebrar o frontend em pequenas partes de código como no backend? Pelo mesmo facto do backend. Começa a ficar gigante.

Os microfrontends surgiram então como um estilo de arquitetura em que aplicativos de frontend são entregues de forma independente e compõem um todo maior. Microfrontends não são uma lib ou framework. São uma metodologia para distribuir grandes aplicações em porções menores.

O resultado? Construção de apps modernas com múltiplas equipes que podem entregar funcionalidades independentemente.

microfrontends

Mas o microfrontend pode ser confundido com times em verticais. Cada um trabalha com front, com back e com seu banco de dados, mas ainda são grandes e centralizados. A responsabilidade ainda não é tão pequena como o microfrontend em si.

Microfrontends de fato

microfrontends

Agora começamos a ter uma ideia do que é um microfrontend de fato.

O que é um monolito frontend? É uma aplicação inteira feita numa tecnologia só, nesse caso React.

O que é que é um microfrontend? É quando temos vários pequenos pedaços da aplicação que são agnósticos da tecnologia.

É possível criar microfrontends das seguintes formas:

  • iFrames – você vai fazendo vários iFrames diferentes e junta todos eles dentro de vários containers HTML
  • NGINX – aqui tem vários servidores e todos eles são renderizados de forma separada, conseguindo ter as suas páginas em servidores diferentes
  • Web components – parecido com os iFrames, você tem vários microfrontends e várias divs de HTML que vão sendo renderizadas no seu container
  • Monorepos – aqui você tem várias pequenas aplicações e vai instanciando elas dentro de uma estrutura
  • Module Federation – a melhor opção para microfrontends

Quais as principais motivações para usar microfrontends?

  • Quero abandonar meu legado – separar o código antigo e estudar o que faz sentido sair ou não
  • Tecnologias agnósticas – testar tecnologias novas e não ter a preocupação de migrar o código inteiro
  • Trabalho em múltiplos times – poder trabalhar com diferentes equipes sem quebrar o seu código
  • Separar aplicação em partes – para um melhor gerenciamento, escalabilidade e flexibilidade
  • Compartilhamento de aplicações ou bibliotecas

Vamos entrar agora um pouco a fundo no Module Federation, que é uma feature do Webpack.

O Webpack e o seu Module Federation

O Webpack é um bundler (empacotador) de todas as tarefas que são desenvolvidas no frontend. É ele que faz a minificação de todos os arquivos da aplicação, otimiza imagens, valida a compatibilidade entre os navegadores. Todas essas tarefas são feitas baseado nas configurações que o desenvolvedor faz.

O Webpack pega todos os arquivos e faz a compatibilidade para todos os navegadores entenderem:

webpack

Vamos então à cereja no topo do bolo que é o Module Federation, uma feature presente no Webpack4 em beta e em produção no Webpack5. Ela permite que desenvolvedores compartilhem dependências entre aplicações, e definir quais módulos de outras aplicações serão consumidos e quais módulos serão expostos.

O que o Module Federation resolve:

  • Duplicação de bibliotecas
  • Bundle size
  • Performance
  • Code splitting

Depois de todos esses conceitos, temos os componentes remotos, que são componentes especiais que conseguem carregar outros componentes que não estão no mesmo codebase na web.

Mais info e fontes:

  • https://github.com/module-federation/module-federation-examples
  • https://micro-frontends.org/
  • https://github.com/lfoliveir4/react-microfrontends-boilerplate

Na Invillia temos o know-how e a experiência nas tecnologias e metodologias mais state-of-the art do mercado, aplicando a melhor a cada caso. Estamos sempre estudando, aprimorando conhecimentos, antecipando o que vem aí, testando, indo mais além. Para criar e continuamente evoluir junto de quem está transformando seus mercados, os produtos e serviços digitais mais inovadores, resilientes, robustos, escaláveis e com a melhor experiência de utilização. Engaged by data, people and action_

Vamos construir o próximo juntos?

Compartilhe isso:

  • Clique para compartilhar no Twitter(abre em nova janela)
  • Clique para compartilhar no Facebook(abre em nova janela)
  • Clique para compartilhar no LinkedIn(abre em nova janela)

Relacionado

Postado em 19/05/2021

invillia

linkedin logo instagram logo youtube logo twitter logo medium logo

Categorias

  • A Life In My Day 27
  • Agilidade 45
  • Artigos 95
  • Best Minds, Best Where 52
  • Business Expansion 5
  • Cases 14
  • Digital Workplace 17
  • E-book 6
  • Eventos 5
  • Management 3.0 9
  • Notícias 34
  • Produtos Digitais 39
  • Sem categoria 8
  • Tech na Veia 18
  • Vídeos 12
  • Webinars 2

Receba nosso e-book

What makes game-changers love our

Deixe um comentário Cancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos relacionados:

Global Growth Framework™️: ainda maior para atender a todos os inovadores.

Technaveia_ Testes Instrumentados no Android 

Exportando inovação do Brasil para o mundo tech