🎨 Micro-Frontends

Talvez você já tenha ouvido falar sobre o conceito de microserviços. Aquele negócio de dividir o back-end em partes menores, cada um com sua responsabilidade (SOLID). Porém, no front-end ainda é muito comum o uso de monolitos.

Mas e se quisermos dividir também o front-end em partes menores e independentes, pois o desenvolvimento de softwares para web está em constante mudança, para acompanhar as crescentes demandas de escalabilidade, manutenção e performance. Nesse sentido, uma das grades evoluções é o conceito de Aplicações Micro Front-end.

A técnica de micro front-end se baseia na fragmentação de projetos extensos e complexos (conhecidos como monolitos) em elementos menores e mais simplificados. Esses elementos podem ser desenvolvidos, implantados e mantidos independentemente uns dos outros, enquanto são apresentados ao usuário final como um produto único e integrado.

Micro frontends são uma abordagem de desenvolvimento frontend que divide uma aplicação em componentes menores, independentes e reutilizáveis, que podem ser desenvolvidos, testados e implantados separadamente. Essa abordagem, inspirada nos microserviços do backend, permite que diferentes equipes trabalhem em partes distintas da aplicação, acelerando o desenvolvimento e melhorando a escalabilidade.

Micro front-end é uma abordagem de arquitetura de software para desenvolvimento web inspirada em padrões de micro-serviços. Ou seja, estamos construindo aplicativos componíveis de forma orquestrada e escalável usando uma plataforma de desenvolvimento orientada a componentes (CDD - Component-Driven Development). Ao longo da minha carreira, testemunhei os desafios das arquiteturas monolíticas de front-end e o poder transformador dos microfront-ends.

Tip

"Ajudar desenvolvedores a trabalharem de forma mais inteligente e rápida, com uma abordagem compartilhável e de blocos de construção para criar experiências consistentes é central para o foco moderno e centrado no cliente da Dell Digital. Compartilhar componentes capacita os desenvolvedores a desenvolver e lançar recursos de forma mais rápida e consistente. Eles podem publicar e acessar componentes e recursos de UX aplicáveis em diversas experiências digitais.

Antes, os desenvolvedores ficavam realmente frustrados por ter que escrever aparentemente um milhão de linhas de código repetidamente, descobrindo detalhes e fazendo os testes. Com componentes prontamente disponíveis, agora podem se desenvolver e entregar em um quarto do tempo que levavam antes. Agora eles podem investir em um desenvolvimento de recursos mais inovadores." Líder de Transformação Tecnológica na Dell, Bit Platform

Micro frontends são uma abordagem arquitetônica poderosa para gerenciar a complexidade de aplicações empresariais modernas. Ao atender aos principais requisitos de desenvolvimento desacoplado, versionamento independente, atualizações incrementais, implantações independentes, integração em tempo de execução, componentes compartilhados, desenvolvimento colaborativo e equipes autônomas, as organizações podem alcançar uma arquitetura frontend altamente modular e escalável. A Bit and Webpack Module Federation oferece um conjunto robusto de ferramentas para apoiar esses objetivos, capacitando as equipes a inovar mais rápido e entregar experiências excepcionais ao usuário em um cenário digital em rápida evolução.

Micro frontends estão mudando fundamentalmente a forma como construímos e escalamos frontend. Ao dividir frontends monolíticos em partes menores e mais gerenciáveis, as equipes podem desenvolver, implantar e atualizar componentes de frontend de forma independente, o que aumenta a escalabilidade e a flexibilidade.

À medida que as aplicações empresariais se tornam complexas, adotar micro frontends é fundamental para manter a agilidade e acelerar os ciclos de desenvolvimento. As aplicações de micro front-end estão transformando a forma como abordamos o desenvolvimento web. Ao dividir o front-end monolítico em partes menores, ganhamos vantagens em escalabilidade, manutenção e velocidade de desenvolvimento. Esses benefícios capacitam equipes a trabalhar de forma eficiente, colaborativa e a manter a competitividade em um cenário digital em constante evolução.

Antes do Desenvolvimento Orientado por Componentes (CDD) e do desenvolvimento de aplicativos composáveis (CAD - Composable App Development), a cadeia de ferramentas monolítica orientada a projetos tornava o processo de escalar o desenvolvimento de múltiplos produtos e equipes muito desafiador. Cada aplicação foi desenvolvida como um projeto de código compartimentado, com todas as suas funcionalidades como implementação interna de código, altamente acoplada a um projeto específico, dificultando separar, compartilhar e atualizar diferentes partes da aplicação em todo o sistema.

Soluções corrigidas exigiam muita flexibilização de arquitetura, ferramentas adicionais construídas e integradas, e criavam problemas complexos como compartilhamento de código, controle de versões, gerenciamento de dependências, atualizações etc. Cada projeto ficou mais difícil de escalar à medida que mais recursos e desenvolvedores se juntaram, enquanto as organizações não tinham uma forma eficaz de compartilhar componentes, colaborar em mudanças e orquestrar atualizações. Como resultado, os desenvolvedores tiveram que escrever o mesmo código repetidamente, levando a um enorme desperdício de tempo e recursos e a experiências de produto inconsistentes. Como resultado, as organizações experimentaram uma diminuição do ROI no desenvolvimento de software.

CDD é uma abordagem evolutiva componível para o desenvolvimento moderno de software. Ele define um padrão de design arquitetônico que resolve desafios fundamentais que atrasaram o desenvolvimento de software por décadas, por meio da composabilidade e modularidade para o desenvolvimento de aplicações.

Base de plataforma composável OSS: Composable Platform

CDD define uma arquitetura componível onde as aplicações são compostas como Lego por meio de blocos de construção menores, independentes e reutilizáveis — componentes. CDD é uma abordagem baseada em reutilização; os componentes são compartilhados e gerenciados como blocos de construção e disponibilizados para todas as equipes e produtos da organização, para serem reutilizados e orquestrados de forma eficiente em escala.

Os componentes podem ser desde interfaces simples até recursos, micro-frontends, experiências completas do usuário, aplicativos, utilitários e até lógica front-end e backend. Ao dividir o desenvolvimento em componentes fracamente acoplados, o desenvolvimento pode ser distribuído entre as equipes e os componentes se tornam ativos reutilizáveis que são compartilhados e orquestrados entre os produtos.

Os benefícios da composabilidade e do CDD são revolucionários no curto e longo prazo:

1. Velocidade de entrega: Componentes reutilizáveis permitem que desenvolvedores acelerem o desenvolvimento e reduzam o tempo de desenvolvimento em 80% em novos produtos — pois não precisam reescrever código, tomar decisões e repetir o trabalho repetidamente (veja Estudo de Caso Dell com Bit).

2. Consistência do produto: Componentes reutilizáveis proporcionam consistência ideal no código, design e experiência do usuário em todos os produtos e experiências digitais da organização.

3. Eficiência e ROI: Com componentes reutilizáveis, os desenvolvedores não precisam escrever o mesmo código repetidamente, reduzindo os custos de desenvolvimento por aplicativo em até 80%. Cada componente é construído uma vez e se torna um ativo compartilhado com valor composto (veja estudo de caso sobre ROI).

4. Equipes autônomas e entrega rápida — Equipes especialistas em domínio podem possuir, desenvolver e enviar componentes de forma autônoma para diferentes responsabilidades de negócios (por exemplo, "UI", "Pagamentos" etc.), permitindo entrega rápida e resposta rápida a necessidades emergentes.

5. Arquitetura escalável e mantível — Um sistema de aplicativo componível construído com componentes é altamente modular e pode ser mais facilmente mantido e escalado. Com uma plataforma CDD, os componentes podem ser compartilhados, atualizados e orquestrados em todo o sistema.

• Benefícios adicionais incluem um planejamento mais inteligente — quando surgem novas necessidades, arquitetos e desenvolvedores decidem se ampliam os componentes existentes ou criam novos;
• Produtos de Maior Qualidade — O reuso de componentes previne a maioria dos bugs e erros, e a qualidade dos produtos de software melhora significativamente;
• Personalizações de experiência — cada experiência pode ser facilmente customizada com diferentes versões para otimizar diferentes jornadas do usuário, mesmo em grande escala;
• colaboração multifuncional — designers, desenvolvedores e todas as partes interessadas podem planejar e participar ativamente do processo de desenvolvimento diretamente sobre componentes reais do aplicativo;
• agilidade de desenvolvimento — CDD melhora a agilidade ao dividir decisões e entregas para o nível de componente;
• governança e visibilidade — os líderes obtêm uma visão de raio-x dos ativos tecnológicos disponíveis da organização e podem acompanhar o uso e o impacto dos componentes e iniciativas na organização;
• Padronização e modernização — com CDD, o desenvolvimento é padronizado desde as tecnologias usadas pelos componentes até seu processo de lançamento. Novos recursos podem ser adicionados a aplicativos legados em um processo sempre verde;
• Integração mais rápida — Integrar desenvolvedores em novos produtos é mais rápido quando eles só precisam trabalhar em componentes.

Embora o CDD possa existir em pequenos bolsões sem uma plataforma de suporte, a compostabilidade em escala requer uma variedade de soluções para maximizar o ROI e garantir uma experiência sem atritos.

O desenvolvimento de CDD e aplicativos componíveis exige uma longa lista de capacidades para ser bem-sucedido e escalável. Como as ferramentas antigas não foram criadas para desenvolvimento orientado a componentes desde o início, o esforço, o tempo, o custo e o risco de complexidade de construir e manter uma solução alternativa completa são enormes.

Embora o conjunto de ferramentas de desenvolvimento orientado a projetos do passado não ofereça as capacidades necessárias para facilitar esse novo tipo de desenvolvimento, plataformas dedicadas e cadeias de ferramentas como a Bit fornecem um conjunto completo de soluções em um único fluxo de trabalho escalável.

Uma plataforma dedicada estabelece as bases para que CDD e composabilidade sejam aplicadas e escaladas com sucesso, ao mesmo tempo em que fornece todas as capacidades necessárias em um único fluxo de trabalho. Isso reduz o tempo e o custo de construir e corrigir ferramentas para resolver uma longa lista de capacidades (que pode levar anos e milhões de dólares), e elimina o risco de enfrentar desafios e questões complexas.

Capacidades necessárias de uma plataforma de CDD e composição de aplicativos: Para permitir o desenvolvimento bem-sucedido de aplicações por meio de componentes componíveis e escalar esse processo de forma eficaz na organização, é necessária uma longa lista de capacidades críticas.

Component-based é uma abordagem de arquitetura de software onde os sistemas são construídos a partir de unidades modulares e reutilizáveis chamadas componentes. Cada componente é uma entidade funcional independente, encapsulando dados, lógica de negócio e comportamento, podendo ser desenvolvido, testado e mantido de forma isolada. O principal objetivo do component-based é promover reutilização, manutenção facilitada, escalabilidade e separação de preocupações. Em vez de criar sistemas como blocos monolíticos de código interdependente, o component-based permite montar aplicações como se fossem conjuntos de peças de Lego, onde cada peça realiza uma função específica e pode ser substituída ou atualizada sem impactar o todo, desde que sua interface permaneça a mesma.

Na prática, os componentes possuem interfaces bem definidas e comunicam-se entre si de forma controlada, muitas vezes por meio de eventos, injeção de dependência ou contratos formais de dados. Isso os torna altamente portáveis e adaptáveis a diferentes contextos. No front-end, esse conceito é amplamente adotado em frameworks como React, Angular e Vue, onde cada parte da interface — como botões, formulários ou tabelas — é um componente reutilizável. No back-end, esse paradigma também pode ser aplicado através de serviços encapsulados ou bibliotecas modulares que se integram em uma arquitetura maior. Em ambientes mais complexos, os componentes podem evoluir para microcomponentes ou micro frontends, refletindo a mesma filosofia de modularidade.

Além disso, o desenvolvimento baseado em componentes favorece a testabilidade e o versionamento granular, pois cada unidade pode ser testada isoladamente e evoluída de forma segura. Também incentiva a colaboração entre equipes, permitindo que diferentes grupos trabalhem em diferentes componentes sem conflitos, o que é crucial em projetos grandes e distribuídos. No entanto, adotar component-based exige disciplina em design, pois é necessário definir interfaces estáveis, evitar acoplamentos desnecessários e gerenciar bem a comunicação entre os módulos. Quando bem aplicado, o component-based resulta em sistemas mais flexíveis, organizados e fáceis de escalar, permitindo evoluções constantes sem comprometer a estrutura já existente.

[Microfrontend] Bit

A Bit e a Bit Cloud oferecem uma solução completa para equipes inovadoras que desenvolvem produtos de software componíveis. Como a plataforma líder do setor em desenvolvimento orientado a componentes, ela impulsiona o desenvolvimento de aplicativos componíveis em larga escala para milhares de equipes e empresas da Fortune 500.

Abaixo está um breve resumo das principais capacidades necessárias para uma plataforma CDD fornecido pela Bit.

1. Conjunto de ferramentas de desenvolvimento orientado a componentes: Para que os componentes se tornem blocos de construção e possam ser compartilhados entre produtos, eles devem ser desacoplados da implementação interna de um projeto específico. O conjunto de ferramentas orientado por projetos do passado nunca foi criado para esse propósito, o que torna esse processo extremamente difícil de alcançar.

O Bit fornece um conjunto completo de ferramentas OSS para o desenvolvimento e composição de componentes componíveis, como blocos de build de aplicações "containerizados" e gerenciados, incluindo:

Componente de bit: Um componente de bit funciona como um "contêiner" para qualquer unidade de software. Inclui tudo o que é necessário para desenvolver, construir, usar, atualizar e gerenciar o componente de forma independente.

Um componente Bit pode ser um app, um recurso, uma micro-frontend, uma experiência do usuário, uma parte de interface ou até mesmo um serviço backend ou um script de CLI. Cada componente pode ser desenvolvido e usado em qualquer lugar.

Espaço de trabalho de componentes: O espaço de trabalho do Bit permite que desenvolvedores criem, gerenciem e compusam componentes. Ele pode ser gerado dentro ou fora de qualquer base de código existente. O espaço de trabalho oferece uma experiência simples e consistente para desenvolver, versionar, testar, gerenciar e compor componentes por meio de dependências, sem as limitações de um repositório e sem paralisar configurações manuais. Uma interface integrada e um servidor de desenvolvimento rápido proporcionam um feedback visual ao vivo agradável.

Ambientes de desenvolvimento de componentes: O Bit permite que desenvolvedores definam e reutilizem ambientes de desenvolvimento para seus diferentes componentes a fim de desenvolver, construir, testar, aplicar lint etc. de cada componente. Ambientes também são componentes, podendo ser personalizados, compartilhados e reutilizados. Cada componente tem um ciclo de vida totalmente independente do desenvolvimento, e o desenvolvimento se torna mais padronizado.

2. Controle do código-fonte dos componentes e versionamento: Para que o CDD seja aplicado, o código-fonte de cada componente deve ser controlado de forma independente e cada componente deve ser versionado de forma independente. No entanto, as ferramentas anteriores orientadas por projetos simplesmente não foram feitas para esse trabalho. Sem um conjunto dedicado de ferramentas CDD, uma quantidade incrível de trabalho e tempo será desperdiçada nesse processo, de uma forma inescalável.

Com o Bit, o código-fonte de cada componente é gerenciado e controlado separadamente. Cada componente é versionado de forma independente e pode ser atualizado junto com outros componentes que dependem dele. Tudo em um fluxo de trabalho simples, consistente e escalável. Recursos do Bit Cloud como "comparar componentes" e "revisão de alterações" fornecem um fluxo de trabalho completo para sugerir, revisar e colaborar em mudanças em componentes em toda a organização.

3. Gestão de dependências: automatizada, inteligente e consistente: À medida que a organização constrói e compartilha componentes, elas são compostas como dependências e réus. À medida que seu gráfico de componentes e dependências cresce, rapidamente se torna difícil gerenciar suas dependências e evitar problemas dolorosos.

O bit oferece um mecanismo único para definir e gerenciar dependências automaticamente de forma simples e consistente. Em vez de se afogar em arquivos de configuração e enfrentar problemas complexos como dependências ausentes ou conflitantes, o Bit oferece detecção automática de dependências, gerenciamento consistente de versões e políticas inteligentes de atualização para ajudar a agilizar e escalar o gerenciamento de dependências do workspace local para todo o sistema de aplicação.

4. Embalagem e distribuição: Sem uma solução dedicada, empacotar e distribuir componentes independentes é uma tarefa desafiadora e ainda mais difícil de escalar. Exige muito trabalho manual e patches para empacotar, publicar, manter e gerenciar muitos componentes pequenos.

Com o conjunto de ferramentas CDD dedicado da Bit, cada componente é versionado de forma independente e empacotado de forma integrada como parte do seu fluxo de desenvolvimento, podendo ser distribuído com artefatos construídos, entregues e armazenados. Cada componente automaticamente se torna um pacote publicado à medida que é exportado, independentemente de onde e como você o desenvolve e sua arquitetura.

5. Plataforma central para compartilhamento e colaboração: Uma plataforma central é fundamental para o sucesso de um CDD, desenvolvimento de aplicativos componíveis e um sistema de componentes compartilhados. Por meio do hub, os componentes são organizados, compartilhados e disponibilizados para todos na organização. Deve fornecer muitas soluções adicionais necessárias, como descoberta, um processo para sugerir e colaborar em mudanças de componentes, a orquestração de atualizações em toda a organização e análise e controle de componentes.

Construir essa plataforma é um desafio esmagador para qualquer organização. Mais de 5 anos e dezenas de milhões de dólares foram investidos no Bit Cloud, a plataforma mundial de desenvolvimento de produtos compáteis #1 completa. Ele oferece todas as capacidades necessárias para que as organizações aproveitem e escalem CDD, compartilhem componentes e colaborem — em um só lugar. Ele vem pronto para empresas com os mais altos padrões de segurança e conformidade, e impulsiona o desenvolvimento para grandes equipes globais.

Vamos explorar os principais requisitos para implementar com sucesso micro frontends em 2024. Também vamos explorar como a Bit and Webpack Module Federation pode ajudar a atender a esses requisitos e escalar arquiteturas micro frontend em grandes organizações. Este guia vai guiá-lo pelos fundamentos para construir uma arquitetura de microfrontend componível, escalável e de alto desempenho em sua organização, incluindo colaboração e atualizações em diversas aplicações.

Essa abordagem pode resultar em vários problemas, como falta de escalabilidade, dificuldades na manutenção de uma grande base de código e ciclos de desenvolvimento mais lentos.

Por outro lado, aplicações de micro front-end, dividem o front-end em partes menores, independentes e que podem ser implantadas de forma separada, assim como os micro-serviços fazem para o back-end.

Por exemplo: uma aplicação monolítica tradicional, a parte de front-end geralmente é uma única base de código responsável por toda a interface do usuário (conhecido como monólito). Considere a adoção de aplicações de micro front-end para aproveitar seu potencial, adotando assim uma abordagem moderna à criação de aplicações web. Nada melhor que detalhar essa explicação com um bom exemplo. A imagem abaixo (figura 1), demonstra um ótimo cenário para entendermos melhor este conceito:

Cada parte é conhecida como um micro front-end e normalmente representa um recurso ou componente específico da interface do usuário. Esses micro front-ends podem ser desenvolvidos, testados e implantados por diferentes equipes, permitindo agilidade, flexibilidade e ciclos de desenvolvimento mais rápidos.

Benefícios das Aplicações de Micro Front-end:

1. Escalabilidade: aplicações micro front-end são altamente escaláveis. Você pode construir e implantar novos recursos ou atualizações em recursos existentes sem afetar toda a aplicação. Isso significa que você pode escalar sua aplicação de forma incremental, adicionando novas funcionalidades à medida que seu projeto evolui.

2. Desenvolvimento ágil: aplicações de micro front-end possibilitam ciclos de desenvolvimento mais rápidos. As equipes podem trabalhar em seus micro front-ends de forma independente, reduzindo gargalos e permitindo desenvolvimento em paralelo. Isso resulta em um tempo mais curto para levar novos recursos e atualizações ao mercado.

3. Manutenção: bases de código menores e isoladas são mais fáceis de gerenciar e manter. Cada equipe pode ser responsável por seu micro front-end, tornando mais simples entender e solucionar problemas. Essa modularidade também facilita a integração de novos desenvolvedores.

4. Colaboração: equipes podem trabalhar em paralelo, proporcionando um processo de desenvolvimento mais ágil e colaborativo. Cada equipe concentra-se em seu próprio micro front-end, garantindo que ele funcione corretamente e se integre ao restante da aplicação.

5. Reutilização: aplicações micro front-end podem ser reutilizados em diferentes partes do seu aplicativo, levando a interfaces de usuário mais consistentes e a eliminação de códigos duplicados.

6. Tecnologia agnóstica: Os micro front-ends podem ser desenvolvidos com diferentes tecnologias, frameworks ou linguagens de programação. Isso permite que as equipes escolham as ferramentas e tecnologias que melhor atendam às suas necessidades, garantindo que a aplicação permaneça flexível e adaptável.

Como implementar Aplicações de Micro Front-end: Para implementar aplicações de micro front-end, você pode usar várias técnicas e ferramentas, como:

1. Module Federation: podemos utilizar o plugin de federação de módulos do webpack para carregar micro front-ends dinamicamente. Micro-frontends com Module Federation oferecem uma abordagem escalável e modular para construir aplicações web. Ao dividir as aplicações em módulos independentes, os desenvolvedores podem trabalhar de forma autônoma e aproveitar o poder do carregamento dinâmico de módulos. Podemos utilizar Micro-frontends com Federação de Módulos e demonstrar sua implementação usando React e Vite. Comece a experimentar essa arquitetura para construir aplicações web flexíveis, manuteníveis e eficientes.

2. Componentes da web: usar componentes da web para criar elementos de interface reutilizáveis que podem ser incorporados em diferentes micro front-ends.

3. Inclusões no lado do servidor (SSI): combinar micro front-ends no nível do servidor, possibilitando a montagem de conteúdo dinâmico.

4. API Gateway: implementar um gateway de API para encaminhar solicitações para o micro Front-end apropriado.

5. Aplicações de contêiner: construir uma aplicação de contêiner que gerencia a composição dos micro front-ends.

Principais Requisitos para a Arquitetura Micro Frontend:

1. Desenvolvimento Desacoplado: O desenvolvimento desacoplado em arquitetura micro frontend permite que cada micro frontend seja desenvolvido, implantado e mantido de forma independente. Cada uma, representando uma característica distinta, pode usar sua própria pilha tecnológica, cronograma de lançamento e processos. Essa autonomia reduz as dependências das equipes, permitindo inovação e iteração mais rápidas.

Em grandes empresas, frontends frequentemente se tornam monolíticos e difíceis de gerenciar, onde mudanças podem impactar todo o sistema, retardando o desenvolvimento e aumentando riscos. O desenvolvimento desacoplado divide o frontend em partes gerenciáveis, permitindo que as equipes:

• Inove Mais Rápido: Escolha as ferramentas e frameworks ideais, acelerando o desenvolvimento.
• Reduzir riscos: Isole as mudanças para minimizar o impacto na aplicação mais ampla.
• Escale de forma eficiente: Escale independentemente cada micro frontend, apoiando o crescimento orgânico.

Frameworks de microfrontend permitem criar unidades menores e independentes para sua aplicação frontend, que permitem focar no desenvolvimento de partes independentes da sua aplicação como componentes. Essas pequenas unidades podem ser desenvolvidas, testadas, versionadas e implantadas por equipes separadas. Isso ajudará você a aprimorar seu trabalho paralelo e minimizar o risco de gargalos nos pipelines de desenvolvimento.

A Bit oferece uma plataforma de nível empresarial para implementar desenvolvimento desacoplado em micro frontends. Veja como Bit facilita esse processo: Ele permite que desenvolvedores encapsulem recursos frontend como componentes individuais, desenvolvidos de forma independente e versionados. Esse isolamento permite que as equipes atualizem e lancem novas versões sem afetar outras partes do aplicativo. Construindo uma solução escalável de micro frontends com federação de módulos e bits.

Usaremos a Federação de Módulos e o Bit para implementar uma integração em tempo de execução de Micro Frontends. O Bit oferece modelos pré-configurados para nosso aplicativo host e módulos remotos. Também facilita incrivelmente o compartilhamento de componentes entre micro frontends.

Por exemplo, uma equipe pode atualizar uma micro frontend baseada em React enquanto outra trabalha simultaneamente em um componente Angular, com ambos gerenciados de forma independente.

Saiba mais: Criar componentes | Bit - Um componente é um módulo reutilizável, controlado por código-fonte independente, que é armazenado em escopos e mantido em... bit.dev

Exemplo: Um componente React para uma página de perfil de usuário pode ser desenvolvido isoladamente dentro do ambiente do Bit. Ele pode ser versionado, testado e implantado independentemente do restante da aplicação, garantindo que quaisquer atualizações desse componente não atrapalhem outras micro frontends.

Host Apps and Remote Modules: O aplicativo host e os módulos remotos foram gerados usando modelos pré-configurados (disponibilizados pela Bit):

npx @teambit/bvm install # install Bit
bit init my-modfed-solution # create a new Bit workspace
cd my-modfed-solution

Adicione o seguinte ao seu para disponibilizar os templates do ModFed no seu espaço de trabalho: workspace.jsonc

"teambit.generator/generator": {
    "envs": [
      "frontend.module-federation/envs/mf-react-env"
    ]
  }

Execute os seguintes comandos:

bit install # install the workspace dependnecies
bit create modfed-remote-mfe storefront # generate a remote module
bit create modfded-remote-mfe blog
bit create modfed-host-app shell-app # generate a host app

Execute para listar os modelos ModFed disponíveis: bit templates

Para listar os aplicativos disponíveis (e módulos remotos), execute:

bit app list

A saída lista os IDs dos componentes e seus nomes correspondentes de app:

┌─────────────────────────────────────────────────┬─────────────────────┐
│ id                                              │ name                │
├─────────────────────────────────────────────────┼─────────────────────┤
│ bit-bazaar.storefront/storefront                │ storefront          │
├─────────────────────────────────────────────────┼─────────────────────┤
│ bit-bazaar.blog/blog                            │ blog                │
├─────────────────────────────────────────────────┼─────────────────────┤
│ bit-bazaar.shell-app/shell-app                  │ shell-app           │
└─────────────────────────────────────────────────┴─────────────────────┘

Você pode rodar os apps localmente usando o nome deles:

bit run storefront

Shared Dependencies: Nossa solução consiste em muitas dependências compartilhadas configuradas para serem excluídas dos pacotes de aplicativos e carregadas como blocos separados. Essa é uma das forças da ModFed. Isso nos permite otimizar o tamanho do nosso bundle, manter a consistência e evitar conflitos entre versões do mesmo módulo.

Nossa lista de dependências compartilhadas é mantida como um componente Bit compartilhado entre projetos (o aplicativo host e os módulos remotos). Isso permite que as equipes mantenham consistência enquanto trabalham de forma independente.

A lista de dependências compartilhadas consiste principalmente em libs em tempo de execução e um sistema de projeto:

O componente 'dependências compartilhadas' (que lista os deps de shred) é usado pela configuração do app host e pela configuração dos módulos remotos

Por exemplo: https://bit.cloud/bit-bazaar/shell-app/shared-dependencies/~code/shared-dependencies.ts

/**
 * @filename: storefront.bit-app.ts
 * @component-id: bit-bazaar.storefront/storefront
*/

import { MfReact } from '@frontend/module-federation.react.apps-types.mf-rspack';
/* import the 'shared dependnecies' components */
import { shellAppSharedDependencies } from '@bit-bazaar/shell-app.shared-dependencies';


export default MfReact.from({
  name: 'storefront',
  clientRoot: './storefront.app-root.js',
  moduleFederation: {
    exposes: {
      // ...
    },
    shared: shellAppSharedDependencies,
  }
});

Um Sistema de Design Compartilhado: Nossa biblioteca de componentes e tema são baseados no Material UI. Eles são mantidos no escopo de "design" e compartilhados entre Micro Frontends.

Contexto Compartilhado: O 'Provedor de Tema', 'Provedor de Autenticação' e outros componentes de contexto fazem parte do "app anfitrião" ou "app shell". Por isso, eles são mantidos pela equipe do "app shell".

Equipes que trabalham em MFEs não precisam se preocupar com autenticação, autorização ou qualquer outra funcionalidade compartilhada. A equipe "anfitriã" ou "shell" fornece tudo para eles.

Por exemplo, se o time Storefront precisar implementar funcionalidades baseadas na autenticação do usuário, eles explorariam o escopo do 'app shell' e buscariam o "SDK" correto.

O contexto e o gancho da "Auth"

Roteamento e navegação: O aplicativo shell oferece uma espécie de "sistema de plugins" onde Micro Frontends (módulos remotos) podem se integrar a ele de maneiras que vão além de um simples link. Ele faz isso fornecendo os tipos para cada "plugin".

O tipo compartilhado de "item de navegação"

Por exemplo, um módulo remoto pode implementar uma interface de "item de navegação" que inclui suas opções de navegação.

Isso pode então ser exposto para o app shell (que o carregará em tempo de execução):

/**
 * @filename: blog.bit-app.ts
 * @component-id: bit-bazaar.blog/blog
*/

export default MfReact.from({
  name: 'blog',
  clientRoot: './blog.app-root.js',
  moduleFederation: {
    exposes: {
      /** 
       * the MFE navigation exposed to be loaded 
       * by the shell app at runtime
       **/
      './blognav': './navitem.js',
       /**
        * the main chunk of the 'blog' MFE
        **/
      './blog': './blog.js',
    },
    shared: shellAppSharedDependencies,
  },
  deploy: Netlify.deploy(netlifyConfig),
});

O roteamento é tratado no nível que se adequa ao módulo. Por exemplo, o app shell só gerencia o roteamento para e . Ele não determina o roteamento "dentro" de cada MFE (como )./blog/*/storefront/*storefront/products

/**
 * @filename: shell-app.tsx
 * @component-id: bit-bazaar.shell-app/shell-app
*/

export function ShellApp() {
  return (
    <BrowserRouter>
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route index element={<Homepage />} />
              <Route path="store/*" element={<Store />} />
              <Route path="blog/*" element={<Blog />} />
              <Route path="*" element={<div>Not Found</div>} />
            </Route>
          </Routes>
    </BrowserRouter>
  );
}

Assim, os módulos remotos, como o 'blog', não são responsáveis pelo roteamento (o roteamento para o blog MFE) — apenas para rotas aninhadas./blog/*

/**
 * @filename: blog.tsx
 * @component-id: bit-bazaar.blog/blog
*/

export function Blog() {
  return (
      <Routes>
        <Route path="articles" element={<ArticlesPage />} />
        <Route path="categories" element={<CategoriesPage />} />
      </Routes>
  );
}

DevX: Para a experiência máxima de desenvolvedor, cada equipe usa um componente "Plataforma" para consumir uma versão imutável do app shell e possivelmente outros módulos remotos.

Isso fornece aos MFEs o contexto adequado para rodar em desenvolvimento. Ele garante uma experiência de desenvolvimento consistente e fluida, ao mesmo tempo em que aplica corretamente permissões e controle de acesso (por exemplo, a equipe do 'blog' não pode modificar o MFE 'loja' ou o aplicativo shell).

https://bit.cloud/bit-bazaar/storefront/storefront-platform/~code/shell-platform.bit-app.ts

O 'shell-app' como uma dependência imutável da 'plataforma de loja' usada pela equipe de 'loja de loja' para o desenvolvimento de 'loja de loja' em seu contexto completo

Por exemplo, a equipe 'storefront' consegue rodar o MFE 'storefront' em seu contexto completo (app shell e até outros MFEs) rodando o app 'platform' mantido por eles (apenas para desenvolvimento):

bit run storefront-platform

Você pode gerar um componente 'Platform' usando o modelo fornecido pelo ambiente ModFed (aquele configurado como gerador no início deste blog):

bit create modfed-platform my-platform

2. Ambientes de Desenvolvimento Personalizados: O Bit suporta ambientes de desenvolvimento personalizados adaptados a diferentes pilhas tecnológicas.

Múltiplos Ambientes podem ser usados no mesmo "monorepo" e até reutilizados entre repositórios.

As equipes podem configurar ambientes específicos para React, Angular, Vue.js ou qualquer outro framework. Esses ambientes incluem todas as ferramentas necessárias, como linters, compiladores e frameworks de teste, garantindo que cada micro frontend seja desenvolvido sob condições consistentes. Saiba Mais:

React — Configure seu ambiente | Bit Criar um novo ambiente de desenvolvimento React bit.dev

Exemplo: Uma equipe pode usar o Bit para configurar um ambiente React personalizado com ESLint e Jest para testes, enquanto outra equipe monta um ambiente Angular com Karma para testes unitários. Esses ambientes garantem que os processos de desenvolvimento, teste e construção sejam padronizados e otimizados dentro do contexto de cada micro frontend. 4. Cápsulas para Construções Isoladas: A tecnologia Capsule do Bit permite que componentes sejam construídos em completo isolamento do restante da base de código. Esse isolamento garante que a build seja executada e que todas as dependências sejam gerenciadas corretamente, prevenindo problemas de escopo global e facilitando a identificação e correção de bugs no início do processo. As cápsulas oferecem aos desenvolvedores um campo de desenvolvimento e testes confiável antes da implantação.

2. Controle de Versões e Gerenciamento de Dependências: Controle de versões e gerenciamento de dependências são aspectos cruciais da arquitetura micro frontend. Em uma configuração micro frontend, cada módulo ou componente frontend é desenvolvido, versionado e mantido de forma independente.

Essa independência significa que cada módulo pode evoluir em seu próprio ritmo, com suas dependências específicas e sistema de versionamento.

O controle de versão por componente garante que as atualizações de uma micro frontend não quebrem inadvertidamente outras partes da aplicação, enquanto um gerenciamento eficaz de dependências previne conflitos e garante que cada módulo possa funcionar conforme previsto no ecossistema maior.

Em aplicações em larga escala, gerenciar dependências e versões torna-se cada vez mais complexo à medida que mais micro frontends são introduzidos.

Sem um sistema robusto, é fácil surgir conflitos de dependências, levando a problemas como bibliotecas duplicadas, incompatibilidades de versões ou até mesmo falhas de aplicação. Controle de versões adequados e gerenciamento de dependências garantem que:

• Estabilidade é Mantida: Atualizações em uma micro frontend não quebram outras, mantendo a estabilidade geral da aplicação.
• Dependências são Consistentes: Cada micro frontend usa as versões corretas das bibliotecas compartilhadas, evitando conflitos e redundâncias.
• Flexibilidade de Implantação: As equipes podem atualizar ou reverter micro frontends específicos sem afetar toda a aplicação, permitindo estratégias de implantação mais flexíveis e responsivas.

A Bit oferece uma solução abrangente para controle de versões e gerenciamento de dependências em arquiteturas micro frontend. Veja como ele suporta esses processos:

Versionamento Independente: Bit permite que cada componente ou micro frontend seja versionado independentemente (usando regras semver). Isso permite que as equipes misturem e combinem componentes, atualizem ou revertam componentes específicos sem impactar outros, possibilitando mudanças incrementais e lançamentos para micro frontends.

Além disso, você pode comparar mudanças entre versões dos componentes, e não apenas código, mas também prévias, documentação, testes, dependências e mais:

Versionamento por micro frontend; Dependências e atualizações automatizadas

Cada alteração em um componente é rastreada e gerenciada dentro do Bit, fornecendo um histórico claro de versões e alterações. Marcar um componente vai aplicar uma versão, e bater uma versão fará com que o Bit te avise se houver outros componentes que também exigem um bump de versão como resultado. Aprender:

Exemplo: Uma equipe pode atualizar um componente de login para melhorar a segurança. Com o Bit, eles podem lançar uma nova versão desse componente enquanto outras partes do aplicativo continuam usando versões mais antigas e estáveis. Se surgirem problemas, é fácil voltar para uma versão anterior sem afetar o restante do sistema.

Gerenciamento Automatizado de Dependências: É aí que Bit realmente muda o jogo.

Bit define e gerencia automaticamente as dependências de cada componente. Quando um componente é criado ou atualizado, o Bit resolve e instala todas as dependências necessárias, garantindo que cada micro frontend tenha tudo o que precisa para funcionar corretamente.

Esse processo ajuda a prevenir problemas como conflitos de dependências ou bibliotecas ausentes, que são comuns em aplicações complexas com monorepos, micro frontends e componentes compartilhados. Aqui está uma DEMONSTRAÇÃO em VÍDEO do autor da PNPM.

Exemplo: Suponha que uma micro frontend dependa de uma versão específica de uma biblioteca como . O bit garante que a versão correta esteja instalada e que outras micro frontends usando versões diferentes não interfiram nela. Esse isolamento previne conflitos e garante que cada micro frontend permaneça estável e funcional.lodash lodash

1. Dependências Compartilhadas: O Bit também automatiza o gerenciamento de dependências compartilhadas entre micro frontends. Quando múltiplas micro frontends usam a mesma biblioteca ou componente, o Bit ajuda a gerenciar essas dependências compartilhadas para evitar duplicação e reduzir o tamanho do bundle. Dependências compartilhadas são consistentes em toda a aplicação, permitindo que micro frontends individuais atualizem de forma independente.

Exemplo: Um sistema de design ou uma biblioteca utilitária usada por múltiplas micro frontends pode ser compartilhada como um componente de Bits. Esse componente compartilhado é versionado e mantido em um repositório central, facilitando para as equipes extrair a versão mais recente ou reverter para versões anteriores conforme necessário.

2. Integração com Pipelines CI/CD: O bit se integra perfeitamente com pipelines CI/CD, automatizando o processo de teste, construção e implantação de componentes à medida que são atualizados. Essa integração garante que todas as versões de um componente sejam minuciosamente testadas antes de entrar no mercado, reduzindo o risco de introduzir bugs ou alterações quebradas no ambiente de produção.

Você pode até automatizar atualizações de PR para seus repositórios do GitHub:

Exemplo: Quando uma nova versão de um micro frontend é enviada para Bit, o pipeline CI/CD automaticamente dispara testes, constrói o componente e o prepara para implantação. Se todas as verificações passarem, a nova versão é marcada e lançada; caso contrário, a implantação é interrompida, impedindo que possíveis problemas cheguem aos usuários.

3. Integrações e Atualizações em Tempo de Execução vs Tempo de Construção: A decisão entre integrações em tempo de execução e em tempo de construção impacta a flexibilidade e escalabilidade das arquiteturas micro frontend. A integração em tempo de execução permite composição dinâmica e atualizações, enquanto a integração em tempo de construção envolve compilar tudo em um único pacote, o que pode limitar a flexibilidade, mas oferece alto desempenho e uma boa experiência de desenvolvimento.

Como cada componente é um pacote ou módulo independente, com sua própria versão, torna-se possível atualizar componentes específicos (e seus dependentes impactados) sem precisar atualizar o restante do projeto.

O Bit suporta ambos os tipos de integrações e permite que você escolha qual é a mais adequada para você. Ele roda nativamente com a Module-Federation, assim como com todos os gerenciadores de pacotes ou registros.

Por exemplo, aqui estão algumas demonstrações de integração e atualização de componentes de Bits usando Module-Federation: E um mergulho nas implantações deles nesse cenário com federação de módulos:

Ao mesmo tempo, todo componente exportado para bit.cloud já é um pacote — isso acontece automaticamente quando você marca e exporta o componente. Ou seja, você pode instalá-lo usando qualquer gerenciador de pacotes ou registro (incluindo o JFrog Artifactory), e pode encontrar esse painel em cada página de componentes, na aba "usar":

Implantações Independentes: Micro frontends devem ser implantáveis de forma independente, permitindo que diferentes partes da aplicação evoluam e sejam lançadas em seu próprio ritmo, sem necessidade de sincronização com outros componentes.

A arquitetura modular do Bit permite que cada componente ou micro frontend seja implantado de forma independente. O bit se integra perfeitamente com a Webpack Module Federation, permitindo que componentes sejam carregados sob demanda em tempo de execução. Isso desacopla o processo de implantação do restante da aplicação, permitindo implantações rápidas e autônomas.

6. Micro Frontends Compartilhados via Plataforma Central

6.1 Plataforma central: Bit.cloud é uma plataforma central para componentes compartilhados (por exemplo, micro frontends). Oferece hospedagem em nuvem, nuvem privada e versões baseadas em servidores locais. A Bit Cloud é uma plataforma de ponta a ponta para desenvolvimento orientado a componentes, que permite um fluxo de trabalho simplificado e completo para criar, compartilhar, descobrir, consumir, alterar e atualizar componentes. Essa é uma parte fundamental para adotar com sucesso micro frontends em um ambiente organizacional e em escala. Ele pode ser integrado e conectado às suas ferramentas e fluxos de trabalho, como GitHub ou Artifactory, assim como Figma e até suas ferramentas CI/CD.

Seus micro frontends podem ser hospedados na sua conta privada, na conta da sua organização e divididos em "Escopos" que servem como coleções de componentes com temas comuns, domínios de propriedade. Pode conferir:

6.2 Descoberta para micro frontends: A Bit Cloud oferece uma plataforma robusta para descobrir componentes micro frontend compartilhados, facilitando para as equipes encontrarem, entenderem e escolherem os melhores componentes para seus projetos. Ele oferece capacidades avançadas de busca, permitindo que os usuários filtrem componentes com base em critérios específicos, como tags, dependências e versões. Isso ajuda os desenvolvedores a localizar rapidamente o componente exato que precisam.

Além da funcionalidade de busca, o Bit Cloud aprimora a descoberta de componentes com exemplos visuais e documentação gerada automaticamente. A página de cada componente apresenta documentação detalhada, incluindo instruções de uso, mapas de dependências e composições visuais que mostram o componente em vários estados e contextos. Essas composições simulam o comportamento do componente, ajudando desenvolvedores e não desenvolvedores (como designers) a entender como o componente funciona e como pode ser integrado a diferentes projetos.

6.3 Análises para status, uso e adoção: Um dos aspectos mais importantes do desenvolvimento de escalabilidade com micro frontends compartilhados ou qualquer outro tipo de componente é a capacidade de acompanhar seu uso, adoção, tech-stacks, status e todos os outros parâmetros importantes que ajudam a governar e gerenciar esses blocos de construção.

Em Bit.Cloud você pode visualizar as dependências diretas e indiretas de cada componente (ou Scope), o uso em diferentes projetos, atualizações de versões, tecnologias usadas e mais.

7. Desenvolvimento Colaborativo: Arquiteturas micro frontend eficazes exigem colaboração entre equipes e também dentro de equipes multifuncionais. Os construtores precisam ser capazes de trabalhar juntos de forma fluida, mesmo ao desenvolver diferentes partes da aplicação, enquanto trabalham juntos para planejar, revisar e lançar.

O bit é projetado para permitir colaboração.

Por exemplo, novas versões para componentes podem ser sugeridas por meio de "requests-change", onde os membros da equipe revisora podem ver alterações de código, pré-visualizações visuais, alterações em testes, dependências e muito mais. Eles podem discutir e aprovar essas mudanças diretamente na tela de solicitação de mudança.

Além disso, componentes podem ser facilmente importados para o seu espaço de trabalho local para edição e alterações, o que facilita muito a colaboração em componentes, sugestões de alterações, entrega de atualizações e a sincronização.

Esse ambiente colaborativo acelera o desenvolvimento e garante que todas as equipes estejam alinhadas, a tecnologia seja padronizada e a UX/UI permaneça consistente.

8. Equipes Autônomas: Equipes que trabalham em diferentes micro frontends devem operar de forma autônoma, com controle total sobre seus respectivos domínios. Essa autonomia é crucial para fomentar a inovação e reduzir gargalos no processo de desenvolvimento.

As equipes possuem e entregam microfrontends orientados por domínio

A plataforma da Bit apoia equipes autônomas fornecendo as ferramentas para desenvolver, testar e implantar seus componentes de forma independente. Cada equipe pode gerenciar seus próprios fluxos de trabalho, do desenvolvimento à implantação, sem precisar coordenar com outras equipes. Essa autonomia é aprimorada pelo suporte do Bit para versionamento independente, implantação e integração em tempo de execução, permitindo que as equipes avancem rápido e inovem livremente.

9. Múltiplas Pilhas de Tecnologia: Micro frontends são particularmente poderosos em organizações onde diferentes equipes preferem usar stacks tecnológicos distintos. Essa flexibilidade permite que cada equipe selecione as melhores ferramentas e frameworks para os recursos específicos que está desenvolvendo. Por exemplo, uma equipe pode usar o React para um painel de usuário, outra pode optar pelo Angular para lidar com formulários complexos, enquanto outra equipe pode aproveitar Vue.js para componentes leves e de carregamento rápido, como barras de navegação.

Muitos componentes, muitas tecnologias, uma única plataforma

O Bit desempenha um papel crucial na gestão dessas pilhas diversas por meio de seus Ambientes Componentes. Ambientes de bits são extensões que configuram e gerenciam as ferramentas e fluxos de trabalho de desenvolvimento específicos para cada framework ou pilha tecnológica. Ao trabalhar em um espaço de trabalho gerenciado por bits, as equipes podem criar ambientes personalizados para React, Angular, Vue.js ou qualquer outra pilha tecnológica que estejam utilizando. Esses ambientes garantem que cada componente seja isolado e desenvolvido em um ambiente consistente, independentemente da tecnologia subjacente.

Por exemplo, um ambiente componente React no Bit pode incluir configurações para ESLint, Jest e Webpack, enquanto um ambiente Angular pode configurar TypeScript, Karma e Angular CLI. Isso permite que cada equipe foque no desenvolvimento sem se preocupar com conflitos entre pilhas, já que a Bit cuida da integração e garante que cada componente seja compatível quando combinado em uma aplicação maior.

Além disso, ambientes de bits suportam Cápsulas, que criam ambientes de desenvolvimento isolados para componentes. Isso significa que cada componente pode ser desenvolvido, testado e construído completamente isolado do restante da base de código, garantindo que problemas como conflitos de dependência ou vazamentos globais de estado sejam detectados cedo.

10. Shell de Aplicação: Um App Shell (Application Shell) é uma estrutura estática que carrega primeiro e fornece a estrutura central de um aplicativo web, incluindo elementos de interface compartilhados como cabeçalhos e barras de navegação. Em uma arquitetura de micro frontend, o shell do aplicativo garante uma interface de usuário consistente enquanto carrega dinamicamente micro frontends.

A interface do app serve como uma base estável, gerenciando o roteamento e o estado enquanto micro frontends são carregados de forma independente. Essa separação permite que cada micro frontend seja desenvolvido e implantado sem impactar a aplicação como um todo.

A estrutura da solução ModFed. A organização de bits que mantém a solução MFEs. Os repositórios que mantêm os espaços de trabalho de bits para os componentes compartilhados, o app host e os módulos remotos

• Desenvolvimento Independente: O Bit possibilita a criação de shells de aplicativos e micro frontends como componentes separados, possibilitando que sejam desenvolvidos, versionados e implantados de forma independente.
• Integração dinâmica: Usando a Federação de Módulos do Webpack, o Bit permite que micro frontends sejam carregados dinamicamente na interface do app, garantindo integração suave em tempo de execução.
• Gestão Centralizada: O Bit Cloud centraliza o armazenamento e a gestão de shells de aplicativos e micro frontends, facilitando a descoberta, atualização e compartilhamento de componentes em toda a organização(

Em essência, o Bit suporta a integração perfeita e o gerenciamento independente de shells de aplicativos e micro frontends, garantindo consistência e flexibilidade em aplicações web complexas. Aqui está um exemplo:

[Microfrontends] Nx

CustomMfe ✨ Your new, shiny Nx workspace is almost ready ✨.

Learn more about this workspace setup and its capabilities or run npx nx graph to visually explore what was created. Now, let's get you up to speed!

Finish your CI setup

Click here to finish setting up your workspace!

Run tasks

To run the dev server for your app, use:

npx nx serve custom-mfe

To create a production bundle:

npx nx build custom-mfe

To see all available targets to run for a project, run:

npx nx show project custom-mfe

These targets are either inferred automatically or defined in the project.json or package.json files.

More about running tasks in the docs »

Add new projects

While you could add new projects to your workspace manually, you might want to leverage Nx plugins and their code generation feature.

Use the plugin's generator to create new projects.

To generate a new application, use:

npx nx g @nx/react:app demo

To generate a new library, use:

npx nx g @nx/react:lib mylib

You can use npx nx list to get a list of installed plugins. Then, run npx nx list <plugin-name> to learn about more specific capabilities of a particular plugin. Alternatively, install Nx Console to browse plugins and generators in your IDE.

Learn more about Nx plugins » | Browse the plugin registry »

Learn more about Nx on CI

Install Nx Console

Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.

Install Nx Console »

Useful links

Learn more:

• Learn more about this workspace setup
• Learn about Nx on CI
• Releasing Packages with Nx release
• What are Nx plugins?

And join the Nx community:

• Discord
• Follow us on X or LinkedIn
• Our Youtube channel
• Our blog