A hora de migrar do Rails numa perspectiva do Front-end

Slide 1

Slide 1 text

A HORA DE MIGRAR DO RAILS NUMA PERSPECTIVA DO 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

RAILS   X  FRONT

Slide 8

Slide 8 text

RAILS   X  FRONT

Slide 9

Slide 9 text

É SOBRE QUAL O MOMENTO CERTO DE MIGRAR O FRONT-END PRA UMA APLICAÇÃO ISOLADA

Slide 10

Slide 10 text

ANTES…

Slide 11

Slide 11 text

RAILS VAI BEM, OBRIGADO

Slide 12

Slide 12 text

RAILS VAI BEM, OBRIGADO

Slide 13

Slide 13 text

PQ ENTÃO ESSA PALESTRA?

Slide 14

Slide 14 text

COMPLEXIDADE E PRODUTIVIDADE

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

MAS O QUE TEM DE NEGATIVO NO RAILS? NUMA PERSPECTIVA DO FRONT-END DIVIDIDO EM DOIS TEMAS GESTÃO DE ASSETS TIME E CULTURA

Slide 18

Slide 18 text

GESTÃO DE ASSETS

Slide 19

Slide 19 text

RENDER NO RAILS TOOLING DE OTIMIZAÇÃO BUILT-IN DE HTML ENGESSADO COM BACK-END GESTÃO DE ASSETS

Slide 20

Slide 20 text

RENDER NO RAILS AS PARTIALS COMEÇAM A SE TORNAR CONFUSAS E COMEÇAM AS ARMADILHAS HTML ESPALHADO PRA TODO LUGAR GESTÃO DE ASSETS

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 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 24

Slide 24 text

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

Slide 25

Slide 25 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 26

Slide 26 text

DEPLOY DE FRONT-END AFETANDO BACK-END AJUSTES PONTUAIS DE FRONT-END QUE PODERIAM SER SIMPLES DE SUBIR EM PRODUÇÃO, ACABAM CRIANDO UM DEPLOY MAIS ROBUSTO, SUBINDO VERSÃO DA APLICAÇÃO TODA GESTÃO DE ASSETS

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 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 31

Slide 31 text

ERA SÓ CSS, CAR***O

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

TIME E CULTURA

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

MUITOS TIMES, MESMA APLICAÇÃO ENTREGAS ATRELADAS A DE OUTROS TIMES TORNAM O PROCESSO DE DEPLOY MAIS COMPLEXO DE LIDAR TIME E CULTURA

Slide 43

Slide 43 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 NO FRONT-END ISSO É QUASE IMPOSSÍVEL, SE TRATANDO DA QUANTIDADE DE EVOLUÇÕES QUE TEM OCORRIDO TIME E CULTURA

Slide 44

Slide 44 text

FERRAMENTA CERTA PRO JOB CERTO FRAMEWORKS MUITAS VEZES NÃO FACILITAM O USO DE FERRAMENTAS CERTAS PRA CADA TAREFA. TIME E CULTURA

Slide 45

Slide 45 text

IMPACTO DE ALTERAÇÕES MAIS COMPLEXO COM COBERTURA DE TESTES, FAZER ALTERAÇÕES NO FRONT-END COMEÇA A FICAR COMPLICADO.   VELOCIDADE DE EXECUÇÃO DAS SPECS, TESTE DE MARKUP, ETC., COMEÇA A DIFICULTAR AS COISAS. TIME E CULTURA

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

AMBIENTE DE DESENVOLVIMENTO MUITO LENTO SE NÃO EXISTIR “MOCK” OU SEED DE DADOS, DEPENDENDO DA QUANTIDADE DE QUERIES E INTEGRAÇÕES, O FRONT-END FICA EXTREMAMENTE LENTO TIME E CULTURA

Slide 48

Slide 48 text

FIRST RENDER DE UM MONOLÍTICO

Slide 49

Slide 49 text

54 segundos de ﬁrst render

Slide 50

Slide 50 text

VANTAGENS DE MIGRAR PARA UMA STACK DE FRONT-END ISOLADA

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 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 E SABER ONDE ATACAR NO FRONT-END É PRECISO PESSOAS ESPECIALIZADAS NO ASSUNTO

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

COISAS SEPARADAS, MAS AINDA UNIDAS AINDA PRECISA DE MUITA INTEGRAÇÃO ENTRE AS APLICAÇÕES. NO FUNDO, AMBOS OS MUNDOS GANHAM.

Slide 56

Slide 56 text

DESENVOLVIMENTO MAIS RÁPIDO ISOLANDO O FRONT-END, PODEMOS FOCAR EM ENTREGAR INTERFACE MESMO SEM A FONTE DE DADOS BEM DEFINIDA AINDA (MOCKS). ISSO AGILIZA O PROCESSO

Slide 57

Slide 57 text

ENTÃO RAILS   É UMA B***A?

Slide 58

Slide 58 text

VANTAGENS DO RAILS PARA O FRONT-END

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

BRINKS ;)

Slide 61

Slide 61 text

MENOS CONFIG PRA MEXER DECISÕES JÁ FORAM TOMADAS, BASTA SE PREOCUPAR COM A FUNCIONALIDADE VANTAGENS DO RAILS

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

COMPLEXIDADE BAIXA ISOLANDO O FRONT-END, PRECISAMOS CUIDAR TAMBÉM DE MAIS UMA APLICAÇÃO WEB. MONITORAMENTO DE SERVER, TRACK DE ERROS, PERFORMANCE E CUIDADO COM OUTRAS COISAS VANTAGENS DO RAILS

Slide 64

Slide 64 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 RAILS

Slide 65

Slide 65 text

FRAMEWORK CONHECIDO, 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 RAILS

Slide 66

Slide 66 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 RAILS

Slide 67

Slide 67 text

AGORA FIQUEI CONFUSO… CALMA

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 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 72

Slide 72 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 73

Slide 73 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 74

Slide 74 text

E COMO?

Slide 75

Slide 75 text

E COMO? CONVENCENDO COM DADOS O QUANTO DE IMPACTO NA PRODUTIVIDADE PARA O FRONT-END O RAILS TEM INFLUENCIADO? QUE TIPOS DE FERRAMENTAS PODERÍAMOS USAR SE MIGRÁSSEMOS PRA OUTRA STACK? QUANTAS PESSOAS JÁ TRABALHARAM NA STACK ATUAL E NA QUE VOCÊS QUEREM MIGRAR?

Slide 76

Slide 76 text

E COMO? MIGRANDO AOS POUCOS ESCOLHA UMA PÁGINA OU UMA PARTE PEQUENA DA APLICAÇÃO PRA COMEÇAR A MUDANÇA. FAÇA ITERATIVO. IMPLEMENTE, MEÇA. REFATORE, MEÇA. MOSTRE O RESULTADO DEPOIS DA MIGRAÇÃO.

Slide 77

Slide 77 text

E COMO? FAÇA POCs “PROVE OF CONCEPT” É JUSTAMENTE PRA TESTAR FERRAMENTAS QUE O TIME DESEJA IMPLEMENTAR. FAÇA POCs QUE PRODUZAM UMA ANÁLISE DO QUE FOI ESTUDADO. POCs SEM RESULTADO NÃO FAZEM SENTIDO.

Slide 78

Slide 78 text

E COMO? MOSTRE MIGRAÇÕES DE OUTRAS EMPRESAS BLOG POSTS EXPLICANDO OS PONTOS POSITIVOS E NEGATIVOS ESTÃO AÍ AOS MONTES. LEIA E TENTE ENCAIXAR NA SUA PROPOSTA DE MUDANÇA. CONVENCER COM EXEMPLOS É O MELHOR CAMINHO.

Slide 79

Slide 79 text

AVALIE, PESQUISE, LEIA ANTES DE MUDAR, TOME UMA DECISÃO BASEADA NO SEU CENÁRIO EM VÁRIOS CASOS, RAILS PARA O FRONT AINDA FAZ MUITO SENTIDO!!! TOME CUIDADO COM BLOG POST “PAGANDO DE COOL”, MUDANDO TODA STACK E ETC. ETC. ETC. AVALIE!!

Slide 80

Slide 80 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