Cómo Shopify Construyó Shop.app: Una Historia de Éxito de Remix

Shop es una popular aplicación móvil de Shopify que permite a los usuarios descubrir comerciantes, realizar compras y rastrear pedidos a través de varios servicios de entrega. A principios de 2023, Shopify decidió llevar Shop a la web, con el objetivo de lograr paridad de funciones con las aplicaciones nativas y aprovechar las ventajas únicas de la plataforma web. Esta decisión fue impulsada por el potencial de captar más usuarios, crear un ciclo de retroalimentación más rápido y permitir una rápida experimentación y mejora.

Shopify seleccionó Remix como el marco para construir Shop.app debido a varios factores clave. Primero, la compatibilidad de Remix con React permitió al equipo reutilizar la lógica, los estilos y la experiencia de usuario de la aplicación existente de React Native. En segundo lugar, Remix ofreció la flexibilidad para acomodar los patrones existentes del equipo, como la obtención de datos con Apollo Client. Además, Remix proporcionó características esenciales como el renderizado del lado del servidor para mejorar la experiencia de usuario y el SEO. La adaptabilidad del marco se demostró inicialmente en un proyecto más pequeño, Shop.ai, lo que dio al equipo confianza en las capacidades de Remix para el proyecto más grande de Shop.app.

El desarrollo de Shop.app con Remix aprovechó la estructura de monorepo existente de Shopify, que contenía el código fuente para las versiones de iOS, Android y web de Shop. Esta configuración simplificó la migración de las páginas de marketing existentes y permitió una fácil colaboración entre desarrolladores nativos y web. La flexibilidad de Remix permitió una integración fluida con la infraestructura existente, lo que permitió al equipo comenzar el desarrollo rápidamente. El equipo pudo lanzar la página del producto inicial en solo tres meses, mostrando la eficiencia de Remix en facilitar ciclos de desarrollo rápidos.

Un desafío que enfrentó el equipo fueron los tiempos lentos de Hot Module Replacement (HMR), que inicialmente tardaban alrededor de 9 segundos. Este problema se abordó adoptando el nuevo plugin Vite de Remix, que mejoró inmediatamente los tiempos de HMR a 2.3 segundos. Una optimización adicional, que incluía paralelizar el proceso de construcción para Tailwind CSS, redujo los tiempos de HMR a impresionantes 0.1 segundos. Esta mejora de 90x en la velocidad de desarrollo mejoró significativamente la productividad del equipo y su capacidad para iterar rápidamente.

El exitoso desarrollo de Shop.app con Remix demostró varios logros clave. El equipo pudo transformar rápidamente un simple sitio de marketing en una aplicación web completamente funcional, sirviendo a millones de usuarios en todo el mundo. La flexibilidad de Remix permitió la integración de patrones y bibliotecas existentes mientras proporcionaba la opción de adoptar gradualmente características específicas de Remix. El proyecto destacó la importancia de elegir las herramientas adecuadas que se alineen con las limitaciones y objetivos del proyecto. En última instancia, la experiencia de Shopify con Remix en la construcción de Shop.app muestra el potencial del marco para desarrollar de manera eficiente aplicaciones web complejas y escalables en un corto período de tiempo.