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.

1. Single-SPA: Como este framework pode me
ajudar na construção de Micro Front-Ends

2. Daiana Cambruzzi Ávila
Front-End Software Engineer at Zenvia
@daicambruzzi
2

3. alert(‘Spoilers’)
▷ Micro Front-Ends;
▷ Single-SPA;
▷ Code;

4. Mas primeiro, o que é Micro
Front-End?

5. “
An architectural style where independently deliverable
frontend applications are composed into a greater
whole (JACKSON, Cam)
https://martinfowler.com/articles/micro-frontends.html

6. “

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!

9. SINGLE-SPA
A javascript router for front-end microservices

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);

12. Ecossistema Single-SPA
▷ single-spa-react;
▷ single-spa-vue;
▷ single-spa-angular;
▷ single-spa-angularjs;
▷ single-spa-ember;
▷ single-spa-preact;
▷ single-spa-svelte;
▷ single-spa-backbone...

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

14. Quem está usando?
https://single-spa.js.org/

15. COMO VAMOS IMPLEMENTAR O USO
DESSE FRAMEWORK?

16. Arquitetura
MFE Page 1 - Vue
(SINGLE-SPA Application)
MFE Nav Bar React
(SINGLE-SPA Application)
SINGLE-SPA Configuration

17. Single-SPA Configuration
Aplicação responsável pelo registro e gerenciamento das
aplicações micro front-end;

18. Ciclo de vida: Single-SPA Applications

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...

24. Thanks!
Any questions?
@daicambruzzi
daiana.avila@gmail.com