Como a Shopify Construíu o Shop.app: Uma História de Sucesso com Remix

Shop é um aplicativo móvel popular da Shopify que permite aos usuários descobrir comerciantes, fazer compras e rastrear pedidos em vários serviços de entrega. No início de 2023, a Shopify decidiu levar o Shop para a web, visando alcançar paridade de recursos com os aplicativos nativos e capitalizar as vantagens únicas da plataforma web. Essa decisão foi impulsionada pelo potencial de capturar mais usuários, criar um ciclo de feedback mais rápido e permitir experimentação e melhoria rápidas.

A Shopify selecionou o Remix como a estrutura para construir o Shop.app devido a vários fatores-chave. Primeiro, a compatibilidade do Remix com o React permitiu que a equipe reutilizasse lógica, estilos e UX do aplicativo React Native existente. Em segundo lugar, o Remix ofereceu a flexibilidade para acomodar os padrões existentes da equipe, como a busca de dados com o Apollo Client. Além disso, o Remix forneceu recursos essenciais como renderização do lado do servidor para melhorar a UX e SEO. A adaptabilidade da estrutura foi inicialmente comprovada em um projeto menor, o Shop.ai, que deu à equipe confiança nas capacidades do Remix para o maior projeto Shop.app.

O desenvolvimento do Shop.app com Remix aproveitou a estrutura de monorepo existente da Shopify, que continha o código-fonte para as versões iOS, Android e web do Shop. Essa configuração simplificou a migração das páginas de marketing existentes e permitiu fácil colaboração entre desenvolvedores nativos e web. A flexibilidade do Remix possibilitou uma integração perfeita com a infraestrutura existente, permitindo que a equipe iniciasse o desenvolvimento rapidamente. A equipe conseguiu lançar a página do produto inicial em apenas três meses, demonstrando a eficiência do Remix em facilitar ciclos de desenvolvimento rápidos.

Um desafio que a equipe enfrentou foram os tempos lentos de Hot Module Replacement (HMR), que inicialmente levavam cerca de 9 segundos. Esse problema foi resolvido adotando o novo plugin Vite do Remix, que melhorou imediatamente os tempos de HMR para 2,3 segundos. Mais otimizações, incluindo a paralelização do processo de construção para o Tailwind CSS, reduziram os tempos de HMR para impressionantes 0,1 segundos. Essa melhoria de 90x na velocidade de desenvolvimento aumentou significativamente a produtividade da equipe e sua capacidade de iterar rapidamente.

O desenvolvimento bem-sucedido do Shop.app com Remix demonstrou várias conquistas-chave. A equipe conseguiu transformar rapidamente um simples site de marketing em um aplicativo web totalmente funcional, atendendo milhões de usuários em todo o mundo. A flexibilidade do Remix permitiu a integração de padrões e bibliotecas existentes, enquanto oferecia a opção de adotar gradualmente recursos específicos do Remix. O projeto destacou a importância de escolher as ferramentas certas que se alinhem às restrições e objetivos do projeto. Em última análise, a experiência da Shopify com o Remix na construção do Shop.app demonstra o potencial da estrutura para desenvolver de forma eficiente aplicativos web complexos e escaláveis em um curto período de tempo.