Construindo micro-frontends para acelerar e escalar nosso processo de desenvolvimento web.

Veja nossos micro frontends em ação em bit.dev

Na Bit , construímos ferramentas para mais de 100.000 desenvolvedores que trabalham com componentes. Nossas ferramentas ajudam os desenvolvedores a criar, reutilizar e colaborar em componentes independentes para acelerar o desenvolvimento e melhorar a qualidade do aplicativo.

Desde o primeiro dia, temos feito dogfood de nossas próprias ferramentas, enquanto permitimos que os componentes conduzam nossa arquitetura e processo de desenvolvimento. Uma grande vantagem disso é poder usufruir dos benefícios dos Micro Front-Ends.

Autor do Módulo Federação sobre o futuro das MFEs

Ao dividir o monólito de front-end em bases de código menores, as equipes de front-end podem desfrutar de benefícios semelhantes aos dos microsserviços: bases de código sustentáveis, equipes autônomas, lançamentos independentes e atualizações incrementais.

Micro frontends são geralmente pensados como uma composição de frontends independentes que acontecem em tempo de execução, seja no servidor ou no lado do cliente.

Embora as integrações de tempo de execução tenham seus benefícios (cargas menores, por exemplo), elas não são, de forma alguma, a única maneira de obter “uma composição de aplicativos de front-end entregues independentemente” (para citar Cam Jackson ).

Essa nova forma de construir e colaborar em aplicativos front-end é, a nosso ver, o elemento central dos micro front-ends.

Com o modelo de componente certo e as ferramentas certas, qualquer equipe pode adotar uma abordagem modular para criar aplicativos da Web e aproveitar esses benefícios.

Para nós, compor aplicativos frontend em tempo de construção traz o melhor dos dois mundos — a segurança e robustez dos “monólitos tradicionais” e a simplicidade e escalabilidade dos micro frontends. Para isso, usamos o Bit, uma biblioteca de código aberto que ajuda a tornar cada componente completamente independente, e nossa plataforma de nuvem que permite que as equipes colaborem e se integrem com eficiência.

Modelo certo, ferramentas certas

Neste artigo, mostrarei como nós, da Bit, estamos construindo micro-frontends. Explicarei como isso nos ajudou a atingir metas como bases de código desacopladas, equipes totalmente autônomas, atualizações incrementais independentes e quase 100% de reutilização de código modular. Espero que você ache útil esse conhecimento compartilhado.

Primeiro, um exemplo vivo

Se você acessar a página inicial do Bit.cloud, notará algo estranho acontecendo sempre que passar o mouse sobre um componente.

Bit Cloud: construa juntos em componentes

Bit é a plataforma para desenvolvimento orientado a componentes. Esqueça os monólitos e distribua o desenvolvimento de aplicativos para componentes…

bit.cloud

Assim que o mouse entra em um componente, um destaque é ativado, indicando o nome do componente, a versão independente e o escopo em que ele é publicado e exposto. À medida que você rola, notará que a página inteira é feita de componentes que são construídos de forma independente, com versão e compartilhados por diferentes equipes, em diferentes bases de código, usando diferentes processos de construção e estão todos integrados em um produto de sensação coesa.

O que você vê lá é uma demonstração real de como nossa equipe está usando tecnologias modernas orientadas a componentes, como React e Bit, para construir micro front-ends.

Nesta página, você verá dois conjuntos de componentes, desenvolvidos por duas equipes. Um deles é o conjunto de componentes “base-ui”, pertencente à nossa equipe de infraestrutura de front-end. O segundo conjunto é “ evangelista'”, propriedade da nossa equipa de marketing.

Os componentes de ambos os conjuntos são integrados para compor rapidamente a página inicial que você visualiza, bem como outras páginas como a Enterprise Page ou Support Page e até mesmo para compor mais aplicativos.

Agora podemos compor mais páginas rapidamente

Se você clicar nos escopos dos componentes, poderá ver nossa arquitetura de base de código e nossa estrutura organizacional com seus próprios olhos.

Criar um novo site levará horas e não semanas

Um escopo de componentes é chamado de “base-ui”. Este é o sistema de design de componentes mais básico do Bit.dev, que contém elementos básicos como “parágrafo”, por exemplo. É de propriedade da equipe de infraestrutura de front-end e desenvolvido em sua própria base de código desacoplada . Todos esses componentes são publicados e compartilhados no Bit.dev. Lá, eles podem ser facilmente descobertos e integrados em novos projetos por qualquer outra equipe que precise deles. Além disso, a base-ui de formação de equipe pode continuar enviando atualizações de forma incremental para componentes específicos.

base-ui: sistema de design de componentes básicos do Bit.dev

O segundo escopo é chamado de “evangelista”. Este é o nosso sistema concreto de componentes orientado para o marketing, usado para construir as páginas de marketing em nossos aplicativos. Ele é de propriedade autônoma da equipe de marketing e desenvolvido em uma base de código desacoplada. Todos esses componentes são publicados e compartilhados no Bit.dev e são mantidos pela equipe de marketing.

Evangelista: sistema de componentes de marketing da Bit.dev

Neste exemplo, a equipe de marketing foi dissociada da equipe de construção da plataforma da Web Bit.dev. Essa equipe trabalha em uma base de código diferente, libera alterações por meio de seu próprio pipeline de compilação desacoplado e pode fornecer atualizações incrementais constantemente.

Cada equipe constrói seus componentes, com a flexibilidade de dividir a propriedade vertical por recursos, etc., em sua própria base de código menor e desacoplada. Eles usam o Bit para criar, testar, empacotar e publicar de forma independente cada um de seus componentes. Eles usam a plataforma bit.dev para hospedar e expor componentes para outras equipes, para que possam integrar e colaborar.

Cada equipe da Bit desfruta de um fluxo de trabalho semelhante. Todas as equipes trabalham juntas para compartilhar e integrar componentes entre si, sem atrapalhar umas às outras. Quase 100% dos componentes escritos em nossa base de código são compartilhados e reutilizados, incluindo não apenas componentes de front-end, mas também muitos outros aspectos de nosso sistema, como recursos de “Pesquisa”, recursos de “Playground” e até mesmo alguns recursos fullstack que incluem funcionalidades de front-end e back-end. Achamos isso de grande valor.

KPIs e benchmarking que adotamos para nós mesmos e para outras equipes mostram uma variedade de coisas positivas acontecendo ao adotar esse design orientado a componentes. Por exemplo, o número de lançamentos pode aumentar em até 30 vezes(!), o tempo gasto em integrações é reduzido em mais de 50%, a composição de novos recursos torna-se uma questão de horas ou dias e até a integração de novos os desenvolvedores podem se tornar uma simples questão de horas em vez de semanas. Você pode ouvir mais sobre essa mudança e o que ela pode fazer por uma start-up em rápido crescimento em primeira mão neste grande episódio do podcast HeavyBit JAMStack .

Então, o que são micro front-ends, realmente?

Nos últimos anos, os microsserviços permitiram que as arquiteturas de back-end fossem dimensionadas por meio de bases de código fracamente acopladas, cada uma responsável por sua própria lógica de negócios e expõe uma API, cada uma implantável de forma independente e cada uma pertencente e mantida por uma equipe diferente.

Fonte: Este maravilhoso artigo de Cam Jackson

Esse paradigma oferece grandes vantagens para ajudar a acelerar, dimensionar e tornar o processo de desenvolvimento mais eficiente.

A ideia dos micro front-ends é trazer as mesmas vantagens para o fluxo de trabalho de desenvolvimento moderno. Significa dividir projetos monolíticos em peças menores e mais gerenciáveis, desenvolvidas de forma independente e pertencentes às respectivas equipes, com o poder de construir e enviar simultaneamente.

Esse conceito pode fornecer grandes vantagens , como bases de código simples e desacopladas, equipes autônomas, lançamentos independentes e atualizações incrementais. O processo de desenvolvimento é bastante acelerado, dimensionado e tornado mais eficiente.

Então, por que isso é possível agora, mas não antes?

Até recentemente, a maioria dos aplicativos da Web ainda era construída como projetos monolíticos únicos. O fundador da GatsbyJS, Kyle Mathews, colocou bem dizendo que “os sites de hoje ainda são feitos da mesma forma que eram há 20 anos, com uma abordagem monolítica complicada para construir sites, armazenar dados e fornecer conteúdo. É hora de uma nova maneira de construir a web.”

Ainda hoje, os componentes são o padrão primitivo da web moderna. Só agora essas peças modulares e reutilizáveis estão atingindo sua verdadeira capacidade como blocos de construção de nossas aplicações web, permitindo a decomposição modular de monólitos tradicionais. Agora, para aproveitar essa oportunidade, é necessário uma infraestrutura compartilhada que facilite o design modular orientado a componentes para equipes que constroem aplicativos da Web em conjunto.

É aqui que novas ferramentas como o Bit entram, para fornecer o conjunto de ferramentas necessário para adotar e aproveitar o desenvolvimento orientado a componentes no nível de arquitetura e organizacional e atender a esses benefícios potenciais.

Para saber mais, visite https://bit.dev/