Temos vários aplicativos da web que desejamos apresentar em um único aplicativo de página. Estamos procurando uma arquitetura / estrutura micro-frontend para usar. A nosso ver, estas são nossas opções de implementação:

Usando a estrutura de fonte aberta de spa único:https://github.com/CanopyTax/single-spaUsando Iframes (Iframes amigáveis) o aplicativo de hospedagem (o shell) e carregando cada aplicativo de acordo com o URL atual.Escrevendo nossa própria estrutura JavascriptDe outros?

O estado atual é um aplicativo FE monolítico que consome o outro aplicativo filho como pacotes internos de terceiros. Essa abordagem não é escalável para nós, porque o aplicativo de hospedagem está construindo todos os produtos juntos e nada é realmente separado.

Nossos requisitos são os requisitos usuais para o micro frontend: 1. Desenvolvimento independente - Cada equipe pode escolher suas próprias estruturas e criar seus produtos, independentemente dos outros produtos.

Implantação independente - Cada aplicativo pode ser atualizado na produção sem tempo de inatividade e sem interferir nos outros aplicativos.

Componentes compartilhados - estamos usando o Angular4 em nossos aplicativos e temos uma biblioteca proprietária de terceiros (componentes e lógica compartilhados) que já escrevemos e que deve ser compartilhada entre todos os produtos para obter uma aparência e comportamento similares.

Gostaríamos de poder atualizar a estrutura de cada aplicativo (Angular, RXjs, Typescript etc. e também para nossa biblioteca de componentes proprietária) sem nos preocuparmos com os outros aplicativos.

Tentamos usar a estrutura de spa único, mas temos alguns problemas e atualmente nos encontramos pensando se essa é a abordagem certa para nós ou se devemos tentar uma abordagem diferente.

Os problemas que temos usando o spa único são: 1. O carregamento de ativos é problemático. (Precisamos ter os arquivos de ativos na pasta raiz do aplicativo de hospedagem e sofremos conflitos de ativos ao mudar para outro aplicativo). 2. Ainda não sabemos como lidar com o estilo global de todos os aplicativos (usamos sass para estilo e ele deve ser cumprido com os estilos locais de cada aplicativo). 3. Atualizar a estrutura angular (ou todas as outras estruturas) não é possível para um aplicativo, é tudo ou nada (já que temos uma instância de angular). 4. Temos que implementar um pacote diferente para o desenvolvimento do outro lado do aplicativo de hospedagem (o shell).

Quando pensamos na solução Iframe (usando Iframe amigável), visualizamos uma separação completa entre todos os aplicativos filho e tendemos a acreditar que essa é uma abordagem mais adequada para nós.

Existem armadilhas para o uso de Iframes?

Obrigado Daniel