Frontend no Sportmaster Lab

Olá! Meu nome é Sergey, sou o chefe do departamento de desenvolvimento de front-end. Numa altura em que as conferências offline de perfis eram algo comum, tínhamos emblemas: o nome da empresa - "Sportmaster", - o primeiro e último nome. Se colegas de outras empresas nos abordassem, ao olharem esses crachás, eles se surpreendiam: afinal, a Sportmaster é uma loja que vende equipamentos esportivos, o que a TI tem a ver com isso?



Poucas pessoas sabem que o Sportmaster reúne todo um grupo de empresas, que inclui Ostin, FunDay e outras. A divisão SMLab, que emprega quase 1.500 pessoas, é responsável por manter a operação de toda essa máquina. Destes, cerca de 400 são desenvolvedores e 25-30 são desenvolvedores front-end. Todo mundo está envolvido no suporte de TI para manufatura, logística, finanças, e isso também inclui desenvolvimento web, garantia de qualidade e muitos outros.



Todos os nossos desenvolvedores estão fazendo quase a mesma coisa que colegas em outras grandes empresas: desenvolver novos sistemas e manter os antigos. Temos uma pilha de tecnologia muito grande, bem como um grande escopo de aplicativos que apoiamos e desenvolvemos. Sobre nossos ombros está o desenvolvimento e suporte de tais sites: Sportmaster, Ostin, FunDay, Columbia, Fila, Demix, UrbanVibes. Além de tudo isso, contamos com um grande trampolim para automação interna. Em geral, para desenvolvedores, há onde implantar, para aprimorar suas habilidades.



Cozinha interna



imagem








Como já disse aos desenvolvedores de nossa divisão de cerca de 400 pessoas, para administrar com eficácia uma divisão tão grande, a empresa iniciou um processo de transformação há dois anos. Agora estamos trabalhando no Agile, atualmente temos cerca de 30 equipes de produtos, e espera-se que até 100 desenvolvam e mantenham seus projetos. Cada equipe possui uma variedade de competências: negócios, analistas, desenvolvedores, testadores, engenheiros de automação, metodologistas. Criamos um portal especial onde rastreamos as métricas da equipe e os metodologistas, por sua vez, ajudam as equipes a definir os fluxos. Assim que a equipe se torna suficientemente independente, os metodologistas passam a ajudar outras equipes.



O Frontend em seu bom entendimento nasceu no SMLab há dois ou três anos. Antes disso, havia um zoológico de frameworks, um grande número de várias bibliotecas como knockout, jquery. Tudo isso impôs muitas restrições ao desenvolvimento, busca de novos colaboradores e rodízio entre projetos.



A primeira coisa que fizemos foi desmontar todos os softwares da empresa, em que consistem e em que estão escritos, e fizemos um radar tecnológico, graças ao qual atualmente controlamos a lista de tecnologias disponíveis na empresa. Temos regras claras para adicionar novas tecnologias à lista de tecnologias disponíveis. Caso seja necessário introduzir uma nova tecnologia no radar, forma-se um RND, uma equipe de especialistas é recrutada para conduzir o estudo. A partir dos resultados, a equipe faz uma apresentação da tecnologia e forma a documentação do RND e depois a defende na comissão técnica. Se o comitê decidir que a tecnologia é importante para um maior desenvolvimento, ele expande o escopo de tecnologias disponíveis para a empresa.



Também fizemos muitas pesquisas sobre a escolha do framework para toda a empresa, o que resultou na escolha do Vue. Agora um novo software é escrito nele, e todo o antigo é gradualmente reescrito.



Para todo o Sportmaster como um todo, utilizamos mais de 200 sistemas que automatizam todas as atividades internas da empresa. Por exemplo, automatizamos todo o processo comercial de merchandising: o processo de exibição de mercadorias na loja, verificação, etc. Agora estamos trabalhando na automação de estúdios fotográficos e de um call center, muita gente está envolvida nessa área.



Todo o e-commerce no Sportmaster está dividido em dois grandes grupos:

O primeiro grupo são os sites gigantes: como Sportmaster e Austin, e o segundo é um grupo de sites igualmente importantes, mas com cargas bem menores, como FunDay e o grupo de sites monomarca.



Ostin se tornou o primeiro gigante a ser escrito inteiramente em novas tecnologias como NodeJS, Vue, SSR, Kotlin, etc. e entrou em produção. A versão atual do site Sportmaster foi escrita há cerca de 4 anos. Agora está em andamento o desenvolvimento de uma nova versão 3.0 em novas tecnologias com um novo design, e em breve substituirá a antiga. A situação é semelhante com o site Funday do segundo grupo, o site está sendo desenvolvido ativamente usando uma nova pilha, em breve veremos um novo site.



O grupo de sites monomarca foi a segunda iteração de desenvolvimento de sites na nova pilha. Fui apresentado temporariamente à equipe na fase de sua formação e ocupava o cargo de líder de equipe, atualmente deixei a equipe e continuo trabalhando com a equipe a partir do cargo de curador.



Sites de marca única



imagem



Um pouco de fundo. Antes de mudar para TI, trabalhei no mercado por cerca de 5 anos. Mais de uma vez me deparei com um software recém-criado, do qual tive a sensação de que os programadores o estavam escrevendo exclusivamente para eles. E então cheguei à conclusão de que o produto deve ser conveniente para todos: para usuários externos e para todos os participantes do processo de desenvolvimento de dentro.



Quando foi a vez dos sites monomarca. Na verdade, um mês antes do início do desenvolvimento, minha equipe e eu fomos estudar sites já criados por outras empresas e apontamos dois problemas principais.



Primeiro, as empresas negligenciam as métricas do usuário: percebemos que, por exemplo, um cartão de produto é aberto por 20 segundos, qualquer filtro é aplicado por 10-15 segundos. Ou seja, não se trata de uma compra, mas de algum tipo de luta com o site.



Em segundo lugar, existem problemas com a exibição do site em dispositivos móveis. Eles são todos tortos.



Portanto, quando chegou a nossa vez, a primeira coisa que fizemos foi criar um diagrama de componentes, desenhar todos os blocos e conexões que deveriam ter sido, e então começar a trabalhar na otimização de cada bloco separadamente e suas conexões com outros blocos. Concordamos com o backend que toda a lógica, trabalhando com microsserviços, cálculos, agregações necessárias e assim por diante, recai sobre seus ombros, e a frente está envolvida na exibição e lógica de interação com os usuários.



Graças a isso, minimizamos o tamanho da resposta e padronizamos significativamente a API, o que torna mais fácil para a equipe navegar no processo e no acorde de trabalho em novas funcionalidades, rapidamente fechamos um contrato.



No segundo negócio global, discutimos e concordamos na equipe como trabalhamos com estática de aplicativos. A estática nos causou problemas em outros projetos mais de uma vez, quando de repente se tornou incontrolável e seu tamanho foi calculado em gigabytes. Em geral, concordamos em abandonar esta pasta: ela será gerada e coletada automaticamente por nosso aplicativo. O projeto já tem cerca de um ano e todo o conteúdo estático não pesa mais que 30 MB.



Quando chegamos ao layout, decidimos conduzir o desenvolvimento para que não houvesse duplicação de código - fizemos o layout para que pudéssemos adaptá-lo a diferentes dispositivos. Os especialistas em SEO fizeram um ótimo trabalho nessa questão, informando quais blocos são dependentes de SEO e quais não são. Destacamos o CSS crítico. Todas essas ações mínimas levaram ao fato de que a página no site de uma única marca pesa em média não mais que 20 KB e abre quase que instantaneamente.



Também houve resultados inesperados. No início do projeto, começamos a compilar a documentação não da forma que todos costumam escrever, com uma lista de componentes e uma lista de suas funções. Documentamos tudo em geral: comandos de inicialização, dependências, ambientes, estilos de código, etc. E eles fizeram tudo isso, em geral, apenas para si próprios. Mas quando tudo estava apenas começando, havia cinco pessoas no projeto, e agora há 20 delas.



E agora é muito mais fácil para nós atualizar os novos funcionários - apenas os deixamos estudar a documentação por alguns dias, após o que eles estão prontos para ir e se envolver em missões de combate por conta própria.



All Articles