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

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.

Bfcf5c88d40733a45ce754e6ce225a8b?s=128

Eduardo Matos

November 11, 2017
Tweet

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
  16. None
  17. None
  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
  22. None
  23. None
  24. None
  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

  27. None
  28. TIME E CULTURA

  29. TAMANHO DA APLICAÇÃO PESSOA NOVA NO TIME SE ASSUSTA E

    SE PERDE COM CODEBASE GIGANTE TIME E CULTURA
  30. None
  31. None
  32. None
  33. None
  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
  38. None
  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
  43. None
  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

  56. None
  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 ;)