Este artigo tem como intuito resumir alguns conceitos relacionados ao single-spa, framework usado para construção de microfrontends. Os conceitos foram divididos em tópicos explicando o que é e como fazer algumas configurações em uma aplicação single-spa.
Não será criada uma aplicação de exemplo no decorrer do artigo.
Observação: A versão do single-spa considerada neste artigo foi a 5.x
Tabela de conteúdos
- O que é?
- Como usar?
- Como funciona?
- Como Adicionar o filho ao root?
- Passar props ao app filho a partir do root?
- Como associar um filho a uma rota?
- Como definir a ordem de exibição de filhos em mesma rota?
- Como funciona o processo de deploy?
1.O que é?
Framework para criação de microfrontends, com suporte a frameworks e bibliotecas usados para construir frontends, como react, svelte etc. Com isto é possibilitado construir aplicações menores de forma isolada e combinar em uma aplicação maior/completa, além de poder usar frameworks diferentes dentro de uma mesma aplicação principal, por exemplo podemos ter um filho usando vue e outro usando react que compõem a mesma aplicação principal.
2.Como usar?
O framework tem instruções por linha de comando (CLI) onde é possível construir as aplicações, seja a casca ou aplicação filho. Com ela é possível selecionar o tipo de aplicação e o que irá usar, seja o framework, gerenciador de pacotes, typescript etc.
3.Como funciona?
É necessário criar no mínimo duas aplicações, uma root que será usada como casca para juntar os apps e um filho, que irá compor o root. No momento de criação do root define-se um nome de organização que será usado como prefixo no nome do app filho. Não é obrigatório o uso da CLI para construir os apps, na documentação explicita o que precisa para funcionar (dentre eles métodos específicos e algumas dependências), então pode-se usar um aplicativo já existente e muda-lo para single-spa.
Mais informações: https://single-spa.js.org/docs/migrating-existing-spas
4.Como adicionar um app filho ao root?
Cadastra-se um nome que será associado a esse filho, quando local irá apontar para a url de localhost e em produção aponta para onde está hospedado. Após essa associação, adiciona-se um novo aplicativo com o nome dado anteriormente como aplicação no mesmo arquivo ou usando o método registerApplication do single-spa.
//index.ejs
<% if (isLocal) { %>
<script type="systemjs-importmap">
{
"imports": {
"@wps/root-config": "//localhost:9000/wps-root-config.js",
"@wps/home": "http://localhost:8080/wps-home.js"
}
}
</script>
<% } %>
<main>
<route default>
<application name="@wps/home"></application>
</route>
</main>
//componente.js
registerApplication({
name: "@wps/home",
app: () => System.import("@wps/home"),
activeWhen: ["/"],
});
//ou
// especificado para rodar apenas no '/'
registerApplication({
name: "@wps/home",
app: () => System.import("@wps/home"),
activeWhen: location => location.pathname === '/',
});
5.Como passar props ao app filho a partir do root?
A função registerApplication tem parâmetros para passar dados customizados em forma de objeto quando está se registrando por meio da propriedade "customProps".
registerApplication({
name: "@wps/home",
app: () => System.import("@wps/home"),
activeWhen: ["/"],
customProps: { authToken: 'd83jD63UdZ6RS6f70D0' },
});
6.Como associar um filho a uma rota?
Essa associação é feita por meio da propriedade "activeWhen" quando o registro é feito no arquivo javascript ou pela tag "route" no arquivo ejs.
registerApplication({
name: "@wps/home",
app: () => System.import("@wps/home"),
activeWhen: ["/home"],
customProps: { authToken: 'd83jD63UdZ6RS6f70D0' },
});
<!-- index.ejs -->
<route path="home">
<application name="@wps/home"></application>
</route>
7.Como definir a ordem de exibição de filhos em mesma rota?
Usando customProps e passando o elemento do dom a que deseja associar aquele app.
<main>
<div id="home">
</div>
</main>
registerApplication({
name: "@wps/home",
app: () => System.import("@wps/home"),
activeWhen: ["/home"],
customProps: { domElement: document.getElementById('home') },
});
8.Como funciona o processo de deploy?
Cada microfrontend é hospedado na nuvem, usando por exemplo o s3, e pode ter uma CI para realizar o processo de integrar atualizações que serão disponibilizadas.
Nesse processo é importante criar um import map correto que referencie os nossos microfrontends já hospedados, assim como nossas dependências compartilhadas, podemos fazer isso por meio de um arquivo json e importar no root na tag do script "systemjs-importmap".
Referências:
Top comments (0)