Slide 1

Slide 1 text

DESAFIOS DE MIGRAR UM MONOLÍTICO PARA UMA STACK FRONT-END

Slide 2

Slide 2 text

OI, EU SOU O E D U @eduardojmatos

Slide 3

Slide 3 text

a maior plataforma de contratação de serviços do Brasil

Slide 4

Slide 4 text

D E V N A E S T R A DA . C O M . B R

Slide 5

Slide 5 text

H T T P : / / D I V E R S I DA D E . T E C H

Slide 6

Slide 6 text

H T T P S : / / G I T H U B . C O M / F R O N T E N D B R

Slide 7

Slide 7 text

O QUE É UM MONOLÍTICO?

Slide 8

Slide 8 text

O QUE É UM MONOLÍTICO? uma estrutura geológica, como uma montanha, constituída por uma única rocha (Wikipedia);

Slide 9

Slide 9 text

O QUE É UMA ARQUITETURA MONOLÍTICA? uma única aplicação constituída de várias responsabilidades

Slide 10

Slide 10 text

API render de HTML servir assets modelagem de dados várias lógicas de negócio

Slide 11

Slide 11 text

https://martinfowler.com/bliki/MicroservicePremium.html

Slide 12

Slide 12 text

O QUE TEM DE RUIM NO MONOLÍTICO? NUMA PERSPECTIVA DO FRONT-END GESTÃO DE ASSETS TIME E CULTURA

Slide 13

Slide 13 text

GESTÃO DE ASSETS

Slide 14

Slide 14 text

RENDER NO MONOLÍTICO TEMPLATES E PARTIALS “REFÉNS” DO BACK-END GESTÃO DE ASSETS

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

TOOLING ENGESSADO COM BACK-END BABEL, NODE-SASS, OUTRAS FERRAMENTAS DE TOOLING DEPENDENTES DE UPDATE DO FRAMEWORK DE BACK-END GESTÃO DE ASSETS

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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Ú, …

Slide 26

Slide 26 text

ERA SÓ CSS, CAR***O

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

TIME E CULTURA

Slide 29

Slide 29 text

TAMANHO DA APLICAÇÃO PESSOA NOVA NO TIME SE ASSUSTA E SE PERDE COM CODEBASE GIGANTE TIME E CULTURA

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

MUITOS TIMES, MESMA APLICAÇÃO VÁRIAS ÁREAS DENTRO DE UM MESMO PROJETO TIME E CULTURA

Slide 35

Slide 35 text

MUITOS TIMES, MESMA APLICAÇÃO CONFUSÃO EM PADRÕES E CODE-REVIEW TIME E CULTURA

Slide 36

Slide 36 text

MUITOS TIMES, MESMA APLICAÇÃO REFACTOR TORNA-SE MAIS DIFÍCIL TIME E CULTURA

Slide 37

Slide 37 text

MUITOS TIMES, MESMA APLICAÇÃO NOVAS FEATURES E ENTREGAS ATRELADAS A DE OUTROS TIMES TIME E CULTURA

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

“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

Slide 40

Slide 40 text

“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

Slide 41

Slide 41 text

FERRAMENTA CERTA PRO JOB CERTO MONOLÍTICOS NÃO FACILITAM O USO DE FERRAMENTAS CERTAS PRA CADA TAREFA. TIME E CULTURA

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

FIRST RENDER DE UM MONOLÍTICO

Slide 46

Slide 46 text

54 segundos de first render

Slide 47

Slide 47 text

VANTAGENS DE MIGRAR PARA UMA STACK DE FRONT-END ISOLADA

Slide 48

Slide 48 text

DEPLOY ISOLADO MUDOU CSS? CHEGA DE DEPLOY COMPLEXO E CRÍTICO

Slide 49

Slide 49 text

TOOLING ESPECIALIZADO POSTCSS, CSSNANO, BABELJS, UGLIFY, ETC. UMA CAIXA DE FERRAMENTAS PRÓPRIA DE FRONT-END

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

NOVAS FERRAMENTAS PARA PROBLEMAS ESPECÍFICOS PWA, OFFLINE-FIRST, CLIENT-SIDE DATA, PAINT, WEBWORKERS… MUITA COISA NOVA SURGINDO QUE PRECISA DE UM CUIDADO MAIOR

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

ENTÃO MONOLÍTICO É UMA B***A? OI?

Slide 55

Slide 55 text

VANTAGENS DO MONOLÍTICO

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

BRINKS ;)

Slide 58

Slide 58 text

MENOS CONFIG PRA MEXER FALANDO DO USO DE FRAMEWORKS WEB VANTAGENS DO MONOLÍTICO

Slide 59

Slide 59 text

CONVENÇÕES FORTES FUNCIONA ASSIM, FAÇA AS COISAS DESSE JEITO. NÃO TEM MUITO SEGREDO OU CONVERSA. VANTAGENS DO MONOLÍTICO

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

AGORA FIQUEI CONFUSO… CALMA

Slide 66

Slide 66 text

QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA?

Slide 67

Slide 67 text

QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? QUANDO O TIME COMEÇAR A CRESCER. 1

Slide 68

Slide 68 text

QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? SÓ QUANDO AS PESSOAS DESENVOLVEDORAS TIVEREM SKILLS SUFICIENTES PRA MIGRAÇÃO. 2

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

QUANDO DEVO MIGRAR PRA UMA STACK DE FRONT-END ISOLADA? QUANDO O DEPLOY COMEÇAR A SER PREOCUPANTE E IMPACTANTE COM FREQUÊNCIA. 4

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Monolíticos ainda são legais #PAS Matos, Eduardo

Slide 75

Slide 75 text

Stacks de front-end isoladas também #PAScomS2 Matos, Eduardo

Slide 76

Slide 76 text

@eduardojmatos http://eduardomatos.me [email protected] OBRIGADO ;)