Microfrontend React dentro de uma plataforma legada em AngularJS
Oobj by Avalara · 2023 – 2024
ReactTypeScriptSingle-SPAAngularJSMicrofrontends
Desafio
Um novo módulo de NFCom precisava ser entregue dentro de uma grande aplicação legada em AngularJS — com aparência nativa — sem empilhar lógica condicional em um código mantido por outro time e sem uma reescrita arriscada.
Abordagem
Como único desenvolvedor, prototipei três estratégias de integração — iframes, Module Federation e Single-SPA — e escolhi parcels do Single-SPA com import maps. A página em React + TypeScript exporta lifecycles consumidos pelo host, renderiza na mesma página e no mesmo host — reaproveitando o token de autenticação existente — e é entregue atrás de um módulo ativável por cliente.
Impacto
O frontend da NFCom passou a ter deploy independente e o time do legado nunca precisou tocá-lo. O módulo atende um cliente que emite milhões de documentos fiscais por dia.
Inclui um construtor de consultas avançado em que o usuário compõe filtros no estilo SQL sobre os campos dos documentos, com grupos AND/OR aninhados.