Principais conceitos do Single-SPA
source link: https://dev.to/wps13/principais-conceitos-do-single-spa-7gn
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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
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:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK