Apresentação realizada no primeiro Meetup TOTVS Unidade Goiânia. Microfrontends: Uma nova abordagem no desenvolvimento de interfaces.

1. TODOS OS DIREITOS RESERVADOS 2019
MICROFRONTENDS
Uma nova abordagem
no desenvolvimento
de interfaces
Novembro
TOTVS Developers: Goiânia

2. 2
MUNDO ÁGIL.

3. 3
Dev
Líder Técnico
Rodolfo Bueno
30 anos
Formação de novos talentos
Experiência no setor privado, público e de startups
eu, um ágil corredor

4. 4
Banco de dados Monolito backend e frontend
10 ANOS ATRÁS...

5. 5
Banco de dados
Monolito
backend
Single Page Application
DIVIDINDO O MONOLITO

6. 6
ESCALANDO O MONOLITO
LOAD
BALANCER

7. 7
MICROSSERVIÇOS
API
Gateways

8. 8
E o frontend? Nada mudou?
CLARO QUE
MUDOU!

9. 9
UM ÚNICO PROJETO /
CÓDIGO-FONTE
SINCRONIZAÇÃO
DE DEMANDAS
TRABALHO SIMULTÂNEO
ENTRE DIFERENTES EQUIPES
AUTONOMIA
DEPLOY - !CD - ENTREGAS
NÃO CONTÍNUAS DE SOFTWARE EVOLUÇÃO
TECNOLÓGICA
Problemas

10. 10
É POSSÍVEL
DIVIDIR TUDO
NO ESTILO
MICRO
SERVIÇOS?

11. 11
MICROFRONTENDS
Uma técnica, estilo arquitetural, que possibilita entregas independentes de
pequenos pedaços de frontend que fazem parte de um conjunto maior.
UM DOMÍNIO DE NEGÓCIO
UM TIME

12. 12
MIGRAÇÃO GRADUAL DO SEU
ATUAL MONOLITO FRONTEND
CÓDIGO FONTE COESO,
DIVIDIDO POR RESPONSABILIDADE
Benefícios

13. 13
FRAMEWORKS ESCOLHIDOS DE ACORDO
COM AS NECESSIDADES DA EQUIPE/NEGÓCIO
Benefícios
Time A controla
microfrontend A.
Time B controla
microfrontend B.
Time C controla
microfrontend C.
HTML HTML HTML
Evitando times
“horizontais”
3 times “verticais” orientados ao negócio
CSS
JAVASCRIPT
CSS
JAVASCRIPT
CSS
JAVASCRIPT

14. 14
DEPLOYS INDEPENDENTES
E MAIS FREQUENTES
Benefícios
Microfrontend
A
Microfrontend
B
Microfrontend
C
Controle de
versão
Fila de build e teste Produção
CICLOS MENORES DE
DESENVOLVIMENTO

15. 15
FORMAS DE IMPLEMENTAÇÃO
● Server-side template composition
● Build-time integration
● Run-time integration via iframes
● Run-time integration via JavaScript
● Run-time integration via Web
Components

16. 16
ACHAMOS NOSSA
BALA
DE
PRATA?

17. 17
EXPERIÊNCIA
DO USUÁRIO
RECURSOS
CONFLITANTES
TESTES DE
INTEGRAÇÃO
Pontos de atenção
Definição de um Design System
JS, CSS
PROJETO BASE COM PADRONIZAÇÃO
DE BIBLIOTECA DE TERCEIROS
REPLICAÇÃO DE
DEPENDÊNCIAS
Forte dependênciaPerformance da aplicação

18. 18
QUEM ANDA FAZENDO ISSO POR AÍ?
https://jobs.zalando.com/tech/blog/f
ront-end-micro-services/
https://www.infoq.com/news/2018/08/e
xperiences-micro-frontends/
https://labs.spotify.com/2019/03/25/b
uilding-spotifys-new-web-player/

19. 19
#TOTVSque
Divisão das equipes por squads
Projetos nascem e são modelados
de acordo com as necessidades do negócio
Sistema gigante com alta demanda de
implementações
WINTHOR ANYWHEREE NA TERRA DO PEQUI?

20. 20
PORTINARI COMO BIBLIOTECA
DE COMPONENTES UI UMA ROTINA DO WTA =
UM MICROFRONTEND
ROTINAS TOTALMENTE
INDEPENDENTES
COMPOSIÇÃO E CONTROLE
COM IFRAMES
DESTAQUE:
MIGRAÇÃO DE ROTINAS GWT PARA PORTINARI POR DEMANDA

21. 21
DÚVIDAS?

22. totvs.com
@totvs
company/totvs
fluig.com
Obrigado!
Rodolfo Bueno
Desenvolvedor
rodolfo.bueno@totvs.com.br
Tecnologia + Conhecimento são nosso DNA.
#SOMOSTOTVERS
O sucesso do cliente é o nosso sucesso.
Valorizamos gente boa que é boa gente.