Desafios de Migrar um Monolítico para uma Stack Front-end

Você sente que o processo de desenvolvimento front-end começou a ficar improdutivo num monolítico? Nessa palestra vamos pontuar vários aspectos que nos ajudaram a decidir que a hora de partir pra outra stack tinha chegado. Veremos como é o impacto de uma migração desse tipo, quais alternativas e como escolher uma nova abordagem, considerando o aprendizado e bagagem que o back-end tem.

Transcript

1. DESAFIOS DE MIGRAR UM MONOLÍTICO PARA UMA STACK FRONT-END
2. OI, EU SOU O E D U @eduardojmatos
3. a maior plataforma de contratação de serviços do Brasil
4. D E V N A E S T R A DA . C O M . B R
5. H T T P : / / D I V E R S I DA D E . T E C H
6. H T T P S : / / G I T H U B . C O M / F R O N T E N D B R
7. O QUE É UM MONOLÍTICO?
8. O QUE É UM MONOLÍTICO? uma estrutura geológica, como uma montanha, constituída por uma única rocha (Wikipedia);
9. O QUE É UMA ARQUITETURA MONOLÍTICA? uma única aplicação constituída de várias responsabilidades
10. API render de HTML servir assets modelagem de dados várias lógicas de negócio
11. https://martinfowler.com/bliki/MicroservicePremium.html
12. O QUE TEM DE RUIM NO MONOLÍTICO? NUMA PERSPECTIVA DO FRONT-END GESTÃO DE ASSETS TIME E CULTURA
13. GESTÃO DE ASSETS
14. RENDER NO MONOLÍTICO TEMPLATES E PARTIALS “REFÉNS” DO BACK-END GESTÃO DE ASSETS
15. RENDER NO MONOLÍTICO TOOLING DE OTIMIZAÇÃO BUILT-IN DE HTML QUASE INEXISTENTE FRAGMENT CACHE NO CONTROLE DA APLICAÇÃO GESTÃO DE ASSETS
18. TOOLING ENGESSADO COM BACK-END A MAIORIA DAS APLICAÇÕES MONOLÍTICAS TENDEM A TER SEUS PRÓPRIOS GESTORES DE ASSETS (EX: RAILS => SPROCKETS). GESTÃO DE ASSETS
19. TOOLING ENGESSADO COM BACK-END BABEL, NODE-SASS, OUTRAS FERRAMENTAS DE TOOLING DEPENDENTES DE UPDATE DO FRAMEWORK DE BACK-END GESTÃO DE ASSETS
20. MONOLÍTICOS QUE NÃO FAZEM GESTÃO DE ASSETS DEPENDEM DE UM BUILDER EXTERNO QUE CONSIGA CONVERSAR COM O BACK-END GESTÃO DE ASSETS
21. DEPLOY DE FRONT-END AFETANDO BACK-END AJUSTES PONTUAIS DE FRONT-END QUE PODERIAM SER SIMPLES, ACABAM CRIANDO UM DEPLOY MAIS ROBUSTO, SUBINDO VERSÃO DA APLICAÇÃO TODA GESTÃO DE ASSETS
25. DEPLOY PRA PRODUÇÃO EM MÉDIA: 30 MIN ISSO SE OS TESTES NÃO FALHAREM, SE EM HOMOLOG ESTIVER TUDO CERTINHO, NÃO CHOVER, AMAZON S3 NÃO CAIR (RÁ!), PRECOMPILE DE ASSETS DAR ALGUM XABÚ, …
26. ERA SÓ CSS, CAR***O
28. TIME E CULTURA
29. TAMANHO DA APLICAÇÃO PESSOA NOVA NO TIME SE ASSUSTA E SE PERDE COM CODEBASE GIGANTE TIME E CULTURA
34. MUITOS TIMES, MESMA APLICAÇÃO VÁRIAS ÁREAS DENTRO DE UM MESMO PROJETO TIME E CULTURA
35. MUITOS TIMES, MESMA APLICAÇÃO CONFUSÃO EM PADRÕES E CODE-REVIEW TIME E CULTURA
36. MUITOS TIMES, MESMA APLICAÇÃO REFACTOR TORNA-SE MAIS DIFÍCIL TIME E CULTURA
37. MUITOS TIMES, MESMA APLICAÇÃO NOVAS FEATURES E ENTREGAS ATRELADAS A DE OUTROS TIMES TIME E CULTURA
39. “ATÉ QUE A MORTE OS SEPARE” SE TRATANDO DE FRAMEWORKS DE BACK-END, UMA VEZ ESCOLHIDA A TECNOLOGIA, VAI CONVIVER COM ELA POR UM LONGO TEMPO TIME E CULTURA
40. “ATÉ QUE A MORTE OS SEPARE” NO FRONT-END ISSO É QUASE IMPOSSÍVEL, SE TRATANDO DA QUANTIDADE DE EVOLUÇÕES QUE TEM OCORRIDO TIME E CULTURA
41. FERRAMENTA CERTA PRO JOB CERTO MONOLÍTICOS NÃO FACILITAM O USO DE FERRAMENTAS CERTAS PRA CADA TAREFA. TIME E CULTURA
42. IMPACTO DE ALTERAÇÕES MAIS COMPLEXO SEM COBERTURA DE TESTES, FAZER ALTERAÇÕES NO FRONT-END QUE POSSUEM INTEGRAÇÕES COM BACK-END FICA QUASE IMPOSSÍVEL TIME E CULTURA
44. AMBIENTE DE DESENVOLVIMENTO MUITO LENTO SE NÃO EXISTIR “MOCK” DE DADOS, DEPENDENDO DA QUANTIDADE DE QUERIES E INTEGRAÇÕES, O FRONT-END FICA EXTREMAMENTE LENTO TIME E CULTURA
45. FIRST RENDER DE UM MONOLÍTICO
46. 54 segundos de first render
47. VANTAGENS DE MIGRAR PARA UMA STACK DE FRONT-END ISOLADA
48. DEPLOY ISOLADO MUDOU CSS? CHEGA DE DEPLOY COMPLEXO E CRÍTICO
49. TOOLING ESPECIALIZADO POSTCSS, CSSNANO, BABELJS, UGLIFY, ETC. UMA CAIXA DE FERRAMENTAS PRÓPRIA DE FRONT-END
50. PESSOAS DE 
 FRONT-END FOCADAS EM MELHORAR O FRONT-END PERFIL T-SHAPE OU FULL-STACK É MUITO BOM! MAS PRA INVESTIR EM PERFORMANCE, TER UMA BASE SÓLIDA, SABER ONDE ATACAR NO FRONT-END É PRECISO PESSOAS ESPECIALIZADAS NO ASSUNTO
51. NOVAS FERRAMENTAS PARA PROBLEMAS ESPECÍFICOS PWA, OFFLINE-FIRST, CLIENT-SIDE DATA, PAINT, WEBWORKERS… MUITA COISA NOVA SURGINDO QUE PRECISA DE UM CUIDADO MAIOR
52. COISAS SEPARADAS, MAS AINDA UNIDAS MESMO COM O CONSUMO DE MICROSERVIÇOS, AINDA PRECISA DE MUITA INTEGRAÇÃO ENTRE AS APLICAÇÕES. NO FUNDO, AMBOS OS MUNDOS GANHAM.
53. DESENVOLVIMENTO MAIS RÁPIDO ISOLANDO O FRONT-END, PODEMOS FOCAR EM ENTREGAR INTERFACE MESMO SEM A FONTE DE DADOS BEM DEFINIDA AINDA. ISSO AGILIZA O PROCESSO
54. ENTÃO MONOLÍTICO É UMA B***A? OI?
55. VANTAGENS DO MONOLÍTICO
57. BRINKS ;)
58. MENOS CONFIG PRA MEXER FALANDO DO USO DE FRAMEWORKS WEB VANTAGENS DO MONOLÍTICO
59. CONVENÇÕES FORTES FUNCIONA ASSIM, FAÇA AS COISAS DESSE JEITO. NÃO TEM MUITO SEGREDO OU CONVERSA. VANTAGENS DO MONOLÍTICO
60. MONITORAMENTO CENTRALIZADO ISOLANDO O FRONT-END, PRECISAMOS CUIDAR TAMBÉM DE MAIS UMA APLICAÇÃO WEB. MONITORAMENTO DE SERVER, TRACK DE ERROS, HEALTH CHECK E OUTRAS COISAS PRECISAM SER FEITAS VANTAGENS DO MONOLÍTICO
61. COMPLEXIDADE BAIXA ISOLANDO O FRONT-END, PRECISAMOS CUIDAR TAMBÉM DE MAIS UMA APLICAÇÃO WEB. MONITORAMENTO DE SERVER, TRACK DE ERROS, HEALTH CHECK E OUTRAS COISAS PRECISAM SER FEITAS VANTAGENS DO MONOLÍTICO
62. TESTES CENTRALIZADOS AO ISOLAR O FRONT-END, PRECISAMOS COBRIR TAMBÉM A PARTE DE CLIENT-SIDE COM TESTES ESPECÍFICOS (INTEGRAÇÃO E ATÉ REGRESSÃO VISUAL). VANTAGENS DO MONOLÍTICO
63. FRAMEWORKS CONHECIDOS, CONTRATAÇÃO MAIS FÁCIL QUANDO USAMOS UM FRAMEWORK CONHECIDO, ACHAR PESSOAS QUE JÁ CONHECEM A STACK É MAIS FÁCIL. FACILITA A ENTRADA DE INTEGRANTES NO TIME. VANTAGENS DO MONOLÍTICO
64. ONE RING TO RULE THEM ALL TUDO ESTÁ LÁ. A VANTAGEM É QUE SÓ É PRECISO ME PREOCUPAR COM UMA APLICAÇÃO SÓ, E BOAS. SEJA PRA DESENVOLVER OU SUBIR NOVAS FEATURES. VANTAGENS DO MONOLÍTICO
65. AGORA FIQUEI CONFUSO… CALMA
66. QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA?
67. QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? QUANDO O TIME COMEÇAR A CRESCER. 1
68. QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? SÓ QUANDO AS PESSOAS DESENVOLVEDORAS TIVEREM SKILLS SUFICIENTES PRA MIGRAÇÃO. 2
69. QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? QUANDO O TEMPO DE CARREGAMENTO DE VIEWS E ASSETS COMEÇAR A IMPACTAR O DIA-A-DIA. 3
70. QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? QUANDO O DEPLOY COMEÇAR A SER PREOCUPANTE E IMPACTANTE COM FREQUÊNCIA. 4
71. QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? QUANDO O FRONT-END NÃO CONSEGUIR MAIS EVOLUIR, EM QUESTÕES DE TOOLING E NOVAS TECNOLOGIAS. 5
72. AVALIE, PESQUISE, LEIA ANTES DE MUDAR, TOME UMA DECISÃO BASEADA NO SEU CENÁRIO EM VÁRIOS CASOS, MONOLÍTICO AINDA FAZ SENTIDO!!! TOME CUIDADO COM BLOG POST “PAGANDO DE COOL”, MUDANDO TODA STACK E ETC. ETC. ETC.
73. UMA PESSOA QUE É BOA DESENVOLVEDORA: QUESTIONA TESTA PESQUISA LÊ MUITO NÃO SE LEVA PELO HYPE USA A FERRAMENTA CERTA, PRA HORA E LUGAR CERTO LEVA EM CONTA O NEGÓCIO QUE ESTÁ TRABALHANDO
74. Monolíticos ainda são legais #PAS Matos, Eduardo
75. Stacks de front-end isoladas também #PAScomS2 Matos, Eduardo
76. @eduardojmatos http://eduardomatos.me eduardoj.matos@gmail.com OBRIGADO ;)