A ideia por trás dos microfront-ends é quebrar o lado monolítico do cliente de um projeto da web em partes menores que são mais fáceis de gerenciar. Com esta abordagem, cada equipa envolvida no projecto tem a sua área de trabalho, as equipas são responsáveis apenas por um determinado fragmento do projecto e estão totalmente envolvidas de forma independente no seu desenvolvimento. Assim, cada equipe trabalha com sua própria base de código, independentemente das demais, lança novas versões de seu subsistema, continuamente faz pequenas melhorias incrementais nele. A integração desse subsistema com outros fragmentos da aplicação em que outras equipes estão trabalhando é realizada por meio da API. Com esse esquema de trabalho, as partes da interface dos projetos são montadas a partir de fragmentos independentes que funcionam juntos.
Dan Abramov, em maio passado, escreveuem seu Twitter que ele não entende microfronts. Ele acredita que os problemas que deveriam resolver já foram resolvidos por meio de bons modelos de componentes. “Talvez microfronts sejam uma solução para problemas organizacionais, não técnicos? Por exemplo, quando duas equipes de desenvolvimento não chegam a um acordo sobre nada, inclusive sobre a infraestrutura do projeto ”, reflete.
Existem muitas abordagens para o desenvolvimento microfront-end: desde a integração inteligente de componentes durante a montagem do projeto até a organização de diferentes partes de um aplicativo para trabalharem juntas durante a execução do código usando abordagens de roteamento específicas. Neste artigo, reuni as ferramentas mais notáveis destinadas ao desenvolvimento de dispositivos microfront-end.
1. Plataforma de bits
A plataforma Bit permite que você monte front-ends a partir de componentes independentes. Ajuda a projetar e gerenciar componentes. Esta é provavelmente a solução mais popular da minha lista e a mais bem preparada para o desenvolvimento da produção.
Se você olhar a página inicial do bit.dev , notará que ele é montado a partir de componentes independentes. Esses componentes são criados por equipes diferentes e têm diferentes bases de código por trás desses componentes. Mas eles estão todos integrados entre si, o que, em última análise, permite que você crie uma interface de projeto holística.
A homepage bit.dev criada usando os componentes, o trabalho que é organizado com a ajuda do Bit
Command Line Tool Bit - um software popular usado para desenvolver, com base nos componentes. Com o Bit, você pode criar componentes e montar interfaces a partir deles.
Micro-frontend é geralmente entendido como a montagem da interface durante a execução do código do projeto. E a plataforma Bit visa formar um frontend durante a construção do projeto. Isso dá àqueles que usam esta plataforma os recursos úteis de “monólitos tradicionais” na forma de segurança e confiabilidade, e as vantagens das soluções microfront-end - simplicidade e escalabilidade das soluções.
Com o Bit, diferentes equipes podem criar e publicar independentemente seus próprios componentes, interagindo com outras equipes no nível da API do componente. Isso permite que você transforme o desenvolvimento da web em um processo de construção de projetos a partir de módulos separados.
Além das ferramentas para desenvolvimento baseado em componentes, o projeto Bit oferece uma plataforma baseada em nuvem para desenvolvedores. A plataforma permite que você colabore em componentes, gerencie com eficácia o processo de desenvolvimento e o dimensione. Ao mesmo tempo, as equipes envolvidas no trabalho em suas próprias partes de um determinado projeto permanecem completamente independentes.
A Bit oferece um processo de CI / CD único, totalmente baseado em componentes, que visa organizar a montagem rápida dos projetos. Isso significa que diferentes equipes podem, sem medo de consequências negativas para o projeto, fazer alterações nas partes dos projetos que desenvolvem. Eles não precisam esperar por outras equipes ou competir por mudanças no branch master do projeto. Os desenvolvedores podem continuamente e com segurança, sem medo de bagunçar as partes dos projetos que não são ocupadas por eles, fazer alterações em seus componentes. Essas alterações se aplicam a todos os aplicativos que usam esses componentes.
Um sistema de integração contínua baseado em componentes é 50 vezes mais rápido do que um convencional. Como
resultado, o processo de desenvolvimento é enriquecido com os seguintes recursos:
- Uma base de código simples com partes separadas independentes umas das outras.
- Equipes autônomas.
- APIs compactas e bem definidas.
- Processos independentes para liberação de componentes acabados.
- Possibilidade de melhoria incremental contínua de componentes.
Aqui está um exemplo de organização semelhante de trabalho em projetos.
Se sua equipe está no desenvolvimento baseado em componentes em busca de uma solução que tire proveito da tecnologia microfront-end e uma abordagem modular para trabalhar em grandes aplicativos, recomendo dar uma olhada na plataforma Bit . É bem possível que seja exatamente disso que você precisa.
2. Webpack 5 e Arquitetura de Federação de Módulo
A arquitetura JavaScript Module Federation (MF) foi proposta por Zach Jackson. Ele também iniciou a criação de um plugin webpack para implementar essa arquitetura. Graças aos esforços da equipe do webpack, este plugin apareceu no Webpack 5 e agora está em beta.
A ideia por trás do MF é que vários conjuntos separados devem formar um único aplicativo. Esses assemblies separados não devem ter dependências uns dos outros, permitindo que você os desenvolva e implante individualmente. Este é um esquema no estilo microfront.
Usar o MF permite que um aplicativo JavaScript importe dinamicamente o código de outros aplicativos em tempo de execução. O módulo cria um arquivo exportando seus recursos, que é o ponto de entrada para o código que pode ser carregado por outros aplicativos. Isso é feito configurando o webpack de acordo.
Essa abordagem, entre outras coisas, resolve o problema de dependências de código e o problema de aumentar o tamanho do pacote organizando o compartilhamento de dependências. Por exemplo, se você carregar um componente React, um aplicativo que já importou o React não importará novamente o código da biblioteca. O sistema usará o código React já importado e importará apenas o código do componente. Finalmente, você pode usar React.lazy e React.suspense para fornecer um fallback no caso de o código importado falhar por algum motivo. Isso ajudará a garantir a experiência correta do usuário, mesmo se a montagem da qual o projeto depende não estiver funcionando.
A arquitetura do Module Federation abre possibilidades muito interessantes para o desenvolvimento de microfront-end. Detalhes sobre esta arquitetura e um exemplo de seu uso podem ser encontrados aqui .
3. Projeto de spa único
Os criadores do projeto de spa único o definem como "uma estrutura JavaScript para usar microsserviços no desenvolvimento de front-end". Se descrevermos brevemente sua essência, podemos dizer que ele implementa a ideia do ciclo de vida de alguma entidade aplicada a cada aplicativo individual que compõe o projeto. Cada aplicativo pode responder a eventos de roteamento e precisa saber como implantar, montar no DOM e desmontar do DOM. A principal diferença entre um SPA (Single Page Application) regular e o que você obtém com um single-spa é que os aplicativos de single-spa devem ser capazes de coexistir com outros aplicativos que fazem parte de um projeto. No entanto, esses aplicativos não possuem suas próprias páginas HTML.
Como resultado, se você precisar usar diferentes estruturas ou bibliotecas na mesma página que precisam se integrar durante a execução do código do projeto, você deve dar uma olhada no single-spa. Aqui está um vídeo que fornece informações básicas sobre o projeto. Alguns exemplos podem ser encontrados aqui .
4. Carregador de módulo SystemJS
O carregador de módulo SystemJS não é uma estrutura para desenvolvimento de microfront-end, mas este projeto resolve o problema de gerenciamento cross-browser de módulos independentes, que é a chave para a implementação de arquiteturas microfront-end (esta abordagem também é usada em single-spa).
O SystemJS pode ser considerado um orquestrador do módulo JS. Ele permite que você use vários recursos de tais módulos, como importações dinâmicas e mapas de importação, sem depender de mecanismos de navegador padrão. E tudo isso - com um nível de desempenho próximo ao fornecido pelos recursos integrados dos navegadores. Entre as características interessantes do SystemJS, podemos notar a presença de polyfills para navegadores desatualizados, importando módulos usando nomes (combinando nomes de módulos e caminhos para eles), carregando vários módulos com uma solicitação (usando a API para representar vários módulos como um único arquivo).
O SystemJS também permite trabalhar com um “registro de módulos”, para que o desenvolvedor saiba quais módulos estão disponíveis no navegador em um determinado momento. Aqui Tutorial de introdução ao SystemJS.
5. Estrutura Piral
A estrutura Piral foi projetada para facilitar o desenvolvimento de aplicativos de portal usando tecnologias microfront-end. O Piral permite que você crie aplicativos front-end modulares que podem ser estendidos em tempo de execução usando uma arquitetura microfront-end e módulos independentes chamados pilet. Os tickets podem ser desenvolvidos independentemente de outras partes do sistema, incluindo o código e outros recursos necessários. Aqui está um vídeo que demonstra como trabalhar com o Piral.
Se você quiser usar o Piral, você só precisa ter um editor de código, terminal, navegador e Node.js. A instância do Piral (invólucro do aplicativo) e as pilhas (módulos) podem ser executados e depurados no emulador na máquina de desenvolvimento local.
Trabalhando com Piral
6. Abra o projeto Componentes
O projeto Open Components visa "trazer a tecnologia sem servidor para o mundo do front-end". Para ser mais preciso, este projeto foi criado como um framework de desenvolvimento de microfront-ends, que dá ao desenvolvedor tudo o que ele precisa, criando um ecossistema que inclui ferramentas para trabalhar com componentes, um registro de componentes, templates e até uma ferramenta de linha de comando. O projeto Open Components tem duas partes:
- components () — , , , , HTML, JavaScript CSS. , , - , Node.js- , . HTML-, -.
- consumers () — - (, -, , ), - -.
7. Qiankun
O projeto Qiankun é descrito como "uma implementação microfront-end baseada em um único spa , mas pronta para uso em produção." Este projeto visa resolver alguns dos problemas básicos associados à montagem de grandes aplicações a partir de pequenos subsistemas (sub-aplicações). Essas tarefas incluem a publicação de recursos estáticos, a combinação de subsistemas, garantindo a independência dos subsistemas uns dos outros durante seu desenvolvimento e implantação, garantindo o isolamento do subsistema durante a execução do código, processando dependências e garantindo o alto desempenho das soluções.
Projeto Qiankun
8. Estrutura Luigi
Luigi é uma estrutura JavaScript focada em negócios para desenvolvimento microfront-end que permite criar interfaces de usuário que usam componentes locais e externos. Luigi é uma estrutura de desenvolvimento de aplicativos da web que é independente de estruturas e bibliotecas específicas. Essa estrutura fornece ao desenvolvedor os meios para garantir que as partes individuais do aplicativo funcionem juntas.
Luigi
A estrutura do Luigi consiste em dois subsistemas. Este é o aplicativo principal e as bibliotecas do cliente. A interação entre eles é baseada na API postMessage.
Aqui está uma caixa de areia na qual você pode fazer experiências com o Luigi. E aqui está o repositório do projeto. A propósito, a SAP está trabalhando nisso.
9. Estrutura FrintJS
FrintJS é uma "estrutura JavaScript modular para o desenvolvimento de aplicativos reativos escaláveis." Ele permite que você carregue aplicativos criados por vários bundlers, ajuda a estruturar seus aplicativos e mantém mecanismos como roteamento e manipulação de dependências funcionando corretamente. Este framework, além do React (o trabalho com esta biblioteca está bem documentado e testado), suporta, por meio de pacotes adicionais, o React Native e o Vue.
FrintJS
→ Aqui está a sandbox interativa FrintJS
10. Mosaico 9
Mosaic é um conjunto de serviços e bibliotecas unidos por especificações que definem como os componentes interagem ao organizar sites de grande escala construídos com uma arquitetura de microsserviço. O Mosaic usa os chamados “fragmentos” que são mantidos por serviços separados e são combinados em tempo de execução de acordo com a ordem especificada no modelo.
Arquitetura do Mosaico O
projeto do Mosaico é representado por uma variedade de pacotes que visam resolver vários problemas. Entre eles - roteamento, formação de layouts de páginas, armazenamento de templates, apresentação de interfaces.
11. Framework PuzzleJS
PuzzleJS é uma "estrutura microfront-end para o desenvolvimento de sites escaláveis e rápidos." Ele permite que você crie projetos chamados “gateways” e “interfaces” (vitrine) que se comunicam entre si. Os criadores do PuzzleJS se inspiraram, em termos de arquitetura microfront-end, no projeto Facebook BigPipe .
PuzzleJS
PuzzleJS permite que você crie "portais" e "interfaces" independentes, personalizando sua interação usando um arquivo de configuração. Ele permite que você converta modelos HTML em funções JavaScript em tempo de compilação. Esta operação é independente das solicitações de carregamento de dados. Como resultado, a função, em resposta a uma solicitação, começa a transferir dados muito rapidamente, o que melhora um indicador de desempenho de páginas da web como o tempo até o primeiro byte. Este framework, devido ao uso de renderização de materiais do lado do servidor, é bom em termos de SEO. Além disso, se a API necessária para a operação de um determinado fragmento da página parar de responder às solicitações, isso não interromperá o trabalho de outros fragmentos. Aqui está um exemplo do mundo real de como usar o PuzzleJS.
Resultado
Outras estruturas que podem ser usadas para desenvolvimento microfront-end incluem Podium .
Como você pode ver, se decidir criar um projeto baseado na arquitetura microfront-end, então você definitivamente tem muito por onde escolher.
Como você se sente em relação aos microfronts?
