Conteúdo[Esconder][Mostrar]
- Então, o que é uma federação de módulos?
- Por que federação de módulos?
- Componentes principais da federação de módulos
Recursos principais da Federação de Módulos+-
- Excelente desempenho na web
- Desenvolvimento eficaz
- A capacidade de auto-cura e redundância
- Tratamento eficaz de dependências comuns
- Em vez de ter que reimplantar consumidores, implante código independente.
- Ao executar, importe o código de outras compilações.
- Experiência aprimorada do desenvolvedor, preservando a experiência do cliente
- Micro-frontends operam de forma monolítica.
- Conclusão
O conceito de micro frontends aplica microsserviços ao desenvolvimento de frontend.
A ideia é dividir o aplicativo ou site em partes menores, desenvolvidas de forma independente, que são conectadas durante o tempo de execução, em vez de criá-las como um monolito único e coeso.
O método permite criar outros componentes do aplicativo usando outras tecnologias e com equipes independentes.
A ideia é reduzir as despesas de manutenção relacionadas a um monólito típico segmentando o desenvolvimento dessa maneira.
Ao permitir que eles se concentrem em uma área específica de um aplicativo como uma equipe coerente, também possibilita novas formas de cooperação entre desenvolvedores de back-end e front-end.
Por exemplo, você pode ter uma equipe que seja exclusivamente responsável pelo recurso de pesquisa ou outro aspecto de um produto-chave que seja crucial para um negócio.
Graças à federação de módulos, você tem funcionalidade suficiente para lidar com o fluxo de trabalho que o micro interface mandatos de abordagem.
Este post analisará profundamente a arquitetura da federação de módulos, bem como seus principais recursos e padrões de aplicação.
Então, o que é um federação de módulos?
O design de federação de módulos do Javascript faz uso de partes reutilizadas em muitos aplicativos.
É um jargão bastante básico, mas eu simplesmente fiz parecer assim para parecer alegre.
Como todos nós estamos familiarizados com o compartilhamento de componentes em um aplicativo React, o Module Federation efetivamente atinge o mesmo objetivo na prática, com a exceção de que expõe dinamicamente os módulos do aplicativo para consumo por outros aplicativos.
A Federação de Módulos procura superar o problema de compartilhamento de módulos em um sistema distribuído, entregando esses elementos-chave compartilhados como macro ou micro, conforme desejado.
Isso é feito removendo-os de seus aplicativos e do fluxo de trabalho de compilação.
Por que federação de módulos?
Aqui estão alguns fatores que a federação de módulos pode lidar facilmente:
- Externos e DLLs (Bibliotecas de Link Dinâmico) eram tudo o que tínhamos ocasionalmente para compartilhar funcionalidades entre aplicativos. Tudo isso tornou o compartilhamento de código de escala extremamente desafiador.
- O NPM é lento.
- Quando dois programas separados compartilham um código crucial, eles devem ser dinâmicos e flexíveis.
Para que os aplicativos autônomos fiquem totalmente em seu próprio repositório, implantem separadamente e operem como seu próprio SPA independente, foi criada a Federação de Módulos.
Componentes principais da federação de módulos
Antes de mergulhar mais fundo, é importante discutir brevemente alguns novos conceitos que a federação de módulos traz.
- Host: Quando uma página é carregada, o build ou módulo inicializado inicialmente é chamado de host. Um provedor pode ser pensado como um host.
- Remoto: Um remoto é uma construção diferente que usa uma parte do host. Eles também são chamados de clientes.
- Host bidirecional: uma compilação do Webpack que funciona como um controle remoto que outros hosts consomem e um host que consome controles remotos.
- Federação de fornecedor: permite o compartilhamento de tempo de execução compartilhado declarativamente de dependências de módulo npm para um host ou remoto, independentemente do local de onde eles são carregados. Um dos principais problemas de desempenho com micro frontends é resolvido dessa maneira.
Padrões de aplicativo federado
Sistema de Design Evergreen
Uma das formas mais básicas de aplicativos federados é um “remoto permanente”, que é um controle remoto compartilhado como um “Design System” ou “biblioteca de componentes” que é distribuído e atualizado independentemente para todos os usuários.
Sem que cada equipe de aplicativo precise gastar tempo com revisões, isso pode ser útil para garantir que todos os sites online sigam a identidade corporativa mais recente.
Para projetar e colocar em prática os limites e procedimentos necessários para garantir atualizações contínuas e seguras, esse pode ser um ponto útil para as empresas começarem a considerar uma arquitetura de aplicativo federado.
A seguir estão alguns casos de uso em que remotos compartilhados implantados de forma independente podem ser adequados:
- Sistemas de design
- Conchas de aplicativos
- Bibliotecas de componentes
- Consumidores
- Kits de ferramentas compartilhados
- Modelos alternativos de distribuição para widgets usados por usuários internos ou externos
Compartilhamento de Módulo Multi-SPA
Reutilize recursos já exportados, como componentes, em diferentes aplicativos independentes de página única. Os benefícios incluem:
- Os consumidores recebem atualizações automatizadas
- A experiência do domínio permanece na equipe responsável por ela.
- Agiliza o procedimento de implantação porque não são necessárias versões de módulo separadas.
Federação orientada por shell
A federação orientada por shell inclui:
- Ao criar uma nova versão do produto, a equipe do Produto não espera que a equipe do Checkout conclua seu trabalho.
- Ao alternar os controles remotos, não há recarga de página.
- Quando necessário, o Shell oferece carregamento remoto lento e roteamento (nível superior).
- O roteamento entre remotos é possível por meio da federação de fornecedores, que permite a reutilização de pacotes npm usados com frequência.
- O Shell oferece a estrutura e outras dependências comuns que são reutilizadas pelos controles remotos carregados lentamente.
Federação multi-shell
Semelhante à federação orientada por shell descrita acima, mas usava shells diferentes.
Contém:
- um número de conchas
- White Label (coloque sua logo na proposta)
- Nem todos os controles remotos são exigidos pelo Shell B ou possuem implementações independentes.
Recursos principais da Federação de Módulos
Excelente desempenho na web
O problema com a composição normal do módulo NPM é que, à medida que o número de dependentes aumenta, o tamanho do aplicativo geralmente aumenta.
Para evitar o carregamento de pacotes quando seu aplicativo é carregado e carregá-los apenas quando necessário, o Module Federation oferece a capacidade de carregar pacotes lentamente.
Isso evita a necessidade de baixar módulos antes que eles sejam realmente necessários, o que melhora a velocidade do site.
Desenvolvimento eficaz
Cada projeto pode ser produzido e entregue isoladamente e pode ser executado por várias equipes, pois o Module Federation incentiva você a organizar seu aplicativo em projetos distintos para que você possa construí-los e implantá-los separadamente (e, portanto, em paralelo).
A capacidade de auto-cura e redundância
As dependências compartilhadas permitem que o Module Federation acompanhe todas as dependências do seu programa em um só lugar.
Dessa forma, mesmo quando um aplicativo não declara uma dependência ou quando há problemas de rede, ele ainda sabe o que precisa e pode fazer o download conforme necessário.
Tratamento eficaz de dependências comuns
Além disso, o Module Federation oferece gerenciamento de dependência superior, resolvendo efetivamente os requisitos de fornecedores e terceiros para que seu aplicativo nunca carregue mais de uma versão de uma biblioteca.
Em vez de ter que reimplantar consumidores, implante código independente.
O desenvolvedor está muito interessado em ter uma funcionalidade perene. Depois que a funcionalidade dependente exposta for alterada, não será mais necessário reinstalar os consumidores.
Devo admitir que este é um recurso altamente potente por si só, que precisará de um exame cuidadoso para evitar resultados inesperados.
Ao executar, importe o código de outras compilações.
Ao adotar o modelo de pacote NPM, podemos considerar aplicativos que usam Module Federation semelhantes a APIs, em vez de compartilhar código e pensar em “biblioteca”.
Da mesma forma que eles também podem receber a funcionalidade de outros aplicativos, os aplicativos da Web agora podem fornecer a funcionalidade para outros aplicativos.
Experiência aprimorada do desenvolvedor, preservando a experiência do cliente
Qualquer Desenvolvedor JavaScript ficará bastante confortável com o Module Federation porque é um plug-in do Webpack acessível a partir do Webpack versão 5.
Isso é realmente bastante forte e intrigante se pensarmos um pouco.
Ao utilizar carregadores de Webpack de terceiros, considere todos os componentes que Webpack pacotes, incluindo scripts, ativos, estilos, imagens, remarcações e muito mais.
Ao usar a Federação de Módulos, tudo isso pode ser compartilhado e federado.
Micro-frontends operam de forma monolítica.
É muito fácil adicionar funcionalidades compartilhadas ao seu aplicativo; basta importar o pacote normalmente ou usar o carregamento síncrono.
Como alternativa, o carregamento assíncrono pode ser usado para carregar apenas dependências quando necessário, utilizando o carregamento lento.
Conclusão
Neste post, discutimos a Federação de Módulos como uma escolha fantástica para desenvolver seu aplicativo de microfrontend.
Permitir que os aplicativos troquem e consumam funcionalidades em tempo de execução incentiva a escalabilidade, permitindo que várias equipes trabalhem em aplicativos independentes.
Quando a funcionalidade comum for alterada, você não precisará projetar e implantar seus consumidores, pois ela oferece suporte à funcionalidade permanente.
Seu programa funcionará como um monólito depois de configurado, o que é fantástico.
As dependências compartilháveis são usadas para reduzir o tamanho dos aplicativos. Como muitos desenvolvedores já estão familiarizados com o ambiente Webpack, a experiência do desenvolvedor é excelente.
Deixe um comentário