O documento discute o framework Single-SPA para construção de Micro Front-Ends. Single-SPA simplifica a composição de vários aplicativos front-end em um único produto, permitindo que eles sejam desenvolvidos independentemente com diferentes frameworks. O documento explica os conceitos de Micro Front-Ends e Single-SPA, demonstra como implementá-los através de ciclos de vida e código, e discute como migrar aplicativos existentes e compartilhar dados entre eles.
5. “
An architectural style where independently deliverable
frontend applications are composed into a greater
whole (JACKSON, Cam)
https://martinfowler.com/articles/micro-frontends.html
7. Benefícios de Micro Front-Ends
▷ Aplicações independentes e reutilizáveis;
▷ Deploys separados;
▷ Times com liberdade para a escolha da stack tecnológica;
▷ Evolução dos sistemas legados;
Vue
Vue
React
8. MAS COMO VOU CONSTRUIR UMA
APLICAÇÃO COM ESSE CONCEITO?
SOMENTE SE FOR NECESSÁRIO EIN!
10. Single-SPA
Single-SPA (o nome é pra ser redundante mesmo ) é um
framework JavaScript que ajuda os desenvolvedores ao simplificar a
composição de vários aplicativos front-end em um único produto.
11. Single-SPA
▷ “Liberdade” de framework/lib front-end;
▷ Segue premissas do micro front-end como: deploys
independentes;
▷ Uso do Lazy load para o carregamento das aplicações;
▷ Funciona com o Chrome, Firefox, Safari, Edge, and IE11
(com polyfills);
13. “
Single-SPA tem sido o framework de escolha para
integração de micro frontends para nossos times
(THOUGHTWORKS, 10/2020)
https://www.thoughtworks.com/pt/radar/languages-and-frameworks/single-spa
19. Ciclos de Vida
▷ Bootstrap: Executado unicamente antes do aplicativo registrado ser
montado pela primeira vez;
▷ Mount: Ciclo de vida que cria os elementos DOM, ouvintes de eventos
DOM, etc. para renderizar o conteúdo para o usuário;
20. Ciclos de Vida
▷ Unmount: limpa todos os elementos DOM, memória perdida,
observables, etc. que foram criados em qualquer ponto quando o
aplicativo registrado foi montado;
▷ Unload: Só será executado quando for chamado a API
unloadApplication.
○ Útil em cenários quando você deseja reinicializar os aplicativos, mas
realizar alguma lógica antes que os aplicativos sejam reiniciados;
21. Show me the code!
https://github.com/daicambruzzi/talk-single-spa
22. Migrar para Single-SPA
▷ Crie uma única configuração de SPA;
▷ Converta seus SPA em aplicativos registrados;
23. Como compartilhar dados entre as
aplicações?
▷ DOM EventListener;
▷ Local Storage;
▷ Cookies...