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:
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.
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
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:
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_
