polyrepo<\/b><\/a> \u00e9 um reposit\u00f3rio que cont\u00e9m v\u00e1rios projetos. <\/b>N\u00f3s usamos um estilo de organiza\u00e7\u00e3o polyrepo, o que significa apenas que cada projeto de front-end tinha seu pr\u00f3prio reposit\u00f3rio, embora muitos dos projetos repetissem as mesmas tarefas e reproduzissem os mesmos recursos. Como um hub central, os polyrepos podem se tornar um desafio de manter \u00e0 medida que o n\u00famero de projetos armazenados aumenta. Em muitos casos, tivemos que implantar cada polyrepo simultaneamente com as mesmas atualiza\u00e7\u00f5es para garantir uma experi\u00eancia consistente em nossos produtos.<\/p>\n\n\n\n Do ponto de vista da manuten\u00e7\u00e3o, isso dificultou que as equipes localizassem e trabalhassem com o c\u00f3digo de que precisam. O gerenciamento de v\u00e1rios reposit\u00f3rios com recursos redundantes geralmente significa que eles respondem mais lentamente e<\/i> consomem mais recursos, o que \u00e9 um grande problema se voc\u00ea faz push e pull de c\u00f3digo com frequ\u00eancia. Como os recursos podem ser distribu\u00eddos por v\u00e1rias bases de c\u00f3digo, os polyrepos podem tornar a localiza\u00e7\u00e3o de bugs mais dif\u00edcil do que encontrar a proverbial agulha no palheiro.<\/p>\n\n\n\n
Com nossa estrutura polyrepo anterior \u00e0 reconstru\u00e7\u00e3o, sab\u00edamos que o futuro seria uma realidade de vasculhar reposit\u00f3rios com uma lanterna procurando pelo que precis\u00e1vamos, e que seria desafiador colaborar, dimensionar e compartilhar o c\u00f3digo \u00e0 medida que cresc\u00edamos.<\/p>\n\n\n\n
Estas eram nossas principais preocupa\u00e7\u00f5es:<\/b><\/p>\n\n\n\n\nDesenvolvimento conjunto desafiador<\/li>\n\n\n\n Forte acoplamento<\/li>\n\n\n\n Escalabilidade, disponibilidade e gerenciamento de desempenho<\/li>\n\n\n\n Dificuldade de compartilhar c\u00f3digo<\/li>\n\n\n\n Duplica\u00e7\u00e3o<\/li>\n\n\n\n Ferramentas inconsistentes<\/li>\n<\/ul>\n\n\n\nQuando se trata de gerenciamento de c\u00f3digo-fonte, h\u00e1 muitas solu\u00e7\u00f5es, mas decidimos que uma estrutura modular de monorepo aliviaria a maioria de nossas dores de desenvolvimento no futuro.<\/p>\n\n\n\n
Planos para um novo reposit\u00f3rio brilhante: uma abordagem modular<\/h2>\n\n\n\n Uma abordagem de monorepo envolve o armazenamento de todo o c\u00f3digo do projeto em um \u00fanico e grande reposit\u00f3rio<\/b>. Isso resolveria os problemas de compartilhamento e duplica\u00e7\u00e3o de c\u00f3digo que tivemos com nossa organiza\u00e7\u00e3o polyrepo, mas os monorepos n\u00e3o s\u00e3o uma solu\u00e7\u00e3o m\u00e1gica. Se o c\u00f3digo for fortemente acoplado, os monorepos tamb\u00e9m precisar\u00e3o ser projetados com modularidade.<\/p>\n\n\n\n
Uma abordagem modular envolve dividir um grande projeto em m\u00f3dulos menores e independentes que podem ser desenvolvidos, testados e mantidos separadamente<\/b>. Isso permite maior flexibilidade e capacidade de reutiliza\u00e7\u00e3o, bem como a capacidade de atualizar facilmente m\u00f3dulos individuais sem afetar o resto do projeto.<\/p>\n\n\n\n
Sab\u00edamos que uma solu\u00e7\u00e3o modular e em monorepo nos permitiria ser mais eficientes com:<\/p>\n\n\n\n
\nGera\u00e7\u00e3o de c\u00f3digo<\/li>\n\n\n\n Compartilhamento de c\u00f3digo<\/li>\n\n\n\n Execu\u00e7\u00e3o e orquestra\u00e7\u00e3o de tarefas distribu\u00eddas<\/li>\n\n\n\n Armazenamento em cache<\/li>\n\n\n\n TypeScript<\/li>\n<\/ul>\n\n\n \r\n\r\n
O TypeScript \u00e9 um superconjunto de JavaScript tipado que facilita aos desenvolvedores a constru\u00e7\u00e3o de projetos em escala.<\/b> Ele melhora a experi\u00eancia do desenvolvedor ao fornecer interfaces, aliases de tipo, an\u00e1lise est\u00e1tica de c\u00f3digo em tempo de desenvolvimento e outras ferramentas, permitindo que os desenvolvedores adicionem tipos aos seus projetos. Para nossa equipe, o TypeScript \u00e9 um conjunto de habilidades que sab\u00edamos que quer\u00edamos come\u00e7ar a buscar quando se tratava de adicionar membros \u00e0 nossa equipe.<\/div>\r\n <\/div>\r\n\n\n\nPisando em calos: a dan\u00e7a da implanta\u00e7\u00e3o<\/h2>\n\n\n\n Sem d\u00favida, o maior desafio de viver em um monorepo (monol\u00edtico ou n\u00e3o) \u00e9 que, quanto mais pessoas contribu\u00edrem, maior ser\u00e1 o potencial de pisarmos nos calos uns dos outros. De que adianta uma experi\u00eancia de desenvolvimento reformulada se o seu c\u00f3digo for substitu\u00eddo em uma mesclagem ruim? Se realmente estamos fazendo uma reformula\u00e7\u00e3o hol\u00edstica de nossa pilha, tamb\u00e9m devemos analisar como podemos melhorar nosso processo de implanta\u00e7\u00e3o. Esses foram os desafios mais urgentes:<\/p>\n\n\n\n
\nEscalabilidade: <\/b>Seria uma m\u00e1 ideia reconstruir TODO o c\u00f3digo no monorepo para as menores altera\u00e7\u00f5es, digamos, corrigir um erro de digita\u00e7\u00e3o em algum texto. Era exatamente isso que est\u00e1vamos fazendo em nosso sistema antigo. O novo processo aproveitaria os recursos integrados do NX para avaliar e reconstruir apenas os arquivos afetados pela altera\u00e7\u00e3o, no n\u00edvel mais granular.<\/li>\n\n\n\nImplanta\u00e7\u00e3o: <\/b>Mantivemos a maior parte da estrutura do nosso pipeline de implanta\u00e7\u00e3o. Uma vez que a imagem \u00e9 constru\u00edda, ela vai para o GitHub Container Repository. Nossa equipe de SRE ajustou nosso sistema de implanta\u00e7\u00e3o durante a migra\u00e7\u00e3o da AWS para o GCP. Podemos implantar facilmente qualquer ramifica\u00e7\u00e3o do nosso canal de implanta\u00e7\u00e3o no Slack, com um relat\u00f3rio mais agrad\u00e1vel gra\u00e7as a uma adi\u00e7\u00e3o recente que obtivemos durante a migra\u00e7\u00e3o.<\/li>\n\n\n\nCI\/CD:<\/b> Nosso sistema antigo usava uma vers\u00e3o realmente antiga do Jenkins para executar testes e construir\/distribuir nossas imagens de aplicativo por tr\u00e1s de uma VPN. Quando a compila\u00e7\u00e3o falhava, precis\u00e1vamos de um desenvolvedor s\u00eanior de alto n\u00edvel, familiarizado com as antigas formas, para consert\u00e1-la. Em nosso novo sistema, t\u00ednhamos o plano de migrar para o GitHub Actions, onde as configura\u00e7\u00f5es s\u00e3o acess\u00edveis, declarativas e bem documentadas.<\/li>\n<\/ul>\n\n\n\nDesafios falsos e solu\u00e7\u00f5es excelentes<\/h2>\n\n\n\n Projetos de qualquer tipo apresentam desafios, tanto os esperados quanto os surpreendentes. Sab\u00edamos que precis\u00e1vamos ter um plano para superar alguns problemas e que a nova vers\u00e3o do aplicativo precisava focar no desempenho sob v\u00e1rios \u00e2ngulos.<\/p>\n\n\n\nPro\u00adble\u00admas iden\u00adti\u00adfi\u00adca\u00addos<\/th> So\u00adlu\u00ad\u00e7\u00f5es pro\u00adpos\u00adtas<\/th><\/tr><\/thead> Con\u00adven\u00ad\u00e7\u00f5es de c\u00f3\u00addi\u00adgo pou\u00adco cla\u00adras<\/strong>Gu\u00adia de es\u00adti\u00adlo de c\u00f3\u00addi\u00adgo<\/strong>Reu\u00adti\u00adli\u00adzar um pe\u00adque\u00adno con\u00adjun\u00adto de so\u00adlu\u00ad\u00e7\u00f5es e pa\u00addr\u00f5es ge\u00adne\u00adra\u00adli\u00adza\u00addos tor\u00adna o c\u00f3\u00addi\u00adgo mais f\u00e1\u00adcil de en\u00adten\u00adder e re\u00addu\u00adz a pro\u00adba\u00adbi\u00adli\u00adda\u00adde de bugs\u00ad di\u00adf\u00ed\u00adceis de en\u00adcon\u00adtrar. No en\u00adtan\u00adto, 90% do nos\u00adso ar\u00adma\u00adze\u00adna\u00admen\u00adto Re\u00addux\u00ad era a\u00adpe\u00adnas um ca\u00adche de re\u00adde glo\u00adri\u00adfi\u00adca\u00addo. O Re\u00addux\u00ad e\u00adxi\u00adge m\u00fal\u00adti\u00adplas ca\u00adma\u00addas de so\u00adbre\u00adcar\u00adga pa\u00adra ca\u00adda mem\u00adbro do es\u00adta\u00addo. Is\u00adso re\u00adsul\u00adtou em mui\u00adtas re\u00addun\u00add\u00e2n\u00adcias e com\u00adple\u00adxi\u00adda\u00adde des\u00adne\u00adces\u00ads\u00e1\u00adria.<\/td> Se\u00adpa\u00adrar o ca\u00adche da re\u00adde e o es\u00adta\u00addo do a\u00adpli\u00adca\u00adti\u00advo<\/strong>Ar\u00adqui\u00adte\u00adtu\u00adra de re\u00adde em ca\u00adma\u00addas m\u00fal\u00adti\u00adplas<\/strong>API p\u00fa\u00adbli\u00adca pri\u00admei\u00adro<\/strong>N\u00e3o jogue o beb\u00ea fora junto com a \u00e1gua do banho<\/h3>\n\n\n\n Escrevemos centenas de milhares de linhas de c\u00f3digo na \u00faltima d\u00e9cada. Escrevemos centenas de milhares de linhas de c\u00f3digo na \u00faltima d\u00e9cada. Isso seria invi\u00e1vel. Precis\u00e1vamos encontrar uma maneira de continuar incorporando esses recursos existentes sem comprometer nossos objetivos para a nova pilha. Encontramos uma solu\u00e7\u00e3o em uma tecnologia chamada module federation.<\/p>\n\n\n\n
Com o plugin de module federation do Webpack, pudemos criar uma nova compila\u00e7\u00e3o do nosso aplicativo antigo com mudan\u00e7as m\u00ednimas<\/b>, o que seria capaz de integrar os recursos existentes na nova pilha do portal. Ainda ter\u00edamos um objetivo de longo prazo de portar o c\u00f3digo agora legado para padr\u00f5es mais recentes, mas isso nos permitiria come\u00e7ar a escrever novos recursos com os novos benef\u00edcios imediatamente.<\/p>\n\n\n\nAinda ter\u00edamos um objetivo de longo prazo de portar o c\u00f3digo legado para padr\u00f5es mais recentes, mas isso nos permitiria come\u00e7ar a escrever novos recursos com os novos benef\u00edcios imediatamente.<\/h2>\n\n\n\n
Sab\u00edamos que consolidar nossas plataformas enquanto ampli\u00e1vamos continuamente os recursos e conjuntos de produtos exigiria um esfor\u00e7o maci\u00e7o, e nosso planejamento influenciou o que quer\u00edamos para nossa nova pilha de front-end, e como gerenciar\u00edamos o legado imortal de sistemas de estilo CSS antiquados, padr\u00f5es de componentes de classe descontinuados e gerenciamento desajeitado do estado do aplicativo.<\/p>\n\n\n\n
Como est\u00e1vamos construindo do zero \u2013 especialmente com a migra\u00e7\u00e3o da AWS para o Google Cloud \u2013 a melhor solu\u00e7\u00e3o foi uma ruptura total<\/b>. Um novo reposit\u00f3rio com padr\u00f5es melhores e mais elevados, module federation, bibliotecas modulares e compartilhadas, e uma documenta\u00e7\u00e3o interna e voltada para o usu\u00e1rio mais abrangente.<\/p>\n\n\n\nFoi\u00a0uma etapa intensa de planejamento e prepara\u00e7\u00e3o. Foi\u00a0uma etapa intensa de planejamento e prepara\u00e7\u00e3o.<\/p>\n\n\n\n
Fase 2? Transformar a ideia em realidade \u2013 e isso envolveu muito mais equipes. Desenvolvedores, acredito que nossa aventura est\u00e1 prestes a tomar um rumo muito interessante. <\/p>\n\n\n\r\n